Você realiza seu rastreamento por meio de um pixel personalizado em sua loja Shopify?
Os pixels personalizados no Shopify são ambientes chamados "Sandbox", nos quais você pode rastrear um conjunto de eventos enviados ao Shopify, para, por exemplo, enviá-los ao seu contêiner GTM e suas diferentes ferramentas de análise de tráfego.
Pela sua natureza "Sandbox", os pixels personalizados não podem acessar elementos do conteúdo principal do site, como por exemplo o consentimento Axeptio. Isso pode se mostrar problemático, principalmente se você ativar suas ferramentas nos eventos Axeptio.
Consequentemente, você precisará transmitir os eventos Axeptio para seu pixel personalizado. Veremos nesta documentação como fazer isso.
Enviar os eventos Axeptio a partir do theme.liquid
É possível enviar eventos de seu site para a sandbox usando os eventos nativos do Shopify, e assim passar informações do site para o pixel personalizado. É isso que faremos para transmitir o consentimento Axeptio.
Primeiro, precisamos enviar esse evento. Acesse seu arquivo theme.liquid e adicione essas linhas de código no final da tag body:
<script>
window._axcb = window._axcb || [];
window._axcb.push(function(sdk){
sdk.on('cookies:complete', function(choices){
Shopify.analytics.publish('cookies:complete', {
axeptioConsent: choices
});
});
});
</script>
Em seguida, acesse seu pixel personalizado.
No início dele, adicione o código de recepção do evento:
// 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,
});
});
Esse código recriará os sinais normalmente enviados pelo Axeptio e os enviará para o dataLayer do GTM. Também recriará os sinais de consentimento do Google Consent Mode v2.
Recriar os eventos Axeptio em seu checkout
Desde agosto de 2024 e a mudança para o novo checkout do Shopify, este não é mais baseado no theme.liquid, e o único método para adicionar código é através dos pixels personalizados.
Consequentemente, o Axeptio não pode ser carregado no checkout e não enviará seus eventos.
Para poder acessar o consentimento Axeptio e transmiti-lo às suas ferramentas de rastreamento, precisamos recriar as informações de consentimento a partir dos cookies Axeptio que armazenam o consentimento.
Para isso, adicione este código em seu pixel personalizado, ainda no início:
// 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",
});
});
}
Se você usar apenas o pixel personalizado para seu rastreamento, seja para o site principal ou para o checkout, você pode combinar esses dois códigos para garantir o bom funcionamento do rastreamento em todo o site.
Aqui está um exemplo completo, com o código de carregamento do GTM incluído:
// 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",
});
});
}