Using Google Tag Manager for preezie pixel

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.

Property	Type	Description
productId	String	The unique identifier of the product. If you’re using preezie Journeys this id must be equal to the id sent to preezie from your integrated product feed
productName	String	Name of the purchased product
quantity	Integer	Quantity of the purchased product
price	Decimal	Single item price. This will be a number to 2 decimal places

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:

How to find your purchase array DLV 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

Remember to replace YOUR_PREEZIE_ID placeholder in the below script with your exact preezie ID including quotes in the example below

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:

Remember the preezie Order Tracking Product Data variable name in this code needs to match the name of your Custom JavaScript variable you created in the first step.

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!

Follow these instructions to see a test transaction firing the correct code:

https://preezie.atlassian.net/wiki/spaces/PW/pages/19104300/Tracking+transactions+-+Pixel+tracking+guide#testingit

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