Mise à jour de juin 2024 : Vous pouvez maintenant utiliser GTM dans l’environnement isolé de Customer Events. Vous pouvez même faire fonctionner le mode Preview de GTM si vous utilisez un conteneur serveur GTM de première partie. La méthode ci-dessous fonctionne toujours, mais elle est peut-être moins utile qu’avant.

Je suis un vrai maniaque d’analytique. C’est probablement ce que j’aime faire le plus! Vous pouvez donc imaginer mon enthousiasme lorsque Shopify a annoncé Customer Events. Enfin! me suis-je dit. Fini le DOM scraping et les solutions bricolées dans les modèles, qu’il faut ajuster pour chaque thème. Je vais pouvoir créer un script pour les gouverner tous, me suis-je dit.

Fébrile, je suis allé sur la page de Customer Events, j’ai ajouté un script GTM à l’événement all_events pour faire un test, j’ai tout branché avec enthousiasme et… rien. Absolument rien ne se déclenchait. Assez déçu, je me suis plongé un peu plus profondément dans la documentation. Ah, ai-je découvert, ces merveilleux événements sont exécutés dans un environnement isolé. Pas de victoire facile cette fois.

Comme je ne suis pas du genre à abandonner, je me suis enfoncé dans ce terrier et j’ai essayé un million de manières de libérer ces précieux événements de leur cage, chacune plus bricolée que la précédente. Puis je suis tombé sur le Saint-Graal : postMessage. Cette fonction est conçue précisément pour permettre la communication entre des fenêtres, notamment avec des iframe isolées.

Bien que cette méthode ne soit pas officiellement prise en charge par Shopify, elle utilise une fonction bien documentée du navigateur. L’implémentation ci-dessous a été testée en juin 2024, mais elle doit tout de même valider l’origine et le contenu du message avant d’utiliser les données.

Ajoutez ceci dans theme.liquid et dans les scripts supplémentaires de la page de paiement. Remplacez la valeur temporaire par l’origine exacte du pixel observée dans votre environnement. Si l’environnement isolé indique que son origine est null, n’utilisez pas cette méthode comme canal de confiance.

<script>
  const allowedPixelOrigins = new Set(["https://REPLACE-WITH-THE-EXACT-PIXEL-ORIGIN", ]);

  window.addEventListener("message", (event) => {
      if (!allowedPixelOrigins.has(event.origin)) return;
      const message = event.data;
      if (!message || typeof message !== "object" || message.message !== "shopify_pixel_event" || typeof message.event_name !== "string" || typeof message.json !== "string") {
          return;
      }
      let json_data;
      try {
          json_data = JSON.parse(message.json);
      } catch {
          return;
      }
      if (!json_data || typeof json_data !== "object" || Array.isArray(json_data)) {
          return;
      }

      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
          event: message.event_name,
          data: json_data,
      });
  });
</script>

Puis créez un pixel personnalisé avec ceci :

analytics.subscribe("all_events", async (event) => {
    parent.postMessage({
        'message': 'shopify_pixel_event',
        'event_name': event.name,
        'json': JSON.stringify(event.data)
    }, event.context.document.location.origin)
});

Toutes les données de chacun des événements client seront alors transmises sous forme de chaîne JSON. Cela déclenchera un dataLayer.push dans la fenêtre principale, que vous pourrez ensuite utiliser comme bon vous semble. Vous pourrez créer des événements personnalisés à partir des noms de Customer Events, analyser les données qui en proviennent, etc.

Il s’agit du code de base, à adapter selon vos besoins. Par exemple, vous devrez peut-être structurer les données selon le schéma de GA4. Vous pourriez alors le faire directement dans le bloc de code de Customer Events afin d’envoyer un objet JSON propre à récupérer dans la fenêtre principale. Vous pourriez aussi conserver l’objet « brut » provenant de Customer Events et l’organiser dans la fenêtre principale avec GTM. À vous de choisir!