Skip to main content

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 Prisjakt Business Center

Usage​

Using the PJ pixel requires two steps:

  • Installing the pixel by loading the script on your page.
  • Calling the function pjpixel.track when a customer completes a purchase.

To install the PJ Pixel, add the following script tag between the opening and closing head tags on every landing, product and checkout page. Insert the pixel and client ID which you can find in Prisjakt Business Center's conversion page, once the PJ pixel is activated.

<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. This should be done when a purchase has been completed, e.g. on a "Thank you!" page

pjpixel.track('purchase', { amount: 5550, currency: 'SEK', numberOfItems: 3 }, { eventId: '7h1k9px-r4zgm3' });

This function takes five values in three arguments:

  • eventName - Should always be 'purchase' when tracking a conversion.
  • amount - The total transaction value of the shopping basket.
  • currency - Which currency was used, ISO 4217, e.g. upper case 'SEK'.
  • numberOfItems - The count of products in the transaction shopping basket.
  • eventId - Must be unique. Your reference of the purchase, e.g. an order number or transaction ID. Allows you to track an individual purchase. If you use the same eventId for two or more purchases, only the first occurrence will be registered.

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, when calling pjpixel.track( ... ) 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

  1. In your GTM dashboard, navigate to the container where you want to add the PJ Pixel.

  2. Click on "Add a new tag."

  3. 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 is loaded 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 tracked, you need to call the track function when a purchase occurs.

See "Usage" section for details on what values should be sent.

pjpixel.track('purchase', { amount: 5550, currency: 'SEK', numberOfItems: 3 }, { eventId: '7h1k9px-r4zgm3' });

Documents​

Modules​