Custom platforms - Pixel tracking guide

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:

Initialise code on the checkout confirmation page
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

Go to your preezie admin
Navigate to Transaction pixel
Choose your CMS from the Select your CMS dropdown

The options are:

Other - see guide below: Magento and all other platforms
Shopify - Shopify pixel guide
BigCommerce - BigCommerce pixel guide
Neto (aka Maropost) - Neto pixel guide

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

Choose Other from the Select your CMS dropdown
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

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:

Go to your website in any browser that has Developer Tools, in this example we are using Google Chrome
Open the Developer Tools console and then make a purchase on your site
Click Network in the Tools tabs, then type pixel.gif in the Filter to find the pixel.gif file
Click on pixel.gif and then choose Payload in the righthand tabs
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));