Integrating OneTrust with Shopify

OneTrust's CookiePro product provides a way to manage users' cookie preferences, and ensure GDPR cookie compliance.

Littledata has written a script to integrate OneTrust with Shopify's Customer Privacy API. This makes OneTrust compatible with Shopify's own tracking, and with Littledata's enhanced tracking scripts.

How to add use the script

1. Change your Shopify store settings so that your store waits for the user to grant consent before tracking.
2. Install OneTrust CookiePro as usual
3. Add this code snippet to the Shopify theme layout file. This script listens to changes in OneTrust and passes those on the Shopify's API.

<!-- OneTrust to Shopify Customer Privacy API integration by Littledata -->
<script src="https://d26ky332zktp97.cloudfront.net/oneTrust.js"/>

4. Install Littledata's Shopify to Google Analytics or Shopify to Segment connection. If you previously had Littledata installed, ensure that User Tracking Consent is enabled in the data pipeline settings.
5. Turn off Auto Blocking of Google Analytics in OneTrust (see below).

What does this script do?

After the OneTrust script loads, this script registers a callback function to be triggered when the user updates their cookie consent preferences.

When that update happens, if the user has consented to 'Cookies for performance' (tracked as category C0002 in OneTrust's consent preferences), the userCanBeTracked() field is set to true and Shopify and Littledata's tracking then starts. This will also work with any other apps which integrate with Shopify's Customer Privacy API.

If the user later revokes consent to Cookies for performance , then userCanBeTracked() is set to false.

Similarly, if the user has consented to cookies for Targeting (tracked as category C0004), the thirdPartyMarketingAllowed() is set to true and marketing destinations such as Facebook Ads are enabled.

Here's an example of OneTrust setup with Age UK.

When the user clicks "Accept all Cookies", then userCanBeTracked() is set to true.

Then, if the user opts out of "Cookies for performance," the tracking stops.

Why not use auto-blocking?

OneTrust also offers the ability to auto-block common tracking scripts, such as Google Analytics, based on categorizing the third party scripts as peformance, marketing etc.

The advantages of using Littledata's script over auto-blocking are:

1. OneTrust will work seamlessly with any other apps working with Shopify's customer privacy API - so it plays nicely with Shopify's app ecosystem.
2. The user will be tracked immediately after the user has consented, rather than on the subsequent page load (which would cause vital campaign data to be lost).
3. Consent Mode and other granular tracking details can be used with Google Analytics

Full source code

import { CustomWindow } from '../../index.d';

declare let window: CustomWindow;

// Performance cookies ID C0002: get information about how site visitors are using the website (example: Google analytics)
const performanceCookieCategory = 'C0002';
// Targeting cookies ID C0004: cookies that attempt to gather more information about a user in order to personalize marketing (example: remarketing)
const targetingCookieCategory = 'C0004';
const checkEveryMilliseconds = 100;
const maximumTimesChecked = 100;

export const waitForOneTrust = (): void => {
    hasOneTrustLoaded();

    let attempts = 0;
    const interval = setInterval(function () {
        if (hasOneTrustLoaded() || attempts > maximumTimesChecked) clearInterval(interval);
        attempts++;
    }, checkEveryMilliseconds);
};

const hasOneTrustLoaded = (): boolean => {
    if (typeof window.OnetrustActiveGroups === 'string' && window.Shopify?.customerPrivacy) {
        // check now
        optanonWrapper();
        // and wrap and trigger after cookie opt-in
        window.OptanonWrapper = optanonWrapper;

        return true;
    }

    return false;
};

const optanonWrapper = () => {
    // https://shopify.dev/docs/api/consent-tracking#collect-and-register-consent
    const { OnetrustActiveGroups, Shopify } = window;
    const trackingConsent = {
        analytics: !!OnetrustActiveGroups.includes(performanceCookieCategory),
        marketing: !!OnetrustActiveGroups.includes(targetingCookieCategory),
    };

    Shopify.customerPrivacy.setTrackingConsent(trackingConsent, () => {
        // no callback needed
    });
};

(function () {
    waitForOneTrust();
})();