Voert u uw tracking uit via een aangepaste pixel in uw Shopify-winkel?
Aangepaste pixels in Shopify zijn zogenaamde "Sandbox"-omgevingen, waarin u een reeks gebeurtenissen kunt volgen die naar Shopify worden verzonden, bijvoorbeeld om deze naar uw GTM-container en uw verschillende tools voor verkeersanalyse te sturen.
Vanwege hun "Sandbox"-aard hebben aangepaste pixels geen toegang tot elementen van de hoofdinhoud van de site, zoals bijvoorbeeld Axeptio-toestemming. Dit kan problematisch zijn, vooral als u uw tools activeert op Axeptio-gebeurtenissen.
Daarom moet u de Axeptio-gebeurtenissen naar uw aangepaste pixel verzenden. We zullen in deze documentatie zien hoe.
Axeptio-gebeurtenissen van theme.liquid verzenden
Het is mogelijk om gebeurtenissen van uw site naar de sandbox te verzenden met behulp van de native Shopify-gebeurtenissen, en dus informatie van de site naar de aangepaste pixel door te geven. Dit is wat we gaan doen om de Axeptio-toestemming door te geven.
Eerst moeten we deze gebeurtenis verzenden. Ga naar uw theme.liquid-bestand en voeg aan het einde van de body-tag deze paar regels code toe:
<script> window._axcb = window._axcb || []; window._axcb.push(function(sdk){ sdk.on('cookies:complete', function(choices){ Shopify.analytics.publish('cookies:complete', {axeptioConsent: choices}); });}); </script>
Ga vervolgens naar uw aangepaste pixel.
Voeg aan het begin daarvan de code voor ontvangst van de gebeurtenis toe:
// ONTVANGST VAN TOESTEMMING 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, }); });
Deze code zal de signalen die normaal door Axeptio worden verzonden opnieuw maken en deze in de GTM dataLayer plaatsen. Het zal ook de toestemmingssignalen van Google Consent Mode v2 opnieuw maken.
Maak de Axeptio-gebeurtenissen opnieuw in uw checkout
Sinds augustus 2024 en de overstap naar de nieuwe Shopify-checkout, is deze niet langer gebaseerd op theme.liquid, en de enige manier om code toe te voegen is via aangepaste pixels.
Daarom kan Axeptio niet op de checkout worden geladen en zal het daarom geen gebeurtenissen verzenden.
Om toegang te krijgen tot Axeptio-toestemming en deze door te geven aan uw trackingtools, moeten we de toestemmingsinformatie opnieuw maken op basis van de Axeptio-cookies die de toestemming opslaan.
Voeg hiervoor deze code altijd aan het begin toe aan uw aangepaste pixel:
// REGENERATIE VAN TOESTEMMING IN DE 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", }); }); }
Als u alleen via de aangepaste pixel voor uw tracking gaat, of het nu voor de hoofdsite of voor de checkout is, kunt u deze twee codes combineren om correct functioneren van tracking op de hele site te garanderen.
Hier is een volledig voorbeeld, met de GTM-laadcode inbegrepen:
// GTM LADEN //(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,});// ONTVANGST VAN TOESTEMMING 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, });});// REGENERATIE VAN TOESTEMMING IN DE 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", }); });}