Mesurez vos contenus comme des produits e-commerce !
Utiliser l’Enhanced Ecommerce (E-commerce Amélioré) Google Analytics pour mesurer vos contenus, c’est possible et souhaitable. Imaginez pouvoir mesurer vos contenus sans IT, c’est possible et rapide.
Faire le choix de mesurer ses contenus comme des produits e-commerce, c’est vouloir contrôler leurs usages et leurs performances. En utilisant l’Enhanced Ecommerce de Google Analytics, vous allez pouvoir analyser l’efficacité des principaux attributs de chaque contenu, comme l’auteur, les catégories, les thématiques, le nombre de mots, les mots clés, la durée de lecture, le template…
[su_pullquote]
Découvrez les Formations et Prestations du WebAnalyste.
- Formation Google Tag Manager niveau 1
- Formation Google Tag Manager niveau 2 (technique)
- Prestation : Plan De Taggage Google Analytics, Google Tag Manager, At-Internet, Tag Commander…
[/su_pullquote]
Il est plutôt aisé de définir les mesures d’un site e-commerce, notamment si on décide d’utiliser les fonctionnalités Enhanced Ecommerce de Google Analytics. Mais qu’en est il des sites de contenus, comme les articles d’un blog, d’un site média, les produits ou coupons de réduction d’un site marque, il n’existe pas vraiment de framework pour modéliser les mesures et le pilotage au fil du temps…
Alors pourquoi ne pas utiliser l’approche Enchanced Ecommerce pour mesurer un site de contenu. Par exemple, les sites de marque qui valorisent leurs produits sans les vendre directement sont souvent organisés comme un site e-commerce le processus d’achat en moins. Les fonctionnalités types e-commerce, comme l’ajout au panier, le passage en checkout et l’achat peuvent être remplacé par d’autres mesures d’engagement.
Inspiré par l’article de Simo Ahava Track Content With Enhanced Ecommerce, j’ai livré récemment une implémentation Google Analytics Enhanced Ecommerce d’un média Suisse.
Le tracking du site a été réalisé entièrement depuis Google Tag Manager, sans intégration de code dans les pages, autre que les scripts GTM. Ce qui a réduit très sensiblement l’intervention de l’IT, de plusieurs dizaines d’heures en moyenne à moins d’une heure. Au-delà des aspects techniques gérés dans GTM, le suivi Analytics d’un site média avec les méthodes Enhanced Ecommerce est un must have, tant la lecture des performances de chaque attribut des contenus-produits est simplifiée, cohérente et unifiée dans les rapports e-commerce Google Analytics.
[su_pullquote]
[/su_pullquote]
À travers deux articles, je vais expliquer dans les grandes lignes mon approche pour mettre en oeuvre le tracking Enhanced Ecommerce Google Analytics d’un site média avec Google Tag Manager (sans IT). Dans cet article, je vais me concentrer sur la planification des mesures Enhanced Ecommerce des contenus et l’implémentation avec Google Tag Manager des dataLayer Enhanced Ecommrce « impressions » et « productClick » des listes d’article. Dans un second article à venir, je me concentrerais sur les dataLayer Enhanced Ecommerce « detail », « add », « checkout » et « purchase ».
Pour illustrer le sujet, je vais utiliser au hasard, un super site de contenu Analytics, formations-analytics.com, mon nouveau site d’informations et de formation Analytics. Welcome here !
Planification des mesures « Enhanced Ecommerce » des articles du site « formations-analytics.com ».
Quelle équivalence entre les produits Enhanced Ecommerce et les articles Média ?
Le but est de tracker les articles comme comme des produits, en faisant correspondre les attributs produit avec des attributs articles utiles. Un attribut utile est une variable qu’on va pouvoir analyser pour déterminer à quel point elle affecte les performances. Ainsi vous serez en mesure d’améliorer vos performances en exploitant au mieux ces insights.
Exemples de correspondance des attributs produit/article (post) :
- nom du produit = nom du post,
- id produit = id du post,
- marque produit = auteur du post,
- categorie produit = catégorie du post,
- prix produit = durée de lecture,
- variant produit = date publication du post.
En termes de dataLayer, voici à quoi ressemblera l’objet produit avec ses propriétés.
products = [{ 'name':{{post_title}}, 'id':{{post_id}}, 'brand':{{post_author}}, 'category':{{post_cateogry}}, 'price':{{post_timetoRead}}, 'variant':{{post_date}} }]
Important, afin d’avoir un reporting e-commerce cohérent dans Google Analytics, il est crucial de mesurer les produits avec les mêmes attributs d’un bout à l’autre de l’expérience produit, de l’impression dans une liste, jusqu’à la transaction en passant par l’ajout au panier…
Quelle équivalence entre le comportement d’achat Enhanced Ecommerce et celui d’un site Média ?
Il existe quelques mesures Enhanced Ecommerce clés relatives à l’expérience produit et aux comportements d’achat dont il faut trouver une équivalence dans le tracking d’un site media.
Exemples de correspondance des actions d’achat produit/article (post) :
- Produit imprimé dans une liste = article affiché dans une liste.
- Produit cliqué dans une liste pour accéder aux détails = article cliqué dans une liste pour accéder aux détails .
- Produit vu = Article vu.
- Produit ajouté au panier = 25% d’article lu (scrolldepth > 25%, car mes articles sont plutôt longs).
- Produit supprimé du panier = aucune mesure.
- Produit entré dans le checkout = 50% d’article lu (scrolldepth > 50%).
- Produit acheté = 100% d’article lu ET durée lecture > à 80% de la durée de lecture estimative.
Implémentation des mesures « Enhanced Ecommerce » des articles du site « formations-analytics.com ».
Maintenant que nous avons planifié les futures mesures des articles, il faut voir comment les mettre en place. Pour avoir une idée assez précise des étapes d’intégration de l’e-commerce amélioré, je vous recommande de consulter l’article :
https://www.formations-analytics.com/google-analytics/google-analytics-comment-integrer-e-commerce-ameliore-avec-google-tag-manager/
Pour tracker les contenus Enhanced Ecommerce avec Google Tag Manager, il y a deux tactiques différentes :
- Intégrer les dataLayers EE directement sur le site, puis configurer Google Tag Manager pour reporter les mesures Enhanced Ecommerce. Il s’agit de l’approche standard, car c’est la plus simple (et la plus longue) ou la seule possible selon la complexité des données à tracker. Pour suivre cette approche, il suffit de bien définir les attributs du produit/contenu (disponible à travers tout le site) ainsi que les correspondances des actions d’achats Enhanced Ecommerce. Une fois ces éléments clairement définis, spécifiez les dataLayers Enhanced Ecommerce dans un plan de taggage à communiquer à votre IT pour intégration. Assurez-vous de la qualité de l’intégration en reproduisant les mesures et en comparant les résultats avec ce qui a été planifié (Google Analytics – méthodes et outils pour valider vos tags GA).
- Tracker et configurer les données directement depuis Google Tag Manager en scrapant les infos de la page active. C’est cette deuxième approche que je vais essayer d’expliquer dans le reste de l’article.
Comment récupérer des infos directement dans la page active pour configurer des mesures Enhanced Ecommerce ?
Configurer les mesures Enhanced Ecommerce directement depuis Google Tag Manager, c’est assez complexe à expliquer tant les sites sont différents, mais voici les principales étapes à mettre en oeuvre :
1 – Déterminer les types de pages qui affichent des articles/produits et les marqueurs qui permettent de les identifier depuis Google Tag Manager.
Sur formations-analytics.com par exemple j’ai 4 pages types « home », « home blog », « category » (liste d’articles) et « product » (article).
Pour les identifier dans Google Tag Manager, dans la plupart des cas, vous aurez à conditionner des variables URL (le marqueur de la page type est dans l’URL) ou DOM (le marqueur de la page type est dans le DOM) .
Exemple sur formations-analytics.com :
- variable DOM « page_home » [CSS Selector] = body.home, (signifie class « home » dans la balise body = <body class= »home »>)
- variable URL « page_home_blog » [Page Path] = /blog-analytics/,
- variable DOM « pages_category » [CSS Selector] = body.category,
- variable DOM « pages_product » [CSS Selector] = body.single,
Ici, vous pouvez créer directement vos déclencheurs à partir des éléments DOM. Sur formation-analytics.com, j’ai créé une variable « page_type » qui retourne le type de la page active. L’avantage, en plus de pouvoir créer des déclencheurs, c’est que la variable peut être utilisée pour reporter le type de page dans une dimension personnalisée. Une information importante pour analyser l’usage et performance des templates.
function(){ var home = document.querySelector('body.home'); var home_blog = ({{Page Path}} == '/blog-analytics/') ? true : false; var pages_category = document.querySelector('body.category'); var pages_product = document.querySelector('body.single'); if(home){ return 'home'; } else if(home_blog){ return 'home_blog'; } else if(pages_category){ return 'pages_category'; } else if(pages_product){ return 'pages_product'; } }
2 – Construire le dataLayer Enhanced Ecommce par type de page.
C’est certainement la partie la plus croustillante, la plus complexe, mais qu’on ne peut économiser.
Un dataLayer est un tableau JavaScript qui stocke des objets (ex page:) avec leurs propriétés (paire de variable-valeur ex. ‘page_type’:’category’).
Il y a deux type de dataLayer, le dataLayer d’impression qui est déclenché au chargement de la page et le dataLayer d’action qui déclenché lors d’une interaction.
Si cela vous semble flou ou que vous ne connaissez pas les dataLayers, je vous recommande fortement de consulter l’article suivant avant d’aller plus loin :
https://www.formations-analytics.com/google-analytics/guide-complet-configurer-google-tag-manager-google-analytics/#comprendre-datalayer-gtm
3 – Collecte des métadonnées Article pour alimenter le dataLayer EE Impression.
L’heure est venue de passer à la pratique. L’objectif est de collecter les métadonnées EE des articles affichés sur une page type puis de les intégrer dans un dataLayer d’impression Enhanced Ecommerce.
Pour illustrer mon approche, je vais me concentrer sur le tracking des articles affichés sur la home page de www.formations-analytics.com. Il suffira d’adapter cette approche pour les pages de votre site.
Principales étapes pour collecter dynamiquement les attributs de chaque article listé sur une page.
- Identifier et collecter les blocs DOM qui contiennent toutes les données de chaque article.
- Identifier les attributs de chaque black article pour construire l’objet produit.
- Construire le dataLayer Enhanced Ecommerce d’Impression.
Identifier et collecter les blocs article dans le DOM qui regroupent les métadonnées de chaque article.
Sur la home et partout sur formations-analytics.com, les extraits articles sont encapsulés dans l’élément DOM « article ».
Que devez-vous faire pour collecter les blocs articles de chaque page dans Google Tag Manager ?
Créer une variable DOM type CSS Selector avec la valeur « article ». Oui, mais cela fonctionnera uniquement pour les blocs articles disponibles au moment du chargement de la page. Pour mettre à jour et manipuler la liste des blocs articles d’une page, c’est plus simple d’y faire référence dans un script via la méthode document.querySelectorAll(« article »). C’est cette approche que nous allons exploiter dans notre approche.
Création du JavaScript pour créer les dataLayer Enhanced Ecommerce des contenus imprimés.
1 – Créez les déclencheurs correspondant aux pages types d’impression d’articles. Sur formations-analytics.com, voici à quoi ressembleraient les déclencheurs.
- Déclencheur GTM « home » = variable DOM « page_home » [CSS Selector] = body.home, (signifie class « home » dans la balise body = <body class= »home »>) ou {{Page Path}} [regex match] = ^/$.
- Déclencheur GTM « home-blog » = variable URL « page_home_blog » [Page Path] = /blog-analytics/.
- Déclencheur GTM « category » = variable DOM « pages_category » [CSS Selector] = body.category.
- Déclencheur GTM « article » = variable DOM « pages_product » [CSS Selector] = body.single.
2 – Créez une balise HTML et nommez-la « HTML EE articles list ». Déclencher la balise sur les pages qui listent des articles, ici les pages home, home-blog et category.
3 – Initions le code de la balise « HTML EE articles liste » pour configurer le dataLayer Enhanced Ecommerce Impression :
<script> var productsList = document.querySelectorAll("article.post-showtype"); try{ console.log (productsList[0]); } catch(e){ console.log(e) } </script>
Quelques explications sur le JavaScript.
- var productsList : créer une variable nommée productslist » qui va stocker dans un tableau tous les nodes articles (« bloc « div » ou « li » regroupant tous les attributs d’un article ») de la page active. Les pages actives sont définies par les déclencheurs, ici les listes articles de la home, home-blog et category.
- document.querySelectorAll(« article.post-showtype ») : méthode qui permet de récupérer et stocker dans un tableau tous les éléments « <article class= »post-showtype » /> » présents dans le DOM de la page active.
- console.log(productsList[0]) : permets d’afficher dans la Console Javascript du navigateur (CTR+MAJ+I ou F12 ou clic droit sur la page + explorer + onglet console) le premier élément stocké dans le tableau de la variable « productsList ». L’index des tableaux JavaScript commence toujours par 0, donc productsList[0]) = 1er bloc article; productsList[1]) = 2e bloc article, productsList[2]) = 3e bloc article, etc.
L’utilisation de la méthode console.log(n) est très utile pour vérifier la valeur d’une variable. - Try Catch permet de capter les erreurs JavaScript et de les notifier dans la console JavaScript du navigateur. Utile par exemple pour contrer les erreurs JavaScript « undefined » dans le cas où sur la page active il n’y pas d’élément « <article /> ».
A ce stade, nous collectons l’ensemble des nodes article de la page active. Il faut améliorer notre script pour extraire les métadonnées de chaque article avant de les intégrer dans le dataLayer Enhanced Ecommerce Impression.
<script> var productsList = document.querySelectorAll("article.post-showtype"); var post_title = []; var post_id = []; var post_author = []; var post_category = []; var post_timetoRead = []; var post_date = []; try{ for(var i=0; i < productsList.length ; i+=1 ) { post_title[i] = productsList[i].children[2].children[0].innerText; post_author[i] = productsList[i].children[2].children[1].innerText; post_date[i] = productsList[i].children[2].children[2].innerText; post_timetoRead[i] = productsList[i].children[2].children[3].innerText; post_id[i] = productsList[i].id; post_category[i] = productsList[i].children[4].innerText; console.log(post_title[i]+" "+post_author[i]+" "+post_date[i]+" "+post_timetoRead[i]+" "+post_id[i]+" "+post_category[i]) } } catch(e){ console.log(e) } </script>
Quelques explications complémentaires sur le JavaScript.
- var post_abc = [] : variables qui vont stocker dans un tableau (=[]) les attributs de chaque article.
- for(var i=0; i < productsList.length ; i+=1 ) : itération des nodes articles pour récupérer et stocker dans les variables post_abc les attributs de chaque article. Il s’agit d’une boucle FOR qui permet d’exécuter par itération le code qu’elle contient jusqu’à ce que la condition soit réalisée. La condition est souvent basée sur l’incrémentation d’un variable (‘i’) jusqu’à atteindre un seuil, ici le nombre de nodes article stocké dans le tableau productsList.
- « productsList[i].children[2].children[0].innerText » : il s’agit de chemin CSS Selector pour atteindre les métadonnées de chaque bloc article. L’élément productsList[n], correspond à la racine du chemin. a partir duquel on va naviguer dans le DOM pour récupérer l’information recherchée.
Nous nous rapprochons de la fin de ce script. Maintenant nous allons formater les variables.
var productsList = document.querySelectorAll("article.post-showtype"); var post_title = []; var post_id = []; var post_author = []; var post_category = []; var post_timetoRead = []; var post_date = []; try{ for(var i=0; i < productsList.length ; i+=1 ) { post_title[i] = productsList[i].children[2].children[0].innerText.toLowerCase(); post_author[i] = productsList[i].children[2].children[1].innerText.toLowerCase(); post_date[i] = productsList[i].children[2].children[2].innerText.toLowerCase(); post_timetoRead[i] = parseInt(productsList[i].children[2].children[3].innerText.split(" ")[1]); post_id[i] = productsList[i].id; post_category[i] = productsList[i].children[4].innerText.toLowerCase(); console.log(post_title[1]+" "+post_author[1]+" "+post_date[1]+" "+post_timetoRead[1]+" "+post_id[1]+" "+post_category[1]) } } catch(e){ console.log(e) }
Quelques explications complémentaires sur le JavaScript.
Au bout de la plupart des variables post_abc, j’ai ajouter une méthode JavaScript pour retraiter leur valeur.
- toLowerCase() : fonction qui permet de convertir une chaîne de caractère en minuscule (toUpperCase() pour faire le contraire).
- parseInt() : fonction qui permet de convertir une chaîne de caractère en entier.
- str.split(« séparateur ») : retourne dans un tableau, les portions de la chaîne « str » délimitée par [séparateur].
Par exemple :- post_timetoRead = ‘- 8 minutes’.
- post_timetoRead.split(‘ ‘) = [‘-‘, ‘8’, ‘minutes’].
- post_timetoRead.split(‘ ‘)[1] = 8 (deuxième élément du tableau qui commence par 0)
Maintenant que nous avons les données en bonne et due forme, il nous reste à les injecter dans un dataLayer Enhanced Ecommerce Impression.
var productsList = document.querySelectorAll("article.post-showtype"); var post_title = []; var post_id = []; var post_author = []; var post_category = []; var post_timetoRead = []; var post_date = []; var products = []; try{ for(var i=0; i < productsList.length ; i+=1 ) { post_title[i] = productsList[i].children[2].children[0].innerText.toLowerCase(); post_author[i] = productsList[i].children[2].children[1].innerText.toLowerCase(); post_date[i] = productsList[i].children[2].children[2].innerText.toLowerCase(); post_timetoRead[i] = parseInt(productsList[i].children[2].children[3].innerText.split(" ")[1]); post_id[i] = productsList[i].id; post_category[i] = productsList[i].children[4].innerText.toLowerCase(); products[i] = {'name':post_title[i],'category':post_category[i],'brand':post_author[i],'price':post_timetoRead[i],'variant': post_date[i],'list':{{page_type}},'position':i+1}; } window.dataLayer = window.dataLayer || []; dataLayer.push({ 'event':'product_impression', 'ecommerce': { 'impressions': products } }); } catch(e){ console.log(e) }
Le dataLayer Enhanced Ecommerce d’impression des listes d’articles est opérationnel sur l’ensemble des pages types home, home-blog, category et sur l’ensemble des pages qui listes des articles structurés de la même manière.
La magie des Custom data Attributes.
Maintenant, on va créer custom data attributes (HTML5) pour intégrer dans chaque node article imprimé ses attributs. Un marquage dynamique qui va faciliter la construction du dataLayer Enhanced Ecommerce Click, en récupérant directement les attributs de l’article cliqué. Ainsi pas d’erreur possible entre le matching des attributs produit imprimé et cliqué.
<script> var productsList = document.querySelectorAll("article.post-showtype"); var post_title = []; var post_id = []; var post_author = []; var post_category = []; var post_timetoRead = []; var post_date = []; var listName= {{page_type}}; var products = []; try{ for(var i=0; i < productsList.length ; i+=1 ) { post_title[i] = productsList[i].children[2].children[0].innerText.toLowerCase(); post_author[i] = productsList[i].children[2].children[1].innerText.toLowerCase(); post_date[i] = productsList[i].children[2].children[2].innerText.toLowerCase(); post_timetoRead[i] = parseInt(productsList[i].children[2].children[3].innerText.split(" ")[1]); post_id[i] = productsList[i].id; post_category[i] = productsList[i].children[4].innerText.toLowerCase(); products[i] = {'name':post_title[i],'category':post_category[i],'brand':post_author[i],'price':post_timetoRead[i],'variant': post_date[i],'list':listName,'position':i+1}; productsList[i].setAttribute("data-gtm-list", listName); productsList[i].setAttribute("data-gtm-pos", i+1); productsList[i].setAttribute("data-gtm-post-cat", post_category[i]); productsList[i].setAttribute("data-gtm-post-title", post_title[i]); productsList[i].setAttribute("data-gtm-post-author", post_author[i]); productsList[i].setAttribute("data-gtm-post-duration", post_timetoRead[i]); productsList[i].setAttribute("data-gtm-post-date", post_date[i]); productsList[i].className += " viewed"; } window.dataLayer = window.dataLayer || []; dataLayer.push({ 'event':'product_impression', 'ecommerce': { 'impressions': products } }); } catch(e){ console.log(e) } </script>
Quelques explications complémentaires sur le JavaScript.
Dans chaque node article, on ajoute plusieurs attributs.
- productsList[i] – dans le node de l’article « n ».
- setAttribute(« data-gtm-post-cat », post_category[i]) – ajouter un attribut « data-gtm-post-cat » avec la valeur « post_category de l’article n »
Création du JavaScript pour créer les dataLayer Enhanced Ecommerce des contenus cliqués.
La mesure des impressions sans les clics c’est comme un gland sans Scrat, c’est beaucoup moins drôle. Il est temps de s’intéresser aux clics Enhanced Ecommerce avec Google Tag Manager. La mise en oeuvre du suivi des clics Enhanced Ecommerce est plutôt simple, car nous avons fait l’effort d’intégrer les attributs produit dans chaque article imprimé dans une liste. Dans GTM tout commence par un déclencheur.
1 – Créez un ou plusieurs déclencheurs pour tracker dans le liste articles, les clics sur les liens pointant vers la page article. Sur formations-analytics.com, il s’agit de suivre les clics sur les titres et visuel des nodes article.
- Déclencheur GTM « EE product click » = Click « All Elements » [CSS SELECTOR] = « .post-showtype .feature-image , .post-showtype .post-title a ».
- .post-showtype .feature-image = déclencher le tag si clics sur un élément du DOM qui contient la class .feature-image (le visuel) contenu dans un élément avec la class .post-showtype (le node article).
- , = OU en CSS SELECTOR.
- .post-showtype .post-title a = déclencher le tag si clics sur un <a /> contenu dans un élément avec la class .post-title (le titre), contenu dans un élément avec la class .post-showtype (le node article).
2 – Créez une balise HTML et nommez la « HTML EE articles list click » associée au déclencheur « EE product click ».
3 – Créer le code de la balise « HTML EE articles liste » pour configurer le dataLayer Enhanced Ecommerce Click.
<script> var data_gtm = {{Click Element}}.parentNode.parentNode.parentNode; var listName = data_gtm.attributes['data-gtm-list'].value; var position = data_gtm.attributes['data-gtm-pos'].value; var product_cat = data_gtm.attributes['data-gtm-post-cat'].value.trim(); var product_title = data_gtm.attributes['data-gtm-post-title'].value; var product_author = data_gtm.attributes['data-gtm-post-author'].value; var product_duration = parseInt(data_gtm.attributes['data-gtm-post-duration'].value); var product_date = data_gtm.attributes['data-gtm-post-date'].value; //console.log("listName "+listName+" "+position+" "+product_cat+" "+product_title+" "+product_author+" "+product_duration+" "+product_date); var products = []; products[0] = {'name':product_title,'category':product_cat,'brand':product_author,'price':product_duration,'variant': product_date,'position':parseInt(position)}; dataLayer.push({ 'event': 'product_click', 'ecommerce': { 'click': { 'actionField': {'list': listName}, 'products': products } } }); </script>
Quelques explications complémentaires sur le JavaScript.
En résumé, le script à partir de l’élément cliqué {{Click Element}} on pointe le node article où sont stocké les attributs, qu’on stocker dans des variables qui seront utilisées pour construire le tableau product utilisé dans le dataLayer Enhanced Ecommerce Click.
- var data_gtm fait référence au chemin des attributs article du node cliqué.
- var listName, position, product_abc stocke l’attribut correspondant à partir de la var data_gtm.
- var product = [] = création d’un tableau
- var product[0] = dans lequel on stocke un seul item, l’objet Enhanced Ecommerce Product recomposé à partir des variables attributs.
- dataLayer.push({…}) = structure d’un dataLayer Enhanced Ecommerce Click dans lequel on intègre les variables listname et products.
À partir de là vous avez les infos disponibles dans la couche de données pour configurer vos balises Enhanced Ecommerce d’impression et de clics dans Google Tag Manager. Un doute sur la configuration des balises E-commerce Amélioré ?
https://www.formations-analytics.com/google-analytics/google-analytics-comment-integrer-e-commerce-ameliore-avec-google-tag-manager/
Voilà, le mariage impression/click article a été célébré et moult fois consommé. Ils eurent de nombreux enfants Detail, AddToCart, Checkout et Purchase, que j’aurais l’honneur de vous présenter dans un prochain article.