11
Commerce électronique amélioré
avec GTM
2
1.Déterminer le processus d’achat
Avant de mettre en place le suivi du commerce électronique amélioré avec Google Analyt...
3
2. Activer le commerce électronique amélioré
Dans l’administration de votre compte Google Analytics, puis dans « Vue » a...
4
3. Mise en place sur Google Tag Manager
Imaginons que vous avez déjà créé votre compte Google Tag Manager et publié la b...
5
4. Création des variables
Pour chaque étape de mon entonnoir je vais créer une variable :
« JavaScript Personnalisé ».
S...
6
4. Création de la variable (suite)
Je duplique ma variable, et je n’oublies pas de changer {'step': 1} par {'step': 2} p...
7
5. Création des déclencheurs
• Nous allons ici reproduire les étapes de l’entonnoir de conversion, si votre site a été p...
8
6. Création des événements
Nous avons créé nos variables et nos déclencheurs, maintenant créons nos événements.
Pour mon...
9
5. Création des événements (suite)
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 modifi...
11
5. Ca fonctionne ou pas ?
Avant d’aller plus loin je vais vérifier que ces étapes fonctionnent bien.
Pour cela il faut ...
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...
13
6. Configurer la transaction avec une variable JS
Voici la dernière étape et certainement la plus délicate, car si comm...
14
6. Configurer la transaction avec un Data Layer
En utilisant un Data Layer, l’inconvénient c’est que l’on doit toucher ...
15
6. Configurer la transaction avec un Data Layer
Exemple d’un Data Layer e-commerce bien configuré :
<script>
dataLayer....
16
6. Configurer la transaction, activation
Dans votre balise de suivi Google Analytics, il faut maintenant activer le com...
17
7. Rapports Analytics
Si tout est en ordre, vous allez avoir accès à de nouveaux rapports dans Google Analytics dont : ...
18
Sources
https://developers.google.com/tag-manager/devguide#datalayer
https://measureschool.com/ (j’ai beaucoup appris a...
Prochain SlideShare
Chargement dans…5
×

Suivi du Commerce Electronique Avec Google Tag Manager

298 vues

Publié le

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.

Publié dans : Technologie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Suivi du Commerce Electronique Avec Google Tag Manager

  1. 1. 11 Commerce électronique amélioré avec GTM
  2. 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. 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. 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. 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. 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. 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. 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. 9 5. Création des événements (suite)
  10. 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. 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. 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. 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. 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. 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. 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. 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. 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/

×