Malgré la popularité croissante de plates formes e-commerce en SAAS comme Shopify, WordPress (avec son extension WooCommerce) reste le leader des CMS utilisés pour mettre en place des boutiques en ligne. Si vous avez fait ce choix pour votre business, vous aurez besoin de passer par une étape de configuration de votre suivi webanalytics pour pouvoir analyser au mieux dans GA4 les performances de vos actions.
Connectez vous donc à votre compte Google Tag Manager, à votre propriété GA4 et au back office de votre WordPress et suivez le guide pour mettre en place cette configuration dans les meilleures conditions.
1 – Installation du plugin GTM4WP
Pour pouvoir mettre en place un suivi e-commerce avancé dans GA4 vous aurez besoin de rendre disponible un maximum de données qui devront être transmises à vos tags GA4 au moment de la réalisation des événements à suivre comme les vues de produits, les ajouts au panier ou les commandes.
La manière la plus simple d’obtenir ce résultat dans WordPress est d’utiliser un plugin dédié à Google Tag Manager comme GTM4WP https://wordpress.org/plugins/duracelltomi-google-tag-manager/.
La mise en place de ce plugin sur votre site par ses moyens habituels permettra de faire 2 choses :
- Installer le code principal de votre compte Google Tag Manager sur votre site sans toucher à votre code source
- Rendre disponible dans le dataLayer de GTM les informations dont nous aurons besoin pour configurer les tags e-commerce de GA4
Pour cela, une fois le plugin installé, il faut le configurer afin d’envoyer les bonnes données au bon moment.
2 – Configuration du plugin
Une fois activé le plugin dispose d’une configuration initiale qu’il va falloir vérifier et ajuster pour répondre à tous nos besoins.
Le panneau de configuration de l’extension est disponible depuis le menu Réglages > Google Tag Manager
Le premier onglet est très simple. Il permet de renseigner l’identifiant de son Conteneur GTM, d’activer ou pas le fait que le plugin pose sur le site le code de GTM en lui même et où placer ce code (dans la section head du code comme préconisé par GTM, en footer ou ailleurs).
Cette fonction est intéressante car vous pourriez être dans le cas ou un développeur aurait déjà placé le code GTM sur le site mais pas d’envoi de données avancé par le dataLayer. Dans ce cas vous allez pouvoir utiliser quand même GTM4WP pour le dataLayer tout en désactivant la pose du tag principal par celui-ci.
Le deuxième onglet « Données de base » est beaucoup plus dense. Ses sous niveaux (articles, rechercher, visiteurs, etc…) vont permettre de choisir quelles données envoyer au dataLayer par type de contenu.
Ces choix sont surtout utiles pour les sites de contenu pour lesquels il sera par exemple possible d’envoyer ou pas l’ID et el nom de l’auteur, la date de publication de l’article, etc… Il n’est pas nécessaire d’y changer grand chose pour un suivi e-commerce.
Le niveau « Visiteurs » va quand même être utile car il permet d’envoyer son statut de connexion ainsi que son email s’il est connecté ce qui permet d’utiliser le suivi avancé des conversions pour Google Ads. Pour ça cochez le statut de connexion, l’ID et l’e-mail utilisateur.
Sur l’onglet « Événements » vous pouvez cocher les cases du niveau évènements généraux pour suivre les connexions et les remplissages de formulaires mais ce n’est pas indispensable.
L’onglet « Suivi du défilement » n’est pas très utile dans une optique de tracking GA4 car celui ci fait déjà ça seul de façon native.
L’onglet « Sécurité » n’est pas utile non plus puisque nous gérons tous les tags et leurs conditionnements dans GTM.
L’onglet « Intégration » contient par contre un niveau WooCommerce qui est très évidemment décisif pour le suivi e-commerce (pas de modifications à faire dans les autres sous niveaux). Nous allons utiliser les réglages suivants :
- Décocher le suivi classique du e-commerce puisqu’il est obsolète
- Cocher le suivi amélioré qui est l’élément le plus important pour notre configuration GTM
- Laisser vide la case « Produits par impression » (sauf si vous avez un très grand nombre de produits dans vos catégories, mettez alors 30 ou 40 dans la case)
- Décocher la case « 3 »Panier comme première étape de la validation de commande »
- Cocher le « Contenu du panier dans la couche de données »
- Décocher le chemin de catégorie complet car cela complexifie la lecture des données
- Ne rien faire dans le menu des « Taxonomies pour les marques » sauf si vous en avez créé une exprès pour elles
- Décocher les données clients qui sont un peu trop personnelles
- Cocher les données de la commande
- Décocher « Exclure la taxe du revenu » (le principe « normal » de GA4 est d’envoyer le CA TTC avec les commandes et le montant des taxes dans une autre variable)
- Laisser 30 dans la case « Ne suivez que les commandes plus jeunes de » (cette fonction n’est pas stratégique normalement)
- Comme pour la taxe décocher « Exclure les frais d’expédition du chiffre d’affaires »
- Décocher « Remarketing Google Ads »
- Choisir un secteur d’activité dans le menu « Google Ads Business Vertical »
- Laisser vide le champ « Préfixe d’ID de produit »
- Décocher sauf besoin spécifique « Utilisez le SKU au lieu de l’ID »
- Laisser décochée la dernière case « Ne pas marquer les commandes comme suivies »
Une fois ces paramètres en place nous sommes prêts à faire notre configuration de suivi e-commerce dans GTM. Les deux derniers onglets « Avancé » et « Crédit » ne demandent aucun réglage particulier dans notre cas.
3 – Pose de la balise GA4 principale dans GTM
Maintenant que le code de GTM est présent sur le site ainsi que l’envoi des données e-commerce dans son dataLayer nous pouvons nous rendre dans l’espace de travail de notre conteneur Google Tag Manager pour y ajouter la balise principale dédiée à GA4.
Toute configuration GA4 passe en effet par ce type de balise : la balise principale initie la collecte de donnée et récupére les événements de bases automatiquement et une ou plusieurs balises d’événements permettent de suivre des actions plus complexes comme par exemple celles liées au e-commerce qui nous intéressent ici.
Nous créons donc une nouvelle balise de type « Configuration GA4 ».
Nous ajoutons notre ID de mesure sur la balise (disponible depuis le back office de GA4 au niveau du flux de données) ainsi qu’un déclencheur sur toutes les pages du site (sans conditions) en gardant cochée la case « Envoyer un événement Page vue… ».
4 – Import de la configuration de conteneur GTM fournie par GTM4WP
Si la pose de la balise de configuration de GA4 est toujours très simple celle des balises d’événements est souvent bien plus complexe.
Elle nécessite en effet la création de déclencheurs spécifiques (liées aux actions e-commerce par exemple) et de multiples variables qui vont récupérer dans le dataLayer les données à envoyer aux balises (comme les produits vue, le montant des commandes, etc…).
Tout cela peut toujours être fait pas à pas en analysant la structure et le contenu du dataLayer lors de la navigation sur le site et en préparant dans GTM les variables et les événements que l’on souhaite envoyer à GA4. Il n’y a rien d’insurmontable à ça mais cela peut être un peu chronophage.
Mais dans le cas présent nous avons créé un fichier de configuration pour GTM simplifié qui contient déjà les variables, les déclencheurs et les balises dont nous avons besoin ; ce qui va nous faire gagner beaucoup de temps.
Rendez vous donc sur l’url suivante pour récupérer le fichier .json correspondant sur votre ordinateur (faites in clic droit puis « enregistrer sous ») : https://www.datalayer.expert/wp-content/temp/evenements-e-commerce-GA4-integration-simplifiee-202402.json
Une fois le fichier récupéré nous pouvons passer par l’Admin de GTM pour importer ce conteneur.
Pour cet import nous sélectionnons le fichier .json téléchargé, l’espace de travail GTM dans lequel importer la configuration (généralement l’espace de travail actif) et choisissons de fusionner la configuration avec l’existante en renommant les éléments en conflit (ce qui évite de dégrader ce qu’il y avait déjà dans GTM).
5 – Association de la balise d’événements GA4 avec la balise de configuration
Une fois l’import confirmé nous disposons dans notre espace de travail GTM :
- D’un déclencheur « Event – Ecommerce Events GA4 » qui s’appuie sur les événement envoyés par GTM4WP au dataLayer sur chacune des actions e-commerce comme les vues de produits, les ajouts au panier, les checkouts et les commandes.
- De 9 variables e-commerce qui récupèrent dans le dataLayer les infos sur les produits et les commandes passées par l’utilisateur (numéro de commande, montant, devise, taxes, frais de port, etc…).
- Et d’une balise d’événements pour GA4 qui se déclenche ainsi pour chaque action e-commerce et envoie à GA4 son nom ainsi que ses infos associées (noms de produits, montants, etc…)
Il manque juste l’association entre cette balise de suivi d’événements et votre propriété GA4. Or sans cela les suivis e-commerce ne seront pas affectés à la propriété GA4 présente sur le site.
Il faut donc modifier la balise « GA4 – Event – Ecommerce events » et et saisir l’identifiant de votre flux de données GA4 ou choisir une variable que vous avez crée pour ça dans le champ « ID de mesure ».
N’oublions pas de publier les modifications faites dans GTM pour rendre le suivi actif sur le site.
Nous disposons ainsi d’un suivi e-commerce complet de notre site WordPress / WooCommerce dans GA4. Il ne reste qu’à attendre quelques jours pour disposer d’un volume suffisant pour débuter les analyses ; ce que nous ferons dans d’autres articles de ce blog.
