Custom platforms - Pixel tracking guide

Owned by Danny Wang
Last updated: Mar 26, 2024 by Graham Ralls (Unlicensed)
4 min read

What the pixel does

To attribute purchases on your website to preezie user activity we need to capture some details of each product that was bought. This is done by adding some code to your checkout confirmation page which captures 4 attributes of each product that was in the user’s cart.

The product attributes captured are: product name, id, price and quantity

Why is it needed?

This checkout information is used to measure preezie assisted conversion rates and if you’re using nextbuy, to calculate commission of referred sales. This information feeds into the preezie Journeys dashboard and nextbuy dashboard connecting on site preezie activity events (views, clicks etc.) with subsequent purchase behaviour.

How to add the pixel

The pixel code fires in two steps:

  1. Initialise code on the checkout confirmation page

  2. Capture the purchased product information in the correct format

Depending on your ecommerce platform, the 2nd step will need to be customised based on your ecommerce platform.

Find your pixel code

  1. Go to your preezie admin

  2. Navigate to Transaction pixel

  3. Choose your CMS from the Select your CMS dropdown

image-20240326-044255.png

The options are:

Note, you can now also add track preezie performance in your Google Analytics, see this guide: Google Analytics tracking of preezie users

Magento and all other platforms

  1. Choose Other from the Select your CMS dropdown

    image-20240326-044402.png

  2. This code is in 2 parts.

    The first part is your dedicated initialisation code. This can be copied from your preezie portal into the <head> section of your checkout confirmation page:

<script>

!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://widget-cdn.preezie.com/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>

Do not copy the code above as this does not contain your dedicated preezie ID. The required code can be found in the Code Snippets section of your preezie portal

  1. The second part is to create some custom code that dynamically passes the product information below for all products that were purchased. The template is:

    <script>
    prz("event", "transaction", {"products": [{"productId": "SKU1", "productName":"${encodeURIComponent(product1)}", "quantity":1, "price":10.99},]});
    </script>

Where productId, productName, quantity, and price are passed all values in the purchased shopping cart. Both of the parts together will pass the preezie script tag a JSON payload that we are able to record what was bought, the required product fields are defined as:

  Property

  Type

Description

  productId

  String

The unique identifier of the product. Must be equal to the id sent to preezie via the import API

  productName

  String

Name of the purchased product

  quantity

  Integer

Quantity of the purchased product

  price

  Decimal

Single item price including 2 decimal places

This part is platform specific and may require some development effort to create the custom code. Most eCommerce platforms provide an easy way to get the data to the page by reserving variables with product data for use in template editing.

The final result should look like this:

<script>

    prz("event", "transaction", '{"products": [{"productId": "SKU1", "productName":"product1", "quantity":1, "price":10.99},]}');

</script>

How to test it

We highly recommend testing the pixel code is loading correctly on a test site or theme before you add to your live site. Here are the steps to test it:

  1. Go to your website in any browser that has Developer Tools, in this example we are using Google Chrome

  2. Open the Developer Tools console and then make a purchase on your site

  3. Click Network in the Tools tabs, then type pixel.gif in the Filter to find the pixel.gif file

  4. Click on pixel.gif and then choose Payload in the righthand tabs

  5. Scroll down to see the correct JSON in the ed: section of the payload - this should match the correct product information of what you have just bought. It will look something like this:

    {"products":[ {"productId": "NARS123", "productName":"NARS%20Blush", "quantity": 1, "price": 4000 }, {"productId": "DIP123", "productName":"diptyque%20room%20spray", "quantity": 1, "price": 5999 }, ]}

Now you can see your product information being sent you are ready to publish your code live:

Things to look out for

  • Check your preezie ID being used in your script matches the one in your account, e.g. prz("init", "PRE-987654");

  • Make sure your script loads just on checkout confirmation, and not on any additional page loads such as order status, shipping tracking etc. Sometimes the same url pattern is kept for these different page states

  • If you are using your own custom code, ensure the JSON is encoded as a string correctly, for example use JSON.stringify as below:

prz("event", "transaction", JSON.stringify(dataJson));