Effectuez-vous votre suivi via un pixel personnalisé dans votre boutique Shopify ?
Les pixels personnalisés dans Shopify sont des environnements dits « Sandbox », dans lesquels vous pouvez suivre un ensemble d'événements envoyés à Shopify, pour par exemple les envoyer à votre conteneur GTM et vos différents outils d'analyse de trafic.
De par leur nature « Sandbox », les pixels personnalisés ne peuvent pas accéder aux éléments du contenu principal du site, comme par exemple le consentement Axeptio. Ceci peut s'avérer problématique, notamment si vous déclenchez vos outils sur les événements Axeptio.
Par conséquent, il vous faudra transmettre les événements Axeptio vers votre pixel personnalisé. Nous verrons dans cette documentation comment.
Envoyer les événements Axeptio depuis le theme.liquid
Il est possible d'envoyer des événements depuis votre site vers la sandbox en utilisant les événements natifs de Shopify, et ainsi faire passer des informations du site au pixel personnalisé. C'est ce que nous allons faire pour transmettre le consentement Axeptio.
Tout d'abord, il va nous falloir envoyer cet événement. Rendez-vous dans votre fichier theme.liquid, et rajoutez ces quelques lignes de code à la fin de la balise 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>
Ensuite, rendez-vous dans votre pixel personnalisé.
Au début de celui-ci, rajoutez le code de réception de l'événement :
// 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,
});
});
Ce code va recréer les signaux normalement envoyés par Axeptio, et les envoyer dans le dataLayer de GTM. Il va également recréer les signaux de consentement propres au Google Consent Mode v2.
Recréer les événements Axeptio sur votre page de paiement
Depuis août 2024 et le basculement sur le nouveau checkout de Shopify, ce dernier n'est plus basé sur le theme.liquid, et la seule méthode de rajouter du code se fait via les pixels personnalisés.
Par conséquent, Axeptio ne peut pas être chargé sur la page de paiement, et n'enverra donc pas ses événements.
Pour pouvoir accéder au consentement Axeptio et le transmettre à vos outils de suivi, il va nous falloir recréer les informations de consentement à partir des cookies Axeptio stockant le consentement.
Pour cela, rajoutez ce code dans votre pixel personnalisé, toujours au début :
// 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",
});
});
}
Si vous passez uniquement par le pixel personnalisé pour votre suivi, que ce soit pour le site principal ou pour la page de paiement, vous pouvez combiner ces deux codes afin d'assurer le bon fonctionnement du suivi sur tout le site.
Voici un exemple complet, avec le code de chargement de GTM inclus :
// 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",
});
});
}