• Pas de gestion du consentement utilisateur

• Impossible de modifier les événements

• Uniquement pour les produits Google

• Pas de possibilité d’optimiser l’envoi à un transporteur server side

Checkout.liquid is being deprecated

Shopify Plus merchants can now customize their in-checkout pages, which include their Information, Shipping, and Payment Pages, using checkout extensibility. This replaces the need for checkout.liquid. As a result, checkout.liquid will no longer work for in-checkout pages starting August 13, 2024. S...

https://community.shopify.com/c/announcements/checkout-liquid-is-being-deprecated/m-p/1943825

• Modifier votre thème pour ajouter vos appels GTM et vos événements ecommerce et tout événement custom directement dans vos fichiers liquid (ou vos assets js qui seront appelés dans vos vues pour les puristes)

• Créer un “pixel” dans settings > customer events pour la partie checkout. Ce pixel communiquera avec l’API analytics de Shopify pour récupérer l’ensemble des informations. Voici à quoi ressemble le code Dans ce cas précis, on déclenche toutes les informations d’un produit lors de la vue d’un produit

javascript
analytics.subscribe("product_viewed", async (event) => {
  dataLayer.push({
		  {
      event: "view_item",
      ecommerce: {
        currency: event.data.productVariant.price.currencyCode,
        value: event.data.productVariant.price.amount,
        items:[
          {
            item_id: event.data.productVariant.product.id,
            item_variant: event.data.productVariant.sku,
            item_name: event.data.productVariant.product.title,
            price: event.data.productVariant.price.amount,
            item_category: event.data.productVariant.product.type
          }
        ]
      }
    }
  });

• Le code est sandboxé, vous ne verrez pas vos push dataLayer facilement

• La preview GTM ne fonctionnera pas (toujours à cause de l’environnement sandboxé)

• Vous pouvez utiliser la fonction “Test” du customer event pour voir les informations envoyés mais celle-ci n’est pas dédié au tracking

• Par défaut, l’url envoyé sera celle de la sandbox, ce qui polluera vos rapports

• Vous pouvez créer un compte de démo gratuitement en choisissant de laisser votre Shopify “en développement”pour vous permettre de faire vos tests

• Le bouton pour sauvegarder votre code du pixel customer events se trouve en haut. Ce n’est pas le gros bouton rouge en bas de page (toute ressemblance avec un fait réél serait purement fortuite)

• Pour accéder au push dataLayer de votre pixel, vous allez devoir accéder à l’iframe dans lequel celui-ci est chargé. Dans votre console il faudra cliquer sur “top” puis aller chercher la ligne “web-pixel-sandbox-CUSTOM-*” * étant votre ID de pixel, que vous pourrez trouver facilement dans le back office dans l’url de l’édition de votre pixel

• L’autre solution pour voir ce que retourne votre outil est le bouton “test”. Il ne vous donnera pas directement le push dataLayer mais permettra de voir ce qui est disponible dans l’événement (et vous verrez que la plupart du temps, les bugs des lignes user viennent du fait que les gens ne sont pas connectés)

• Par défaut, les pixels de Shopify font un check à l’API de consentement de Shopify. Si vous souhaitez envoyer GTM par défaut et gérer la partie consentement directement dans GTM (pour consent mode v2 par exemple) il faudra penser à désactiver cette fonction en sélectionnant “not required”.

• Pour vérifier si l’API de consentement de Shopify est activé, vous pouvez interroger cette fonction dans la console. Si cette fonction vous renvoie une erreur, votre CMP ne communique pas avec le système interne de Shopify. window.Shopify.customerPrivacy.getTrackingConsent()

• Dans les dataLayer push de vos pixel, par défaut vous aurez l’url de l’iframe. Pour avoir la “bonne” URL du site telle que vous la voyez il faudra ajouter la variable url: event.context.document.location.href

• Il est possible de récupérer les informations utilisateurs (nouveaux/anciens clients et nombres de commandes) via ces lignes de code :
userData.lifetime_orders = window.initContext?.data?.customer?.ordersCount ? window.initContext.data.customer.ordersCount : 0; userData.new_customer = window.initContext?.data?.customer?.ordersCount ? false : true;
⚠️
Cela fonctionne uniquement pour les utilisateurs loggués, sans être loggué dans le shop en amont, votre client sera toujours un “nouveau client” avec 0 commandes à son actif.

➡️

Vincent Lahaye :

Lead de l’équipe Analytics & Tracking chez UnNest, en charge de l’expertise autour de Piano Analytics et de la gestion des implémentations clients.

Précédemment responsable tracking et web analyse chez Ouest France et 20 Minutes, Vincent travaille sur les sujets de data, d’acquisition et de tracking depuis plus de 15 ans, avec une connaissance toute particulière du secteur des médias.

✉️ Contact : vincent.lahaye@unnest.co

↗️ Me suivre sur LinkedIn

Références : CMI média, Mapa Assurance, Sorégies, Nutrimuscle

Certifications et outils: Piano Analytics, GA4,

Spécialité : Médias