PJ Pixel
The PJ Pixel is a powerful tool that enables you to track purchases, or conversions, on your website. By using this JavaScript library, the PJ Pixel will enable you to track purchases on your website, which are then sent back to Prisjakt and can be viewed in the Prisjakt Business Center.
To track conversions, Prisjakt automatically adds a unique click ID, called the "pjclid" parameter, to the URL that a user is directed to when they click on one of your Prisjakt products. However, in order for the PJ Pixel to work correctly, you need to enable the URL decoration of the "pjclid" parameter in our Business Center.
The conversion window for the PJ Pixel is set to 30 days, meaning that any purchase made within 30 days of a customer clicking on one of your Prisjakt products will be attributed to that click. However, due to Apple ITP (Intelligent Tracking Prevention), the conversion window may be reduced to as little as 7 days in some cases. Therefore, it's important to keep this in mind when analyzing your conversion data.
Requirements
To implement the PJ Pixel, you will need:
- access to your website's code base
- access to the Prisjakt Business Center
Usage
To install the PJ Pixel, add the following script tag between the opening and closing head tags on every landing, product and checkout page.
<head>
<script async src="https://cdn.pji.nu/libs/pjpixel/pjpixel.min.js"></script>
<script>
window.addEventListener('load', function () {
pjpixel.init('<YOUR PIXEL ID>', { clientId: '<YOUR CLIENT ID>' });
});
</script>
...
</head>
Once you have added the PJ Pixel script to your web pages, you can start tracking conversions by calling the track method:
pjpixel.track('purchase', { amount: 5550, currency: 'SEK', numberOfItems: 3 }, { eventId: '7h1k9px-r4zgm3' });
The track method takes three arguments: the name of the event you want to track (in this case, 'purchase'), an object containing data (in this case, the transaction value, currency and numberOfItems), and a third parameter containing additional event data with event ID (called eventId). An order number or transaction ID are two potential identifiers that can be used as an event ID. Setting the event ID will help to deduplicate events on the server. Note that the purchase amount parameter refers to the transaction value that the customer pays for the purchase.
If the user revokes their consent to be tracked, you can clear the PJ Pixel library's data by calling the clear function. This ensures that you are not collecting any personal data without the user's explicit consent.
pjpixel.clear();
New Zealand shops
If your customer base is located in New Zealand, ensure better performance by loading the PJ Pixel from the dedicated URL:
<head>
<script async src="https://cdn.pricespy.co.nz/libs/pjpixel/pjpixel.min.js"></script>
<script>
window.addEventListener('load', function () {
pjpixel.init('<YOUR PIXEL ID>', { clientId: '<YOUR CLIENT ID>' });
});
</script>
...
</head>
This specific URL ensures efficient PJ Pixel integration, contributing to a faster and smoother user experience on your website.
How conversions are Tracked
When a user visits a website with the PJ Pixel installed, the Pixel scans the URL for a click ID parameter. If it finds one, the ID is stored in the user's browser storage (localStorage) along with an expiration date. Later, if the user completes a purchase on the website, the PJ Pixel pairs the click ID with the purchase data and sends it to the Click and Conversion API. It's worth noting that this tracking is accomplished without utilizing cookies.
Using browser storage to store the click ID allows the PJ Pixel to track user interactions with the website across multiple browsing sessions without requiring server calls. This means that even if the user navigates away from the website and returns later, the PJ Pixel can accurately track their interactions. It's important to keep in mind that different web browsers have varying limitations on how long data can be stored in browser storage. For instance, WebKit-based browsers like Safari only allow data to be stored in localStorage for up to 7 days. Once the expiration time is up, the browser automatically removes the data from localStorage.
GDPR compliance
If you operate your business in certain locations, you may be required to adhere to the regulations outlined in the General Data Protection Regulation (GDPR). Since each organization is responsible for ensuring its own compliance with the GDPR, it is important to verify that you are in compliance with the applicable laws.
Google Tag Manager integration
If you use Google Tag Manager (GTM) to manage your website tags, you can use GTM to load the PJ Pixel. Here's a step-by-step guide on how to integrate the PJ Pixel using Google Tag Manager:
Step 1: Access your Google Tag Manager account
Log in to your Google Tag Manager account.
Step 2: Create a new tag
-
In your GTM dashboard, navigate to the container where you want to add the PJ Pixel.
-
Click on "Add a new tag."
-
Name your tag, and then click on the tag configuration section.
Step 3: Configure the PJ Pixel tag
Choose the "Custom HTML" tag type, and paste the PJ Pixel script into the HTML field. Ensure that you replace <YOUR PIXEL ID> and <YOUR CLIENT ID> with your actual PJ Pixel ID and client ID.
<script>
var script = document.createElement('script');
script.src = 'https://cdn.pji.nu/libs/pjpixel/pjpixel.min.js';
script.async = true;
script.addEventListener('load', function () {
pjpixel.init('<YOUR PIXEL ID>', { clientId: '<YOUR CLIENT ID>' });
});
document.getElementsByTagName('head')[0].appendChild(script);
</script>
Step 4: Set trigger
Determine when the PJ Pixel should fire. For example, you might want it to fire on all pages or specific conversion-related pages. Set up a trigger accordingly.
Step 5: Save the tag
Save your configuration, and then click "Submit" to publish the changes to your live website.
Step 6: Test the implementation
Use Google Tag Manager's preview mode to test whether the PJ Pixel fires correctly on your website.
Step 7: Publish the changes
Once you've verified that the PJ Pixel is working as expected, publish the changes in Google Tag Manager to make them live on your website.
Step 8: Track purchases
To ensure that purchases are accurately tracked, you need to call the track method when a purchase occurs.
pjpixel.track('purchase', { amount: 5550, currency: 'SEK', numberOfItems: 3 }, { eventId: '7h1k9px-r4zgm3' });