Shopify Custom Pixel

This version is currently in ALPHA. If you would like to use it, please contact our Helpdesk team!

What is the Shopify Custom Pixel

Shopify Custom Pixel is a feature that allows merchants to create and integrate custom tracking pixels on their Shopify store. These pixels help track specific events, user behavior, and conversions, providing valuable data for analytics and marketing purposes. Unlike standard pixels, custom pixels offer greater flexibility, enabling merchants to tailor their tracking to meet specific business needs or integrate with third-party services not natively supported by Shopify. This feature is particularly useful for advanced marketing strategies and detailed customer insights.

To get started swiftly, ensure you have the following prerequisites:

Shopify Site
JENTIS Account
at least one container within the JENTIS Account

Installation Steps

Shopify Store: Custom Pixel

Log into your Shopify account.
Navigate to Settings > Customer Events.
Press Add custom pixel and define a good name f.e. JENTIS.
Set the settings the following way:

Add in the Codeblock the following code:

CODE

window.jentisApp = window.jentisApp || {};
window.jentisApp.cookieSettingMethod = window.jentisApp.cookieSettingMethod || setShopifyCookie;

window.jentis = window.jentis || {};
window.jentis.shopifyApp = window.jentis.shopifyApp || {};
window.jentis.shopifyApp.isJentisLoaded = false;
window.jentis.shopifyApp.dcp = window.jentis.shopifyApp.dcp || {};

// Please adapt the DCP-Configuration to your needs!
window.jentis.shopifyApp.dcp.domain = "intercontinentalgrid.org";
window.jentis.shopifyApp.dcp.hash = "9sc4rl";
window.jentis.shopifyApp.dcp.short = "shopify-teststore-001";
window.jentis.shopifyApp.dcp.filehash = "gbujzl";
window.jentis.shopifyApp.dcp.environment= "live";

window.jentis.shopifyApp.analytics = window.jentis.shopifyApp.analytics || [];
window.jentis.shopifyApp.customerPrivacy = window.jentis.shopifyApp.customerPrivacy || [];
window.jentis.shopifyApp.createObservableArray = function(baseArray) {
    var observableArray = {
        array: baseArray,
        observers: []
    };
    
    observableArray.addObserver = function(observer) {
        this.observers.push(observer);
        for (var i = 0; i < this.array.length; i++) {
            observer(this.array[i]);
        }
    };
    
    observableArray.push = function() {
        var items = Array.prototype.slice.call(arguments);
        var result = Array.prototype.push.apply(this.array, items);
        for (var i = 0; i < this.observers.length; i++) {
            this.observers[i].apply(null, items);
        }
        return result;
    };
    
    return observableArray;
}

window.jentis.shopifyApp.customerPrivacy = window.jentis.shopifyApp.createObservableArray(window.jentis.shopifyApp.customerPrivacy);
window.jentis.shopifyApp.analytics = window.jentis.shopifyApp.createObservableArray(window.jentis.shopifyApp.analytics);

this.customerPrivacy.subscribe('visitorConsentCollected', (event) => {
    window.jentis.shopifyApp.customerPrivacy.push(event);
});

analytics.subscribe('all_events', (event) => {
  window.jentis.shopifyApp.analytics.push(event);
});

window.jentis.shopifyApp.loadJENTISScript = function() {
  (function (sCDN, sCDNProject, sCDNWorkspace, sCDNVers) {
    if (
      window.localStorage !== null &&
      typeof window.localStorage === "object" &&
      typeof window.localStorage.getItem === "function" &&
      window.sessionStorage !== null &&
      typeof window.sessionStorage === "object" &&
      typeof window.sessionStorage.getItem === "function"
    ) {
      sCDNVers =
        window.sessionStorage.getItem("jts_preview_version") ||
        window.localStorage.getItem("jts_preview_version") ||
        sCDNVers;
    }
    window.jentis = window.jentis || {};
    window.jentis.config = window.jentis.config || {};
    window.jentis.config.frontend = window.jentis.config.frontend || {};
    window.jentis.config.frontend.cdnhost =
      sCDN + "/get/" + sCDNWorkspace + "/web/" + sCDNVers + "/";
    window.jentis.config.frontend.vers = sCDNVers;
    window.jentis.config.frontend.env = sCDNWorkspace;
    window.jentis.config.frontend.project = sCDNProject;
    window._jts = window._jts || [];
    var f = document.getElementsByTagName("script")[0];
    var j = document.createElement("script");
    j.async = true;
    j.src = window.jentis.config.frontend.cdnhost + window.jentis.shopifyApp.dcp.filehash + ".js";
    f.parentNode.insertBefore(j, f);
  })("https://" + window.jentis.shopifyApp.dcp.hash + "." + window.jentis.shopifyApp.dcp.domain,window.jentis.shopifyApp.dcp.short,window.jentis.shopifyApp.dcp.environment, "_");
}

window.jentis.shopifyApp.customerPrivacy.addObserver(function (consent) {

    if (consent.customerPrivacy.analyticsProcessingAllowed) {

        browser.cookie.get("jts-rw").then(function (jtsCookieValue) {
            if (jtsCookieValue) {
                var jtsUserId = JSON.parse(decodeURIComponent(jtsCookieValue));
                setupJentisTrackingCode(jtsUserId.u);
            } else {
                waitForCookie("_shopify_y", 10, 200, setupJentisTrackingCode);
            }
        }).catch(function (error) {
           console.error(error);
        });
    } else {

        setupJentisTrackingCode();
    }
});

function setupJentisTrackingCode(cookieValue) {

    if (typeof cookieValue !== 'undefined' && cookieValue) {
        window.jentisApp.userId = cookieValue;
    }
    
    if (
        typeof window.jentis.shopifyApp.isJentisLoaded !== 'undefined' &&
        !window.jentis.shopifyApp.isJentisLoaded
    ){
        window.jentis.shopifyApp.loadJENTISScript();
        window.jentis.shopifyApp.isJentisLoaded = true;
    }
}

function waitForCookie(cookieName, retries, interval, callback) {

    browser.cookie.get(cookieName).then(function (cookieValue) {
        if (cookieValue) {
            callback(cookieValue);
        } else if (retries > 0) {
            setTimeout(function () {
                waitForCookie(cookieName, retries - 1, interval, callback);
            }, interval);
        } else {
            callback(null);
        }
    }).catch(function (error) {
        console.error(error);
    });
}

function setShopifyCookie(cookie){
    if(
        typeof browser !== 'undefined' &&
        typeof browser.cookie !== 'undefined' &&
        typeof browser.cookie.set === 'function'
    ){
        browser.cookie.set(cookie);
    }
}

The following values at the top must be replaced with the values from your container settings:

CODE

// Please adapt the DCP-Configuration to your needs!
window.jentis.shopifyApp.dcp.domain = "intercontinentalgrid.org";
window.jentis.shopifyApp.dcp.hash = "9sc4rl";
window.jentis.shopifyApp.dcp.short = "shopify-teststore-001";
window.jentis.shopifyApp.dcp.filehash = "gbujzl";
window.jentis.shopifyApp.dcp.environment= "live";

You can find your container settings in the JENTIS DCP under Settings > Containers.

Save the custom pixel.

JENTIS DCP: Install the Shopify Plugin

Open your JENTIS DCP and navigate to Server Tag Manager > Plugins.
Click on Add New Plugin.
Select the Shopify Datalayer-Bridge.
Define a good name and connect it to the right container.

JENTIS DCP: Connect the CMP-Bridge

The JENTIS CMP-Bridge serves as a connector that transfers the consent provided by the consent banner on the main website via the Customer Privacy API to the Shopify Sandbox environment. This means you will still need to use your preferred CMP (e.g., Cookiebot) on the Shopify website and extend it with custom code to integrate the Customer Privacy API, as documented by your CMP vendor (e.g., Cookiebot Shopify Installation Guide).

In the JENTIS Shopify CMP-Bridge, you need to configure which vendors are linked to specific Customer Privacy API groups as passed by your original CMP vendor on the page. This ensures proper consent synchronization and adherence to your privacy configuration.

Open your JENTIS DCP and navigate to Legal Hub > Consentbars.
Connect the Shopify CMP-Bridge with the container.
Afterwards, open the corresponding vendors under Legal Hub > Vendors and edit there CMP-Settings.
1. Predefined Vendor Categories are analytics, marketing and preferences.

Tracked Events by the Shopify Plugin:

The Shopify Plugin automatically tracks the following events:

pageview
search
cartview
productlist
productview
addtocart
removefromcart
checkout
order

This comprehensive tracking allows you to gain valuable insights into your Shopify store's performance.

Technical Information

Preview Mode

To run the preview mode, simply copy and paste your debug link from the preview session into the browser and execute it. After the page has loaded, remove all preview link URL parameters and reload the page. The preview is now loaded correctly. If not, please reload the page again once more.

To work with the Custom Events approach, it is essential that the _shopify_y cookie from Shopify is not blocked and is enabled by default. This first-party cookie is crucial for identifying users and managing requests within the Shopify system. All Custom Events rely on this cookie for proper functionality. The JENTIS system uses this ID to generate the user_id and to mitigate ITP restrictions, ensuring accurate tracking and data collection.

How to access the custom_event information?

We have added a property called 'shopify' to all JENTIS DataLayer commands. This property contains the original event information passed from Shopify. If certain information is not provided in the default JENTIS DataLayer, you can access the 'shopify' property to retrieve the necessary details yourself.

Q & A

Q: Can I access the payment method during checkout?

A: No, the payment method can only be accessed during the checkout_completed event.