Google Tag Manager - preezie Widget via GTM

This page will go over how to implement the preezie widget into your webpage using Google Tag Manager.

Initial Setup:

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

Create a new 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 where you want your journey(s) to sit. Repeat this process for any additional pages.

Do not initialise the snippet on all pages, only on the pages which you want journey(s) on.

In trigger configuration, make sure trigger type is set as Initialization and select ‘Some Initialization Events’. In the dropdowns select the following
- Page URL
- contains
- Page URL that matches your order confirmation
Final setup should look simiar to this:

This custom GTM snippet contains code which allows you to place your widget under/within a specific html element too.
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.

example of changing to a custom class:
var targetElement = document.querySelector(".mycustomclasshere") || document.getElementById("INSERT_ID_TARGET")

example of changing to a custom id:
var targetElement = document.querySelector(".INSERT_CLASS_TARGET") || document.getElementById("mycustomidhere")

Replace PUT YOUR OWN GUIDE KEY HERE with the guideKey of your desired workflow from the preezie portal.

Tip: remember to not remove the '.' from the querySelector element

<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:

Example with custom class container and existing guide key

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:

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>