Shopify

You can integrate DataGrail Consent with Shopify with developer support and updates to your store's configuration. This guide will walk you through that process and show you how you can verify everything is set up.

How DataGrail Consent Works With Shopify

DataGrail Consent interacts with the Shopify Privacy API, which passes on consent preferences in a format that pixels, audiences and checkout functionality must respect per Shopify's terms of service.

When a data subject makes a Consent choice, we emit preferences in the browser which can then be translated using a snippet of code to set the consent tracking settings per the API docs above.

It is up to the pixel vendors to respect and honor these tracking settings. While DataGrail can work with you to confirm that we are both accepting and passing preferences to Shopify correctly, we cannot reliably troubleshoot if pixels are behaving in a way that respects consent choices.

For example, many app vendors may continue to run in an anonymous mode, and continue to send network requests and leave cookies, even though the preference was sent to the pixel correctly. Shopify notes the following in their documentation:

Code snippets can be used to bypass customer consent requirements, which violates the Shopify Terms of Service and can lead to legal liability for you. ... Remember that you are responsible for complying with applicable laws and getting all necessary consents when you use pixels to collect customer data.

Configure Store to Display DataGrail Consent

There are two tasks you need to do on the Shopify side to render DataGrail's Consent banner on your storefront:

1. Enable regional specific privacy settings.
2. Deploy DataGrail Consent.
3. Pass a data subject's consent choices to Shopify.

Enable Regional Specific Privacy Settings

After you log in to Shopify, select Settings. Then navigate to Customer privacy and select Cookie Banner.

Here, you can select the option to set custom banner regions, which offers you the ability to select the countries that you are letting Shopify know you wish to have managed consent. Since DataGrail works with a wide variety of countries and geographies, we recommend selecting every region available. This ensures that DataGrail controls the policies and behavior of consent through the DataGrail application, rather than a potential issue with Shopify's own built-in Consent options.

Once you have saved your changes, you will then remove the cookie banner from being visible. This disables Shopify's built-in banner, but you still have the countries you select which inform Shopify to "await Consent" before proceeding with tracking.

Deploy DataGrail Consent to Storefront

Now that Shopify understands it needs to await a Consent preference before proceeding, you need to configure DataGrail Consent to deploy to the storefront.

If you have Google Tag Manager installed on your storefront, you can follow the steps here to connect the container within your storefront to DataGrail. Then, you simply publish DataGrail Consent to this container and the banner will appear and have geo-specific settings enabled.

Embedded Deployment

If you don't have Google Tag Manager installed, you can use our Embedded Deployment capability to manually add the script to your Shopify storefront.

Manage Shopify Consent Settings

With the banner deployed and ready to accept a consent choice, you now need to send this consent choice to Shopify so that it handles the behavior of pixels within Shopify. This is required if you are using built in tracking pixels from Facebook, TikTok, and other vendors with deep integrations into the product.

When a user makes a Consent choice with DataGrail, the preferences are saved and available as a callback function, which you can use as the basis for writing code to map DataGrail consent preference options to Shopify's tracking options. The code should call the setTrackingConsent API method with the mapped result. Here's an example:

<script>
  window.dgEvent = window.dgEvent || [];
  function sync_receive_prefs(dgEventData) {
    const cookiePreferences = dgEventData?.consentPreferences?.cookieOptions;

    window.Shopify.loadFeatures(
      [
        {
          name: "consent-tracking-api",
          version: "0.1",
        },
      ],
      (error) => {
        if (error) {
          console.error("Error loading Shopify Customer API", error);
        }
        window.Shopify.customerPrivacy.setTrackingConsent(
          {
            preferences: true,
            analytics: window.DG_BANNER_API.categoryEnabled('performance'),
            marketing: window.DG_BANNER_API.categoryEnabled('marketing'),
            sale_of_data: window.DG_BANNER_API.categoryEnabled('marketing'),
          },
          (arg) => console.log("Consent captured", arg)
        );
      }
    );
  }

  window.dgEvent.push({
    event: "preference_callback",
    params: sync_receive_prefs,
  });
</script>

This code saves the consent preferences provided by a user, which is then mapped to the Shopify tracking consent preferences using the above API method.

Verify Shopify Consent Preferences

If you've configured everything correctly, you can verify that the Shopify preferences match the ones provided to DataGrail using the following browser console commands:

1. Confirm the values that have been set by DataGrail Consent, based on the Data Subject's policy settings or their explicit choices via the banner displayed.

window.DG_BANNER_API.getConsentPreferences()

{isCustomised: true, cookieOptions: Array(3)}
  cookieOptions: Array(3)
    0: {gtm_key: 'dg-category-performance', isEnabled: true}
    1: {gtm_key: 'dg-category-essential', isEnabled: true}
    2: {gtm_key: 'dg-category-marketing', isEnabled: false}
  length: 3

...

2. Confirm the value set for the Data Subject's consent preferences within Shopify. You can see the a false value for the dg-category-marketing or "Marketing" purpose has appropriately set the value for marketing and sale_of_data as no.

window.Shopify.customerPrivacy.currentVisitorConsent();

{marketing: 'no', analytics: 'yes', preferences: 'yes', sale_of_data: 'no'}