Après WordPress / WooCommerce et PrestaShop nous allons maintenant voir comment configurer un suivi e-commerce GA4 pour un site site Shopify. Ce CMS est en effet devenu en quelques années, entre partie avec l’explosion du dropshipping, l’une des solution de gestion de site marchand les plus populaire du monde.
Son fonctionnement est par contre très différents des précédents puisqu’il s’agit d’une solution en SaaS ce qui fait que vous n’avez pas à l’installer vous même sur un serveur par exemple et qu’elle est fournie avec un ensemble de solutions pre packagées qu’il est plus difficile de modifier ou personnaliser. Il n’est pas possible non plus de s’y connecter avec un logiciel FTP pour déposer des fichiers sur son hébergement. Mais en contrepartie de ces contraintes vous avez la garantie d’un système très stable et toujours tenu à jour par Shopify lui même.
En terme de tracking ces différences vont faire que la configuration sera plus éloignée de celle des autres CMS mais elle reste tout à fait réalisable et performante.
Utiliser l’intégration « native » de GA4 avec Shopify ?
Le but du jeu des plateformes SaaS de ce type étant de fournir à ses utilisateurs un maximum de solutions préconfigurées clé en main il existe dans Shopify une intégration « native » de GA4 que vous pouvez retrouver dans les « Sales channels > Google & Youtube ». En y connectant votre compte Google et en sélectionnant votre propriété GA4 vous aurez un quelques clics une solution globalement opérationnelle.
Évidemment cette solution est séduisante car elle permet de faire les choses très facilement mais elle présente quand même quelques inconvénients :
- Vous ne maitrisez pas les conditions de déclenchement de GA4 ce qui est un souci vis à vis du consentement des utilisateurs
- Vous n’intégrez que GA4 et par GTM ce qui est très limitant si vous souhaitez installer aussi une autre solution analytics, faire du server side ou poser des tags marketing complémentaires
- Vous ne choisissez pas ce qui est envoyé ce qui fait par exemple qu’il manque l’événement view_item_list
Pour toutes ces raisons je vous conseille de privilégier une solution custom plus avancée qui va consister d’abord à placer Google Tag Manager sur le site, à lui fournir les données nécessaires dans le Data Layer et ensuite à y configurer les tags que nous souhaitons.
Solution pre-2024 : modifier les fichiers du template pour intégrer GTM
Jusqu’à des changements internes à Shopify en 2024 la solution consistait essentiellement à ajouter du code pour GTM aux fichier du template de votre site. Je vous le détaille brièvement ci-dessous pour que vous puissiez éventuellement supprimer ces modifications si vous les aviez faites.
Ajout de deux fichiers dans les snippets du template
Dans la plupart des cas les éditeurs de site ajoutaient deux snippets (gtm-head.liquid et gtm-body-end.liquid) au site.
Ces deux fichiers contenaient le code de GTM à proprement parler ; la version script dans gtm-head.liquid et la version noscript en bas de gtm-body-end.liquid.
Ils contenaient également du code qui allait récupérer les infos de Shopify pour alimenter un Data Layer complet correspondants aux éléments e-commerce à suivre.
Pour intégrer ces deux fichiers il fallait passer par le back office au niveau du Theme. Il y est présent un bouton avec trois points à côté du bouton pour personnaliser le template qui permet d’accéder à l’éditeur de son code.
Cela ouvre l’éditeur de code où l’on retrouve dans la barre de gauche le dossier des Snippets. Il fallait alors choisir d’ajouter un nouveau snippet nommé « gtm-head » avec le bon code et un autre « gtm-body-end ».
Modification du fichier theme.liquid pour appeller les deux nouveaux Snippets
Une fois l’étape précédente complétée vous aviez donc deux fichiers de Snippets supplémentaires dans votre thème contenant les éléments principaux nécessaires à GTM. Il fallait encore que votre template appelle ces nouveaux codes pour les déclencher.
Pour cela, toujours dans l’éditeur de thèmes, en ouvrant le fichier theme.liquid, vous alliez y ajouter deux lignes de code pour faire la correspondance avec les deux Snippets.
Tout d’abord un premier code juste après la balise d’ouverture <head>.
{% include 'gtm-head' %}Et plus bas juste avant la balise de fermeture </body> un second.
{% include 'gtm-body-end' %}Ces deux codes suffisaient à faire le lien entre le thème et les nouveaux Snippets contenant GTM. La méthode étant devenir obsolète vous pouvez maintenant supprimer ces appels du theme.liquid et les deux snippets complémentaires.
Ajout d’un script personnalisé dans les paramètres « Checkout »
La troisième est dernière étape des modifications de Shopify pour intégrer GTM consistait à ajouter un code personnalisé dans les paramètres de Shopify.
Dans votre back office Shopify vous passiez par le menu « Settings » situé en bas à gauche de l’écran (une roue crantée) pour ouvrir les réglages de Shopify et y trouverez un lien « Checkout ».
Puis en défilant la page vers le bas vous aviez une zone (toujours présente mais qui n’est plus fonctionnelle) pour coller un dernier code permettant de disposer de GTM aussi sur la page de confirmation de commande.
De nouveau si c’est quelque chose que vous aviez fait sur votre site vous pouvez supprimer le code en question.
Solution 2025 : ajout du code GTM et Data Layer dans les « Customer events » Shopify
Depuis les modifications faites par Shopify dans leur plateforme, la solution consiste à ajouter un « Pixel personnalisé » contenant tout le code de déclenchement de GTM et d’enrichissement du Data Layer dans une zone qu’ils ont prévue à cet effet.
Dans votre back office cliquez donc sur le lien « Settings » situé en bas à gauche de l’écran (une roue crantée) pour ouvrir les réglages de la solution.
Sur l’écran qui vient de s’ouvrir vous trouvez le lien vers les « Customer events » où il faut ajouter le nouveau pixel dédié à votre GTM.
Donnez le nom que vous souhaitez à ce pixel (GTM par exemple) et intégrez y le code permettant de déclencher votre Google Tag Manager et de lui fournir toutes les informations nécessaires à un suivi e-commerce par le Data Layer.
Évidemment ce code est un peu complexe à écrire et il serait impossible dans un simple article de vous expliquer tous les détails de la syntaxe attendue ici par Shopify. Si vous êtes curieux vous pouvez fouiller dans leur documentation. Sinon je vous propose de télécharger ce fichier texte à copier coller directement après avoir remplacé « GTM-XXXXXX » par l’identifiant de votre compte (pensez à sauvegarder en haut de l’écran).
A ce stade il ne vous reste qu’à régler la section « Customer privacy » avant de connecter votre pixel. Ce réglage est indispensable au bon fonctionnement de l’ensemble. Nous choisissons « Not required » pour la permission, car GTM n’est qu’un conteneur de tags et non pas une solution de suivi. C’est dans GTM par contre que les balises doivent être conditionnées à l’acceptation des visiteurs.
Configuration des balises GA4 dans GTM
Maintenant que GTM est bien présent sur l’ensemble du site et que le Data Layer est alimenté nous pouvons passer à la configuration des balises depuis son back office. Comme pour toute configuration GA4 il va nous falloir la balise Google sur l’ensemble des pages + des balises d’événements pour les étapes du parcours e-commerce sur le site.
Et pour cela il nous faut des déclencheurs pour les événements e-commerce et des variables pour récupérer les données du Data Layer et les envoyer aux balises.
Toutes ces configurations peuvent évidemment être réalisées manuellement mais pour gagner du temps vous pouvez aussi télécharger le fichier de configuration pour GTM que j’ai mis à votre disposition ici : gtm-shopify-2025-customer-events.json
Une fois le fichier téléchargé rendrez-vous dans la section Admin de votre GTM pour retrouver la fonction d’import des conteneurs.
Sélectionnez alors le fichier de conteneur, l’espace de travail vers lequel l’envoyer (si vous ne savez pas choisir sélectionnez l’espace existant) et basculez sur la fonction avec l’espace de travail en renommant les balises en doublon (cela évitera que vous perdiez des choses si vous avez déjà travaillé dans cet espace).
Une fois l’import finalisé rendez-vous dans la partie « Variables » de l’espace de travail pour retrouver celle nommée « *Update After Import* Const – GAv4 ID ». Il vous faudra l’éditer pour y ajouter l’identifiant de votre flux de données GA4 (vous pouvez aussi renommer la variable par exemple en Const – GAv4 ID mais ça n’est pas indispensable).
Si vous ne savez plus où retrouver cette valeur revenez à votre propriété GA4 dans la section « Paramètres » (la roue crantée en bas à gauche), puis « Collecte et modification des données » et « Flux de donnée » pour cliquer sur le flux et la récupérer.
Une fois cette dernière action réalisée vous disposez donc d’un GTM totalement configuré pour envoyer un suivi e-commerce à votre propriété GA4 ; n’oubliez pas de le déployer.
Vérification du résultat
Généralement pour débugger une installation de GTM il suffit de lancer une prévisualisation avec le Tag Assistant de Google, mais dans le cas présent la technologie utilisée par Shopify l’empêche de fonctionner correctement. Vous aurez donc l’impression avec cette méthode que ni GTM, ni le GA4 que vous y avez intégré ne sont en place sur le site.
Pour vous rassurer vous pouvez utiliser une autre extension Chrome que celle de Google. Par exemple si vous installez l’extension dataslayer vous pourrez alors ouvrir la console de Google Chrome (F12) et dans son onglet dédié constater le bon déclenchement de votre GA4.
Et bien sur quelques jours après vous pourrez constater directement dans le rapport d’évènements de GA4 que le suivi ecommerce renvoie bien les informations attendues.
Dernier conseil complémentaire ; n’oubliez pas de prendre en compte par ailleurs la décision de vos visiteurs sur les suivis dans la configuration de vos trackings pour rester en phase avec la RGPD. Si vous avez besoin d’aide pour cela je vous invite pour commencer à consulter mon article sur le Consent Mode V2 qui concerne l’ensemble des tags Google.
