Après avoir traité le sujet pour d’autres CMS (PrestaShop, Shopify, WordPress/WooCommerce) occupons nous de la référence des CMS e-commerce : Magento. D’un strict point de vue parts de marché avec la popularité croissante de Shopify et la difficulté d’isoler WooCommerce dans tous les sites WordPress, Magento n’est pas le CMS leader mais il n’en reste pas moins le plus pointu, le plus avancé et le plus configurable de tous pour les professionnels de la vente en ligne.
Si l’on considère donc que Magento est bien un modèle de puissance en e-commerce, il mérite la mise en place d’un tracking performant pour permettre à ses utilisateurs d’en tirer le meilleur profit. C’est ce que nous allons voir maintenant.
1 – Mise en place de l’extension Magento 2 Google Tag Manager Extension
Comme toujours pour pouvoir travailler des trackings avec Google Tag Manager nous avons besoin de 2 choses :
- La pose du tag GTM sur toutes les pages du site
- La mise en place d’un Data Layer contenant toutes les données e-commerce que dont nous aurons besoin pour les tags
Le premier sujet est évidemment très simple à traiter puisque ce tag pourrait très bien être ajouté au code du header du site par exemple. Le second par contre l’est un peu moins puisque sur chaque template de page (accueil, catégories, fiches produits, panier, etc…) il faut mettre en place du code pour récupérer les données du site et les publier au format Data Layer.
Si vous avez des ressources techniques pour ça (un ou des développeurs spécialisés) vous pourriez leur fournir un plan de taggage et les laisser faire cette mise en place. Mais pour la majorité des CMS il est aussi possible de passer par des extensions ou des modules qui vous permettront d’ajouter ces données sans développement supplémentaire (ce qui représente souvent une économie en terme de budget et de temps).
C’est ce que fait l’extension « Magento 2 Google Tag Manager Extension » de l’éditeur Magefan.
L’extension dispose d’une version d’essai gratuite et d’une version payante. Pour bénéficier de toutes les données de Data Layer dont nous aurons besoin il faudra passer par la version payante.
2 – Configuration de l’extension
L’extension de Magefan étant prévue par son éditeur pour être globalement « plug and play » il y a peu de choses à faire pour la configurer. Rendez vous donc tout d’abord dans le back office Magento et suivez le lien « Magefan » de la colonne de gauche pour activer l’extension et y saisir le code justificatif de votre achat.
Défilez ensuite votre écran pour saisir les infos qui permettront à l’extension d’ajouter le code principal de votre GTM dans les pages du site. Il vous faudra votre ID au format GTM-XXXXXXXX comme généralement avec les modules de ce type mais aussi un ID de compte et un ID de container. Ces deux données sont moins courantes mais peuvent être facilement récupérées dans l’url de votre Google Tag Manager comme expliqué par l’extension.
Pour les 4 blocs de configuration suivants ne faites rien de plus :
- Server Container (GTM Extra) : serait à utiliser pour une configuration server side que nous ne ferons pas ici (et nous ferions d’ailleurs autrement de toute façon)
- Google Analytics 4 : permettrait de poser aussi un tag GA4 par l’extension mais pour plus de contrôle nous le ferons par GTM
- Google Ads (GTM Plus) : idem, nous poseront les tags Google Ads plutôt par GTM
- Server Side Tracking (GTM Extra) : toujours pour le server side
Pour le bloc « Product Attributes Mapping » il vous faudra faire quelques réglages pour associer les données de votre configuration Magento à l’ID Produit, à sa marque et à sa catégorisation. Et nous ne toucherons pas aux blocs « Pages Speed Optimization » et ‘RGPD » (ce point se traite lui aussi plus efficacement dans GTM).
N’oubliez pas d’enregistrer cette configuration pour finir cette étape.
Vous remarquerez peut être un bloc nommé « Export Web Container » qui vous donne la possibilité de récupérer un fichier json de configuration pour GTM. Vous pouvez le faire si vous le souhaitez mais pour l’avoir testé ils ne contient pas une configuration GTM suffisante ; je vous en proposerai donc un autre personnalisé un peu plus bas dans l »article.
3 – Pose de la balise Google dans GTM
Chaque installation de GA4 repose sur deux types de balises : la balise Google « générique » (anciennement balise GA4 principale) et une ou plusieurs balises d’événements pour GA4. La première est indispensable car elle amorce la collecte de données et la récupération des événements « automatiques » par votre propriété. Les balises d’événements sont aussi nécessaire pour un suivi avancé comme le suivi e-commerce que nous réalisons ici mais elles ne peuvent pas fonctionner sans la première.
Direction donc votre conteneur GTM dans la section « Balises » pour en créer une nouvelle où vous choisirez la balise Google en question.
En terme de paramètrages cette balise est simple à mettre en place. Il vous faudra essentiellement l’identifiant de votre flux GA4 (Paramètres > Collecte et modification des données > Flux de données) que je vous conseille de placer dans une variable car nous la réutiliserons plus tard.
Il ne faut pas non plus oublier le paramètre de configuration « send_page_view » réglé sur « true » sans lequel la balise n’enverra aucune donnée à elle seule.
Et pour ce qui est du déclenchement activez la sur toutes les pages sans conditions. Ce n’est pas le sujet de cet article mais la gestion du consentement des utilisateurs se fera avec une configuration complète spécifique que vous pouvez retrouver dans cet autre article si besoin : Guide complet du Consent Mode V2 de Google.
A partir de là si vous déployer votre conteneur GTM vous commencerez à recevoir des données dans GA4 comme les sessions, les visiteurs et les pages vues. Ces données sont nécessaires mais pas suffisantes pour un suivi e-commerce ; c’est pour cela qu’il faut poursuivre plus loin la configuration.
4 – Import de la configuration de conteneur pour le suivi des événements e-commerce
Comme je le disais dans la configuration du module Magefan vous propose en fin de configuration de télécharger un fichier à importer dans votre GTM mais celui ci (selon les essais que j’ai pu faire) ne fonctionne pas très bien.
J’ai donc crée un autre fichier au format .json que vous allez pouvoir importer et qui lui fonctionne correctement. Voici le lien pour le télécharger : https://www.datalayer.expert/wp-content/temp/evenements-e-commerce-GA4-magefan-202403.json
Il s’agit d’un fichier de configuration pour GTM qui contient :
- Les variables e-commerce qui vont récupérer les données du Data Layer généré par l’extension Magefan
- Les déclencheurs nécessaires à l’envoi des événements clés à GA4
- La balise d’événement GA4 intégralement configurée pour l’envoi des données à votre propriété
Ces 3 éléments sont indispensables à la bonne mise en place d’un suivi et pourraient bien sur être configurés manuellement mais avec ce fichier de configuration vous allez gagner beaucoup de temps sur cette étape.
Direction donc la partie « Admin » de votre Google Tag Manager pour « Importer un conteneur ». Sélectionnerez le fichier .json téléchargé sur votre ordinateur, choisissez de fusionner avec l’espace de travail dans lequel vous avez déjà ajouté la balise Google principale et cochez l’option « Renommer les balises » pour ne pas risquer de perdre votre travail précédent.
5 – Ajustement final de la configuration importée
Cette dernière étape est particulièrement simple ; elle consiste à associer votre identifiant de flux GA4 à la balise d’événement que vous venez d’importer ; sans quoi elle ne fonctionnera pas correctement.
Ouvrez donc la balise et dans le champ « ID de mesure » remplacez la chaine de caractère initiale par votre ID GA4 ; soit en le saisissant manuellement soit en sélectionnant la variable que vous aurez normalement déjà créée pour la balise Google.
Une fois cette modification faite vous disposerez dans votre espace de travail GTM de tous les éléments nécessaires au suivi e-commerce de votre site Magento dans GA4 :
- Une série de variables qui récupèrent depuis le Data Layer les données indispensables à ce suivi
- Un déclencheur global programmé pour répondre aux événements e-commerce principaux (vue de liste, vue de produit, ajout au panier, début de parcours d’achat, commande, etc…) envoyés à GTM par l’extension Magefan
- Une balise Google principale pour faire le lien avec votre propriété GA4
- Une balise d’évènements pour envoyer chaque action e-commence à GA4 avec les variables correspondantes
6 – Vérification et déploiement de la configuration
Comme plusieurs précautions valent toujours mieux qu’une seule nous allons quand même passer par une prévisualisation de Google Tag Manager pour vérifier que tout fonctionne correctement avant de le mettre en ligne.
Dans GTM cliquez donc sur le bouton « Prévisualiser » en haut à droite de votre écran.
Cela aura pour effet d’ouvrir deux fenêtre ou onglets supplémentaires : tag assistant d’une part qui vous permettra de visualiser tout ce qui se passe dans GTM avec votre configuration actuelle et votre site en mode débug d’autre part pour que vous puissiez y réaliser toutes les actions à monitorer.
En parallèle rendez vous dans l’Administration de votre propriété GA4 et sous « Paramètres de la propriété > Affichage des données » cliquez sur le lien « DebugView ».
Avec cette configuration active naviguez alors sur votre site pour simuler le comportement d’un visiteur et vérifiez que sur les actions e-commerce importante comme la vue de produit, les ajout au panier, les commandes, etc… vous retrouvez bien dans GTM l’information du déclenchement de la balise d’événements pour GA4 et dans GA4 l’événement correspondant.
Si vous retrouvez bien vos évènements e-commerce des deux côté et que les variables de GTM sont bien alimentées sur chacun d’eux alors votre configuration est opérationnelle. Il ne vous reste plus qu’à la déployer (bouton Envoyer en haut à droite de l’écran) pour rendre votre tracking actif sur votre site en ligne.
Laissez à votre propriété 24 à 28 heures de collecte de données à partir de là et vous pourrez commencer à analyser dans GA4 les premiers résultats de votre site Magento.
