[EN] Enabling Shopify's Customer Privacy API for Cookiebot

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

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

2. Name the new snippet "cookie-consent" and click Done.

3. 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>

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

5. Below the line {{content_for_header}}, place the following code:

{% render 'cookie-consent' %}

6. Save the theme.liquid file.