Enable the Shopify Customer Privacy API for Cookiebot

For these steps, follow the instructions from the Cookiebot helpdesk: Enabling the Customer Privacy API. Below, the steps are also explained in Dutch.

Open your Shopify theme code. Under ‘Snippets’, add a new snippet



Name the new snippet “cookie-consent” and click ‘Done’.



Open the empty cookie-consent.liquid file and add the following content:

<script>

function feedback() {
  const p = window.Shopify.customerPrivacy;
  console.log(`Tracking ${p.userCanBeTracked() ? "en" : "dis"}abled`);
}
window.Shopify.loadFeatures(
  [
    {
      name: "consent-tracking-api",
      version: "0.1",
    },
  ],
  function (error) {
    if (error) throw error;
    if ("Cookiebot" in window)
      window.Shopify.customerPrivacy.setTrackingConsent({
        "analytics": false,
        "marketing": false,
        "preferences": false,
        "sale_of_data": false,
      }, () => console.log("Awaiting consent")
    );
  }
);

window.addEventListener("CookiebotOnConsentReady", function () {
  const C = Cookiebot.consent,
      existConsentShopify = setInterval(function () {
        if (window.Shopify.customerPrivacy) {
          clearInterval(existConsentShopify);
          window.Shopify.customerPrivacy.setTrackingConsent({
            "analytics": C["statistics"],
            "marketing": C["marketing"],
            "preferences": C["preferences"],
            "sale_of_data": C["marketing"],
          }, () => console.log("Consent captured"))
        }
      }, 100);
});
</script>

Save this snippet and then go to the theme.liquid file in your Shopify theme code.

Below the line “ {{ content_for_header }} “ place the following code:

{% render 'cookie-consent' %}

Save the theme.liquid file.

Updated on: 15/08/2024