Are you doing your tracking via a custom pixel in your Shopify store?
Custom pixels in Shopify are what are called “Sandbox” environments, where you can track a set of events sent to Shopify, for example to forward them to your GTM container and your different traffic analysis tools.
Because of their “Sandbox” nature, custom pixels cannot access elements of the main site content, such as Axeptio consent. This can be problematic, especially if you trigger your tools based on Axeptio events.
Therefore, you will need to forward Axeptio events to your custom pixel. We will see in this documentation how to do that.
Sending Axeptio events from theme.liquid
It is possible to send events from your site to the sandbox using Shopify’s native events, and thus pass information from the site to the custom pixel. This is what we will do to forward Axeptio consent.
First, we need to send this event. Go to your theme.liquid file and add the following lines of code at the end of the body tag:
<script>
window._axcb = window._axcb || [];
window._axcb.push(function(sdk) {
sdk.on('cookies:complete', function(choices) {
Shopify.analytics.publish('cookies:complete', {
axeptioConsent: choices
});
});
});
</script>
Then, go to your custom pixel.
At the beginning of it, add the event reception code:
// CONSENT RECEPTION VIA THEME.LIQUID //
window.dataLayer = window.dataLayer || [];
window.analytics = window.analytics;
function gtag() {
dataLayer.push(arguments);
}
gtag("consent", "default", {
ad_storage: "denied",
analytics_storage: "denied",
ad_user_data: "denied",
ad_personalization: "denied",
wait_for_update: 500,
});
analytics.subscribe("cookies:complete", function (data) {
let axeptioConsent = data.customData.axeptioConsent;
let axeptioChoices = [];
for (let entry in axeptioConsent) {
if (entry.indexOf("$") === -1 && axeptioConsent[entry]) {
dataLayer.push({ event: `axeptio_activate_${entry}` });
axeptioChoices.push(entry);
}
}
dataLayer.push({ event: "axeptio_update", axeptio_authorized_vendors: axeptioChoices, });
gtag("consent", "update", {
ad_storage: axeptioConsent.$$googleConsentMode.ad_storage,
ad_user_data: axeptioConsent.$$googleConsentMode.ad_user_data,
ad_personalization: axeptioConsent.$$googleConsentMode.ad_personalization,
analytics_storage: axeptioConsent.$$googleConsentMode.analytics_storage,
});
});
This code will recreate the signals normally sent by Axeptio and push them into GTM’s dataLayer. It will also recreate the consent signals required for Google Consent Mode v2.
Recreating Axeptio events in your checkout
Since August 2024 and the migration to Shopify’s new checkout, it is no longer based on theme.liquid, and the only way to add code is through custom pixels.
As a result, Axeptio cannot be loaded on the checkout and will therefore not send its events.
To be able to access Axeptio consent and forward it to your tracking tools, we need to recreate the consent information from the Axeptio cookies that store it.
To do so, add this code in your custom pixel, still at the beginning:
// CONSENT REGENERATION IN CHECKOUT //
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/") ) {
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",
});
});
}
If you are only using the custom pixel for your tracking, whether on the main site or on the checkout, you can combine both pieces of code to ensure proper tracking across the entire site.
Complete Example (including GTM loading code) :
// GTM LOADING //
(function (w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != "dataLayer" ? "&l=" + l : ""; j.async = true; j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl; f.parentNode.insertBefore(j, f); })(window, document, "script", "dataLayer", "GTM-XXXXXXXX");
window.dataLayer = window.dataLayer || [];
window.analytics = window.analytics; function gtag() {
dataLayer.push(arguments);
}
gtag("consent", "default", {
ad_storage: "denied",
analytics_storage: "denied",
ad_user_data: "denied",
ad_personalization: "denied",
wait_for_update: 500,
});
// CONSENT RECEPTION VIA THEME.LIQUID //
analytics.subscribe("cookies:complete", function (data) {
let axeptioConsent = data.customData.axeptioConsent;
let axeptioChoices = [];
for (let entry in axeptioConsent) {
if (entry.indexOf("$") === -1 && axeptioConsent[entry]) {
dataLayer.push({ event: `axeptio_activate_${entry}` });
axeptioChoices.push(entry);
}
}
dataLayer.push({ event: "axeptio_update", axeptio_authorized_vendors: axeptioChoices, });
gtag("consent", "update", {
ad_storage: axeptioConsent.$$googleConsentMode.ad_storage,
ad_user_data: axeptioConsent.$$googleConsentMode.ad_user_data,
ad_personalization: axeptioConsent.$$googleConsentMode.ad_personalization,
analytics_storage: axeptioConsent.$$googleConsentMode.analytics_storage,
});
});
// CONSENT REGENERATION IN CHECKOUT //
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/") ) {
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",
});
});
}