Page Comparison

This page

...

explains how to implement the preezie widget into your

...

webpages using Google Tag Manager.

*ensure that your container code is pasted in your page(s) before starting

Initial Setup:

Initial Setup for embedded journeys (single-code snippet version)

Create a new GTM tag with your desired name, we recommend ‘preezie-widgets-{pagename}’

• The type of tag must be set to custom HTML, create a new initialization trigger which only initialises on page , then paste in the <script> tag found in your journey/connector settings under Code Snippet

• There are 2 versions, choose the version including data-targets and data-isafter values, this will allow you to position where the widget loads on the page easily:

  Image Added

  
  For example

<script type="text/javascript" src="https://widget-cdn.preezie.com/production/preguide.min.js" data-widgetid="123456789" data-targets="header-container" data-isafter="true"></script>

Now update header-container to the HTML class or ID on your page where you want preezie to appear after: data-targets="header-container"

So if your HTML uses class="section-header" instead it would become data-targets="section-header"

Then underneath that, add this snippet below it:

<script>
    window.document.dispatchEvent(new Event("DOMContentLoaded", {
      bubbles: true,
      cancelable: true
    }));
</script>

The final tag would look like this:

<script type="text/javascript" src="https://widget-cdn.preezie.com/production/preguide.min.js" data-widgetid="123456789" data-targets="section-header" data-isafter="true"></script>
<script>
    window.document.dispatchEvent(new Event("DOMContentLoaded", {
      bubbles: true,
      cancelable: true
    }));
</script>

How do I find the HTML class/id?

• If most browsers, right-click and choose Inspect > Elements

• In the HTML you’ll be able to see which classes you can use, e.g. content-container

...

Add a trigger to your tag

Now add a trigger to your tag (e.g. Initialization) which initialises on the pages where you want your journey(s) to sit. Repeat this process for any additional pages.

Example trigger

• Set Initialization > Some Initialization Events. In the dropdowns select the following:

  • Page URL

  This custom GTM snippet contains code which allows you to place your widget under/within a specific html element too

  • contains

  • Page URL that matches your order confirmation

• Final setup should look similar to this:

...

Exit Intents, Popups & CTAs

This works in the same way as the Embedded version above but does NOT need data-targets element for page positioning, page positioning/triggers can be done via the preezie CMS.

You can obtain the code snippet from the CMS > Popups > Settings > Code Snippet:

...

Then add this additional code below the snippet, so it looks like this:

<script type="text/javascript" src="https://widget-cdn.preezie.com/production/preguide.min.js" data-widgetid="123456789"></script>
<script>
    window.document.dispatchEvent(new Event("DOMContentLoaded", {
      bubbles: true,
      cancelable: true
    }));
</script>

Add a trigger to this tag as above, this tag can be loaded on all pages as popups are controlled via preezie CMS instead. See this guide.

...

Initial Setup (full code snippet version)

Below is another version of the code snippet if your platform requires this level of control instead.

• Replace INSERT_CLASS_TARGET or INSERT_ID_TARGET with the class/id you'd like your widget to sit inside on your page. IMPORTANT: please only replace one of the target strings, never both.

• This will set the widget inside the first class or id which matches the name. If you would like the widget to sit under the target element instead, please change targetElement.innerHTML to targetElement.outerHTML.

...

<script type="text/javascript" src="https://preeziecdn.azureedge.net/production/preguide.min.js"></script>
    <script defer type="text/javascript">
      var targetElement = document.querySelector(".INSERT_CLASS_TARGET") || document.getElementById("INSERT_ID_TARGET")
      ;(function () {
        if (!targetElement) return
        targetElement.innerHTML += '<div id="preezie-widget-div-id"></div>'

        PREEZIE_GUIDE.render([
          {
            guideKey: "PUT YOUR OWN GUIDE KEY HERE",
            version: "1.0.0",
            renderTo: "preezie-widget-div-id",
          },
        ])
      })()
    </script>

Example Image:

...

Multiple Journeys On A Page

If you want to add another journey to a page, simply add another script below your initial workflows script.

Remember to change any instances of preezie-widget-div-id to another unique id for any additional widgets.

Example:

  <script type="text/javascript" src="https://preeziecdn.azureedge.net/production/preguide.min.js"></script>
    <script defer type="text/javascript">
      var targetElement = document.querySelector(".INSERT_CLASS_TARGET") || document.getElementById("INSERT_ID_TARGET")
      ;(function () {
        if (!targetElement) return
        targetElement.innerHTML += '<div id="preezie-widget-div-id"></div>'

        PREEZIE_GUIDE.render([
          {
            guideKey: "PUT YOUR OWN GUIDE KEY HERE",
            version: "1.0.0",
            renderTo: "preezie-widget-div-id",
          },
        ])
      })()
    </script>
<!-- New Widget -->
<script defer type="text/javascript">
      var targetElement = document.querySelector(".INSERT_CLASS_TARGET") || document.getElementById("INSERT_ID_TARGET")
      ;(function () {
        if (!targetElement) return
        targetElement.innerHTML += '<div id="CHANGE ME PLEASE"></div>'

        PREEZIE_GUIDE.render([
          {
            guideKey: "YOUR OTHER GUIDE KEY HERE",
            version: "1.0.0",
            renderTo: "CHANGE ME PLEASE",
          },
        ])
      })()
    </script>

Exit Intents, Popups & CTAs:

...

These will work exactly the same as journeys, you will just need to ensure your popups active rulings are configured correctly on the preezie portal.

...

You can select any class or id for the popup div to sit under.

...

In GTM, all you need to do is add a single Custom HTML Tag to load on all pages.

This tag uses the below format with your popup guide key added. If you load on all pages you can control which page and method is shown via the preezie CMS.

<script type="text/javascript" src="https://preeziecdn.azureedge.net/production/preguide.min.js"></script>
<div id="preezie-widget-div-id-popup"></div>
<script defer type="text/javascript">
    PREEZIE_GUIDE.render([
      {
        guideKey: 'YOUR POP UP GUIDE KEY HERE',
        version: '1.0.0',
        renderTo: 'preezie-widget-div-id-popup

...

'
      }
    ]);
</script>