Dans cette présentation j'essaie de vous expliquer comment paramétrer le commerce électronique amélioré sur Google Analytics avec Google Tag Manager. Toutes les remarques pour améliorer cette présentation sont les bienvenues.

1. 11
Commerce électronique amélioré
avec GTM

2. 2
1.Déterminer le processus d’achat
Avant de mettre en place le suivi du commerce électronique amélioré avec Google Analytics, il
est important de déterminer le parcours d’achat de vos clients sur votre site internet.
Prenons un cas classique de parcours client :
1. Ajout Panier
2. Identification (création compte ou page identification)
3. Connexion (confirmation création compte ou connexion)
4. Livraison (récapitulatif adresse livraison ou nouvelle adresse)
5. Paiement (choix du mode de paiement)
La dernière étape qui est « transaction » ce qui correspond à la confirmation d’achat sur votre
site se paramétra en dernier. Nous verrons comment faire à la fin de cette présentation.

3. 3
2. Activer le commerce électronique amélioré
Dans l’administration de votre compte Google Analytics, puis dans « Vue » allez sur
« Paramètre de commerce électronique ».
C’est ici que vous allez activer la fonction et mettre en place les étapes de votre entonnoir de
conversion.

4. 4
3. Mise en place sur Google Tag Manager
Imaginons que vous avez déjà créé votre compte Google Tag Manager et publié la balise de suivi « pages
vues » Universal Analytics.
Pour déterminer les étapes de votre entonnoir de commerce électronique amélioré il va falloir les créer sous
forme d’événements.
J’ai dans mon entonnoir 5 étapes. Vous pouvez en créer autant que vous le souhaitez, je conseille par
ailleurs d’en avoir 4 pour avoir toutes les étapes sur la même page dans le rapport que nous verrons à la fin.
Pour créer cet événement « étape » il va falloir créer :
1. Une variable,
2. Un déclencheur et
3. Une balise
pour chaque étape.

5. 5
4. Création des variables
Pour chaque étape de mon entonnoir je vais créer une variable :
« JavaScript Personnalisé ».
Sur mon espace de travail GTM, je me rends donc sur « variable ». Je clique sur nouvelle et je vais choisir
« JavaScript personnalisé ». Je lui donne un nom facilement identifiable. Exemple en anglais : EE Object
Funnel Step 1.
Je rentre le code suivant :
1. function(){
2. return {'ecommerce': {
3. 'checkout': {
4. 'actionField': {'step': 1}
5. }}};
6.
7. }

6. 6
4. Création de la variable (suite)
Je duplique ma variable, et je n’oublies pas de changer {'step': 1} par {'step': 2} puis {'step': 3} ainsi de suite
autant de fois que j’ai d’étapes dans mon entonnoir. Même remarque pour le nom de la variable.

7. 7
5. Création des déclencheurs
• Nous allons ici reproduire les étapes de l’entonnoir de conversion, si votre site a été pensé avec un fil
d'Ariane (avec une nouvelle page à chaque fois), il suffit de suivre ce parcours. Dans mon exemple, mes
déclencheurs seront une page vue.
Pour ma page panier :
• Je vais créer autant de déclencheurs que j’ai d’étapes.
Bien penser à les nommer correctement !
(ex : 1. Ajout Panier, 2. Identification…)

8. 8
6. Création des événements
Nous avons créé nos variables et nos déclencheurs, maintenant créons nos événements.
Pour mon étape : 1. Ajout Panier, voici comment procéder :
• Nouvelle balise de type « Universal Analytics » avec type de suivi Evènement.
Attention de bien mettre votre code de suivi Analytics et de bien renseigner tous les champs
Dans mon exemple, renseigner :
Catégorie : EE Funnel
Action : Step 1
Libellé : Ajout Panier
• Dans plus de paramètres : « Activer les fonctionnalités de commerce électronique » et sélectionner Lire les
données provenant de la variable, menu déroulant et sélectionner
{{EE Object Funnel Step 1}}. (variable créée précédemment)
• Enfin déclenchement : sélectionner le déclencheur précédemment créé : 1-Ajout Panier

9. 9
5. Création des événements (suite)

10. 10
5. Création des événements (suite)
Je répète cette opération autant de fois que j’ai d’étapes.
Attention de bien modifier dans vos balises : Action et Libellé et de choisir les variables correspondantes :
{{EE Object Funnel Step 1}}, {{EE Object Funnel Step 2}}, {{EE Object Funnel Step 3}}…
Ainsi que les déclencheurs.
C’est pour ça qu’il est important de bien nommer les variables, déclencheurs, balises en mettant le chiffre de
l’étape pour ne pas s’y perdre.
J’ai donc mes 5 événements :

11. 11
5. Ca fonctionne ou pas ?
Avant d’aller plus loin je vais vérifier que ces étapes fonctionnent bien.
Pour cela il faut au préalable créer une vue dans Google Analytics avec un filtre n’incluant que le trafic de
mon adresse IP, pour avoir une vue de test.
Dans Google Tag Manager je me mets en mode :
Je fais ensuite mon parcours d’achat sur le site et je vérifie que les événements se déclenchent bien à
chaque étape.

12. 12
5. Ca fonctionne ou pas ?
Je n’ai pas besoin de confirmer mon achat car je n’ai pas encore configuré la transaction. Si mes
événements se sont bien déclenché dans le mode débogage, je peux maintenant vérifier sur Google
Analytics.
Rapport > Temps réel > Evénements je clique sur « Evénements (30 dérnière min) »
C’est opérationnel !

13. 13
6. Configurer la transaction avec une variable JS
Voici la dernière étape et certainement la plus délicate, car si comme moi vous n’êtes pas développeur vous
allez avoir besoin d’aide.
Pour activer le commerce électronique amélioré vous aurez le choix entre créer une variable JavaScript ou
implémenté un Data Layer sur votre page de confirmation d’achat. Le support Google préconise d’utiliser un
Data Layer, pour avoir utiliser les deux je confirme, les résultats sont plus fiables avec un Data Layer. Si vous
voulez tout de même utiliser une variable JavaScript Personnalisé voici l’exemple du code :
function() {
var ecommerceData = {
'ecommerce' : {
currencyCode : 'EUR',
// utiliser tous les paramètres dont vous avez besoin
}
};
return ecommerceData;
N’oubliez pas de prendre en compte le nombre de produit dans le panier !
Il faudra ensuite reprendre votre balise Universal Analytics, activer le commerce électronique amélioré
et lire les information de cette variable.

14. 14
6. Configurer la transaction avec un Data Layer
En utilisant un Data Layer, l’inconvénient c’est que l’on doit toucher au code.
Il faut que ce script se trouve au dessus de votre conteneur GTM et surtout pas en dessous !
Exemple de Data Layer :
<script>
dataLayer = [{
'pageCategory': 'signup',
'visitorType': 'high-value'
}];
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

15. 15
6. Configurer la transaction avec un Data Layer
Exemple d’un Data Layer e-commerce bien configuré :
<script>
dataLayer.push({
'ecommerce': {
'purchase': {
'actionField': {
'id': 'T12345', // Transaction ID. Required for purchases and refunds.
'affiliation': 'Online Store',
'revenue': '35.43', // Total transaction value (incl. tax and shipping)
'tax':'4.90',
'shipping': '5.99',
'coupon': 'SUMMER_SALE'
},
'products': [{ // List of productFieldObjects.
'name': 'Triblend Android T-Shirt', // Name or ID is required.
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray',
'quantity': 1,
'coupon': '' // Optional fields may be omitted or set to empty string.
},
{
'name': 'Donut Friday Scented T-Shirt',
'id': '67890',
'price': '33.75',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Black',
'quantity': 1
}]
}
}
});
</script>

16. 16
6. Configurer la transaction, activation
Dans votre balise de suivi Google Analytics, il faut maintenant activer le commerce électronique, si vous avez
opté pour la variable javaScript personnalisé n’oubliez pas d’aller la chercher dans le menu déroulant des
variables.
Si vous avez opté pour le Data Layer, cocher « utiliser la couche de données » en dessous de « Activer
les fonctionnalités avancées de commerce électronique »
Il existe une multitude de données que vous pouvez traquer via le commerce électronique de Google
Analytics.
Pour aller plus loin consulter les sources à la fin de ce document.

17. 17
7. Rapports Analytics
Si tout est en ordre, vous allez avoir accès à de nouveaux rapports dans Google Analytics dont : « Analyse
du comportement lors du processus de paiement » et comparé aux « entonnoirs de
conversion vers l'objectif » les données sont plus pertinentes et moins linéaires. Dans ce rapport vous
pourrez utiliser des segments et de changer les dimensions.

18. 18
Sources
https://developers.google.com/tag-manager/devguide#datalayer
https://measureschool.com/ (j’ai beaucoup appris avec ces vidéos)
http://www.lunametrics.com/blog/
https://www.formations-analytics.com/google-tag-manager/