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 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 Panier2. 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

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

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 et3. Une balise

pour chaque étape.

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

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

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

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 FunnelAction : Step 1Libellé : 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

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 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

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

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

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

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

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

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

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

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/