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 par contre est 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 potentiellement très performante.
Utiliser l’intégration « native » de GA4 avec Shopify ?
Le but du jeu des solutions 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.
Evidemment 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 nous allons 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.
Modifier les fichiers du template pour intégrer GTM
Cette modification va passer par plusieurs étapes détaillées ci dessous.
Ajout de deux fichiers dans les snippets du template
Pour commencer cette intégration vous pouvez télécharger deux fichiers dont voici les liens gtm-head.liquid et gtm-body-end.liquid.
Ces deux fichiers contiennent le code de GTM à proprement parler ; la version script dans gtm-head.liquid et la version noscript en bas de gtm-body-end.liquid. Il faut donc les ouvrir avec un éditeur de texte pour y ajouter l’ID de votre conteneur GTM à la place de la chaine de caractères GTM-XXXXXX initiale.
Ils contiennent également du code qui va récupérer les infos de Shopify pour alimenter un Data Layer complet correspondants aux éléments e-commerce que nous allons vouloir suivre.
Pour intégrer ces deux fichiers à votre template vous ne pourrez pas les charger en FTP sur les serveurs Shopify. Rendez vous donc dans votre back office au niveau du Theme. Vous y trouverez un bouton avec trois points à côté du bouton pour personnaliser le template qui vous permettra d’accéder à l’éditeur de son code.
Cela vous ouvrira l’éditeur de code où vous retrouverez dans la barre de gauche le dossier des Snippets. Et comme vous ne pourrez toujours pas uploader des fichiers directement il faudra choisir d’ajouter un nouveau snippet, de le nommer « gtm-head » et d’y coller le contenu du fichier que vous aurez préparé. Puis il faudra recommencer la même opération pour « 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 aurez donc deux fichiers de Snippets supplémentaires dans votre thème contenant les éléments principaux nécessaires à GTM. Il faut maintenant que votre template appelle ces nouveaux codes pour les déclencher.
Pour cela restez dans l’éditeur de thèmes et ouvrez le fichier theme.liquid (en quelque sorte le fichier contenant l’essentiel des fonctionnalités de votre thème. Vous allez y ajouter deux lignes de code pour faire la correspondance avec les deux Snippets.
Tout d’abord juste après la balise d’ouverture <head> ajoutez le code suivant.
{% include 'gtm-head' %}Et plus bas juste avant la balise de fermeture </body> ajoutez ce second code.
{% include 'gtm-body-end' %}Ces deux codes suffisent à faire le lien entre le thème et les nouveaux Snippets contenant GTM. Il n’y a donc rien de plus à faire dans l’éditeur de thème que vous pouvez alors fermer.
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 va consister à ajouter un code personnalisé dans les paramètres de Shopify.
Pour cela comme précédemment commencez par récupérer ce troisième fichier : gtm-checkout-success.txt
Comme il contient lui aussi la balise GTM (script et noscript) il faut également l’ouvrir avec un éditeur de texte pour y ajouter l’ID de votre conteneur GTM.
Dans votre back office Shopify rendez vous ensuite dans le menu « Settings » situé en bas à gauche de l’écran (une roue crantée). Cela ouvrira les réglages de Shopify où vous trouverez un lien « Checkout ».
Puis en défilant la page vers le bas vous trouverez une zone pour coller le code du fichier gtm-checkout-success.txt. Il vous permettra de disposer de GTM aussi sur la page de confirmation de commande, ce qui n’est pas possible uniquement avec les fichiers Snippets du template. Le nom de la zone (Checkout) est par contre un peu trompeur car il laisse penser que GTM sera présent aussi sur la page checkout en plus de la confirmation de commande ce qui n’est pas le cas à moins que vous n’ayez un abonnement Shopify plus.
Vérification du fonctionnement de GTM
Comme toujours après une intégration de code importante il est intéressant de vérifier le résultat et dans le cas présent de vérifier la bonne présence de GTM sur le site ainsi que l’alimentation des données e-commerce dans le DataLayer.
Pour cela rendez vous dans votre back office GTM pour lancer une prévisualisation qui ouvrira une fenêtre Tag Assistant et le site en mode debug.
Naviguez ensuite sur le site pour aller voir des collections, des produits et faire des ajouts au panier. Vous verrez normalement apparaitre des événement comme « collectionView », « productDetailView ou encore « addToCart » qui montre que la configuration fonctionne bien.
Comme je le disais, sur la page checkout par contre GTM n’est pas présent et donc plus rien ne sera visible dans la fenêtre Tag Assistant (ce qui n’est pas bloquant pour le fonctionnement global de votre tracking).
Si vous poursuivez votre test jusqu’à la commande vous retrouverez par contre la prévue sur la page de confirmation avec l’événement et les données correspondantes vous indiquant que tout a bien fonctionné.
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 : base-config-gtm-pour-shopify-ga4.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* – 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 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.
Vérification des données dans GA4 et publication du conteneur
Pour vérification finale relancez une prévisualisation de GTM comme précédemment. Et côté GA4 en passant par les paramètres, dans la section « Affichage des données » ouvrez le « DebugView ».
En navigant ainsi en mode prévisualisation de GTM vous pourrez d’une part dans le Tag Assistant voir vos balises se déclencher en fonction de vos actions e-commerce (vue d’un collection, d’un produit, etc…) et d’autre part dans le Debug View de GA4 voir les événements arriver dans votre propriété.
A partir de là vous aurez la confirmation que votre configuration fonctionne comme prévu et il ne vous restera plus qu’à publier votre conteneur GTM (le bouton envoyer en haut à droite) pour le rendre live et commencer à collecter des données qualifiées sur votre trafic et le comportement des visiteurs sur votre site web.
Et n’oubliez pas de prendre en compte par ailleurs aussi leur décision 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.
