Você está fazendo o rastreamento via um pixel personalizado na sua loja Shopify?
Pixels personalizados no Shopify são chamados de ambientes “Sandbox”, onde é possível rastrear um conjunto de eventos enviados ao Shopify, por exemplo, para encaminhá-los ao seu contêiner GTM e às suas diferentes ferramentas de análise de tráfego.
Devido à sua natureza “Sandbox”, os pixels personalizados não podem acessar elementos do conteúdo principal do site, como o consentimento do Axeptio. Isso pode ser problemático, especialmente se você aciona suas ferramentas com base em eventos do Axeptio.
Portanto, será necessário encaminhar os eventos do Axeptio para o seu pixel personalizado. Nesta documentação veremos como fazer isso.
Enviando eventos do Axeptio a partir do theme.liquid
É possível enviar eventos do seu site para o sandbox usando os eventos nativos do Shopify e, assim, passar informações do site para o pixel personalizado. É isso que faremos para encaminhar o consentimento do Axeptio.
Primeiro, precisamos enviar este evento. Vá para o arquivo theme.liquid e adicione as seguintes 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, vá para o seu pixel personalizado.
No início dele, adicione o código de recepção do evento :
// CONSENTIMENTO RECEBIDO 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,
});
});
Esse código recriará os sinais normalmente enviados pelo Axeptio e os enviará para o dataLayer do GTM. Ele também recriará os sinais de consentimento exigidos pelo Google Consent Mode v2.
Recriando eventos do Axeptio no checkout
Desde agosto de 2024, com a migração para o novo checkout do Shopify, ele não é mais baseado no theme.liquid, e a única forma de adicionar código é através dos pixels personalizados.
Como resultado, o Axeptio não pode ser carregado no checkout e, portanto, não enviará seus eventos.
Para poder acessar o consentimento do Axeptio e encaminhá-lo para suas ferramentas de rastreamento, precisamos recriar as informações de consentimento a partir dos cookies do Axeptio que as armazenam.
Para isso, adicione este código no seu pixel personalizado, ainda no início:
// REGENERAÇÃO DO CONSENTIMENTO NO 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ê estiver usando apenas o pixel personalizado para o seu rastreamento, seja no site principal ou no checkout, é possível combinar os dois trechos de código para garantir um rastreamento adequado em todo o site.
Exemplo completo (incluindo o carregamento do GTM):
// CARREGAMENTO DO 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,
});
// RECEBIMENTO DE CONSENTIMENTO 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,
});
});
// REGENERAÇÃO DO CONSENTIMENTO NO 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",
});
});
}