Shopify with Checkout Extensibility

Since August 2024, Shopify has implemented Checkout Extensibility, which means that many applications and tracking tools no longer work when the user is in the Payment/Checkout section.

This is also the case for Axeptio: the script is not loaded, our events are not sent, and retrieving consent for integrations with Google Tag Manager has become less straightforward.

Procedure to retrieve Axeptio events

You can use our Shopify app, integrate Axeptio directly via a snippet, or through Google Tag Manager—it’s up to you.

Integrating Axeptio During Checkout

You should have already created a custom pixel in your Shopify store’s customer events to load Google Tag Manager. The problem is that you don’t have Axeptio events like axeptio_update and axeptio_activate_xxx.

Do not create another custom pixel. You need to add the code below to include our events. It must be added to the same pixel because they are sandboxed.

Add this at the top of your existing custom pixel:

window.dataLayer = window.dataLayer || [];
function gtag() {
  dataLayer.push(arguments);
}

function getCookie(name) {
  const value = "; " + document.cookie;
  const parts = value.split("; " + name + "=");
  if (parts.length === 2) return parts.pop().split(";").shift();
}

if (
  window.location.href.includes("/checkout/") ||
  window.location.href.includes("/checkouts/")
) {
  gtag("consent", "default", {
    ad_storage: "denied",
    analytics_storage: "denied",
    ad_user_data: "denied",
    ad_personalization: "denied",
    wait_for_update: 500,
  });
  analytics.subscribe("page_viewed", () => {
    const axeptio_authorized_vendors = decodeURIComponent(getCookie("axeptio_authorized_vendors"));
    const axeptio_cookies = decodeURIComponent(getCookie("axeptio_cookies"));
      dataLayer.push({
        event: "axeptio_update",
        axeptio_authorized_vendors: axeptio_authorized_vendors,
      });
      const acceptedVendors = axeptio_authorized_vendors.split(",");
      acceptedVendors.forEach((vendor) => {
        if (vendor.length >= 1) {
          let event = "axeptio_activate_" + vendor;
          dataLayer.push({ event: event });
        }
      });
      gtag('consent', 'update', {
        ad_storage: axeptio_cookies.includes('"ad_storage":"granted"') ? "granted" : "denied",
        ad_user_data: axeptio_cookies.includes('"ad_user_data":"granted"') ? "granted" : "denied",
        ad_personalization: axeptio_cookies.includes('"ad_personalization":"granted"') ? "granted" : "denied",
        analytics_storage: axeptio_cookies.includes('"analytics_storage":"granted"') ? "granted" : "denied",
      })
  });
}