You can now easily add the preezie pixel code snippet to your website using Google Tag Manager (GTM). The same principle will work with other similar tag managers such as Tealium.

The pixel tracking code snippet tracks purchases made on your site to previous user behaviour.

There are two necessary steps to take:

• Plug in the initialisation code

• Generate a formatted transaction tracking code based on your shopping cart variables

preezie field definitions

All of these are required for every product in the cart at the time of purchase.

Steps for Google Tag Manager (GTM)

Here are the steps to add the code via GTM.

Step 1

• First create a new User-Defined variable that references the product details from the user’s purchased cart

  • In GTM, click on Variables > User-Defined > New > Variable Configuration > Custom JavaScript

  • Give it a name of preezie Order Tracking Product Data (Note, this is case sensitive!)

  • 

    Then paste in the below code code. If you already have a GTM Data Layer variable that captures the ecommerce variables of your cart replace {{Order Products}} with the name of that variable:

function() {
  var products = [];
  var productList = {{Order Products}};

  if (!productList) {
    return products;
  }

  for (var i in productList) {
    if (productList.hasOwnProperty(i) && productList[i] && productList[i].id != null) {
      var items = {};
      items.productId = productList[i].id;
      items.productName = productList[i].name;
      items.price = parseFloat(productList[i].price).toFixed(2);
      items.quantity = parseInt(productList[i].quantity);
      products.push(items);
    }
  }

  return products;
}

For example, productList[i].id; is used because your Data Layer variable being populated uses ‘id’ as the variable name for a sku/unique product id.

Therefore if you need to, update the variable names for the right hand side of the code to match how they appear in your equivalent {{Order Products}} variable.
For example, here we’ve replaced productList[i].id; with productList[i].sku; etc.

        var items = {};
        items.productId = productList[i].sku;
        items.productName= productList[i].ProductName;
        items.price = parseFloat(productList[i].PriceInclTax).toFixed(2);
        items.quantity = parseInt(productList[i].qty);
        products.push(items);

If you don’t have a Data Layer variable for a purchase in GTM, you need to create one and call it Order Products. To do this first make a test transaction in preview mode, then click on the purchase event and viewing the Data Layer tab.

In this example, the array is called purchase.items. This is the Data Layer Variable Name value:

Create the Data Layer Variable using that variable name and call it Order Products i.e. this is the {{Order Products}} referenced in your first code snippet.

Step 2

• You can now create a Tag to run the JavaScript that will use these product variables

  • Click Tags > New > Variable Configuration > Custom HTML

  • Give it a name of preezie checkout initialisation

  • Paste into the box this code:

<script  type = "text/javascript" >
  (function () {
    !function (e, t, n, p, r, s) { e.prz || ((p = e.prz = function () { p.process ? p.process.apply(p, arguments) : p.queue.push(arguments) }).queue = [], p.t = +new Date, (r = t.createElement(n)).async = 1, r.src = "https://preeziecdn.azureedge.net/production/prz_pixel.min.js?t=" + 864e5 * Math.ceil(new Date / 864e5), (s = t.getElementsByTagName(n)[0]).parentNode.insertBefore(r, s)) }(window, document, "script"), prz("init", "YOUR_PREEZIE_ID");
})();
</script>

Now update "YOUR_PREEZIE_ID" with your PRE tenant ID, for example, "PRE-412345"

This can be found in your preezie Admin:

https://admin.preezie.com/app/main/code-snippets > Your preezie id

Now add a Trigger of your Order Success/Thank You page, create one if you don’t already have one:

Step 3

• The final Tag to create will send the whole batch of data to preezie in the correct format.

  • Click Tags > New > Variable Configuration > Custom HTML

  • Give it a name of preezie pixel code

  • Paste into the box this code exactly:

<script type = "text/javascript" > 
(function () {
  var dataJson = {};
  dataJson.products = {{preezie Order Tracking Product Data}};
  prz("event", "transaction", dataJson);
})();
</script>

• Add the same Order success Trigger to this Tag - this tag also needs to fire on the checkout confirmation page

  

Step 4

• Now the final step is to ensure the preezie checkout initialisation Tag fires before the preezie pixel code Tag

  • In the preezie pixel code Tag click > Tag configuration > Advanced Settings > Tag Sequencing > Fire a tag before preezie pixel code fires > preezie checkout initialisation > Save

    

Now you can use GTM’s Preview mode to test it!

You can now publish your changes in GTM to start tracking transactions through preezie.