Are you tracking through a custom pixel in your Shopify store?
Custom pixels in Shopify are so-called "Sandbox" environments, in which you can track a set of events sent to Shopify, for example to send them to your GTM container and your various traffic analysis tools.
Due to their "Sandbox" nature, custom pixels cannot access elements from the main content of the site, such as Axeptio consent. This can be problematic, especially if you trigger your tools based on Axeptio events.
Therefore, you will need to send Axeptio events to your custom pixel. We will see in this documentation how to do this.
Send 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 transmit Axeptio consent.
First, we need to send this event. Go to your theme.liquid file, and add these few 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>
Next, go to your custom pixel.
At the beginning of it, add the code for receiving the event:
// RECEPTION DU CONSENTEMENT VIA LE 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 send them to the GTM dataLayer. It will also recreate the consent signals specific to Google Consent Mode v2.
Recreate Axeptio events on your checkout
Since August 2024 and the switch to Shopify's new checkout, the latter 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 transmit it to your tracking tools, we will need to recreate the consent information from the Axeptio cookies storing the consent.
To do this, add this code to your custom pixel, always at the beginning:
// REGENERATION DU CONSENTEMENT DANS LE 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 using only the custom pixel for your tracking, whether for the main site or for the checkout, you can combine these two codes to ensure proper tracking across the entire site.
Here is a complete example, with the GTM loading code included:
// CHARGEMENT GTM //
(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,
});
// RECEPTION DU CONSENTEMENT 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,
});
});
// REGENERATION DU CONSENTEMENT DANS LE 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",
});
});
}