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.

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. Determine how the banner deploys on your storefront

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.

Other Deployment Options?

Don't use Google Tag Manager with your Shopify store? Contact support@datagrail.io to explore other deployment options.

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: cookiePreferences.find((item) => item.gtm_key === "dg-category-analytics-cookies")?.isEnabled,
            marketing: cookiePreferences.find((item) => item.gtm_key === "dg-category-marketing-cookies")?.isEnabled,
            sale_of_data: cookiePreferences.find((item) => item.gtm_key === "dg-category-marketing-cookies")?.isEnabled,
          },
          (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:

> window.DG_BANNER_API.getConsentPreferences()

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

...

> window.Shopify.customerPrivacy.currentVisitorConsent();

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