Chargement...

février 4, 2018

Monétiser votre web magazine grâce à la data : Mise en place technique Google Tag Manager

Vous souhaitez mieux monétiser votre audience ? Vous vous demandez comment mieux mesurer l’engagement de votre audience vis à vis de votre contenu ? Dans cet article, nous verrons comment adapter votre tracking afin de mieux connaitre votre audience, de mieux comprendre les usages de vos lecteurs, et surtout afin de mieux monétiser votre audience. 

 

Dans un précédent article nous avons fait une espèce de workshop où nous avions défini notre vision du contenu et de sa monétisation puis défini la stratégie que nous souhaitons mettre en place pour mieux mieux comprendre le comportement de nos lecteurs vis à vis du notre contenu. Nous avions également donner une valeur monétaire à notre contenu afin de pouvoir estimer le chiffre d’affaire que nous rapporte visiterlafrique. Ces éléments étant clairs, nous allons passer à la mise en place technique de notre stratégie. 

 

Mise en place Technique 

Nous aurons besoin des outils Google Tag Manager et Google Analytics. Nous mettrons en place un tracking commerce avancé sur le site afin de mesurer les performances des articles.

 

Vous pouvez trouver toutes les commandes nécessaires à l’implémentation du tracking « Enhanced Commerce » dans la documentation Google Analytics For Developers . Nous allons appliquer la même méthodologie en l’adaptant à notre problématique. Mais avant il faut que nous puissions collecter les informations via Google Tag Manager. 

 

Installation et configuration de Google Tag Manager 

Note : Nous allons poser Google Tag Manager (GTM) sur le site visiterlafrique.com en utilisant un plugin d’injection de code javascript sur le site. Notre tag n’est pas réellement posé sur le site. Le conteneur n’est seulement chargé que côté client sur notre navigateur. Ceci nous permettra de vérifier que nous collectons la bonne information et que nous la passons dans le bon hit vers Google Analytics.

Le plugin que nous allons utiliser est : TagManagerInjector . Il permet de simuler la pose du code d’un conteneur GTM sur un site côté client. Il suffit de créer votre conteneur puis de renseigner son ID dans le champ dédié et voilà! 

Nous avons créer notre conteneur GTM pour visiterlafrique, nous allons injecter le code dans le site. 

Maintenant que nous avons GTM posé sur le site, nous allons commencer à collecter la donnée qui nous intéresse. 

Dans un process de gestion de projet en Digital Analytics, le digital Analyst est censé transmettre au développeur front end un cahier de charge de tracking comprenant toutes les informations à faire remonter dans GTM via le dataLayer. Les développeurs se servent ensuite des données poussées sur le site par le serveur pour remplir le dataLayer de données. Il suffit ensuite d’activer le mode preview de GTM pour faire une recette au fur et à mesure que vous procéder à la collecte de données. 

 

Dans notre cas nous n’avons pas accès au serveur et n’avons éventuellement pas un dévelopeur sous la main pour mettre en place ce genre d’implémentation en PHP sous WordPress (visiterlafrique est sous wordpress). Nous allons donc faire du Dom Mapping. Nous allons directement aller chercher les informations dans les éléments HTML de la page du site en nous servant de javascript. 

 

Collecte de données. 

> Global Site 

Pour rappel ce que nous avons à peu près défini un le data model suivant : 

On souhaite pouvoir savoir quelle section du site est consulté par l’internaute, on va donc remonter une variable :
<> sectionType qui prendra du coup les valeurs (Home, Category Page, Article Page, Other Page)

 

On va remonter l’information de segment utilisateur : 

<> userSegment qui prendra la valeur par défaut « Visitor » 

 

Le code javascript suivant permet de collecter toutes cette information et de le pousser au dataLayer GTM.

 

> Article 

Sur une page article nous allons remonter les informations suivantes : 

 

<> articleID : ID de l’article 

<> articleName : Nom de l’article 

<> articleCategory  : Categorie de l’article

<> articleSubCategory : Sous Catégorie 

<> articleAuthor : Auteur de l’article 

 

Le code javascript suivant permet de collecter ces informations dans le code HTML du site , puis de le pousser au dataLayer GTM. 

 

<script>  
 if({{Page Path}}.split('/').length == 2) {
      var nav = "Home"; 
      var trigger = "Home"; 
      var Category ="HOME";
      var userSegment = "Visitor"; 

    } else if ({{Page Path}}.split('/').length == 3){
      var nav = "Category Page"; 
      var Category = {{Page Path}}.split('/')[1].toUpperCase();
      var trigger = "category_page"; 
      var pageName = document.title;
      var userSegment = "Visitor"; 

 
    } else if ({{Page Path}}.split('/').length == 4){
      var nav = "Category Page"; 
      var Category = {{Page Path}}.split('/')[1].toUpperCase();
      var SubCategory = {{Page Path}}.split('/')[2].toUpperCase();
      var trigger = "category_page"; 
      var pageName = document.title;
      var userSegment = "Visitor"; 
  

    } else if ( {{Page Path}}.split('/').length == 5){
      var nav = "Article Page"; 
      var Category = {{Page Path}}.split('/')[1].toUpperCase();
      var SubCategory = {{Page Path}}.split('/')[2].toUpperCase();
      var trigger = "article_page"; 
      var pageName = document.title;
      var userSegment = "Visitor"; 
      var userSegment = "Reader"; 
   

   } else if ({{Page Path}}.split('/').length == 6){
      var nav = "Article Page"; 
      var Category = {{Page Path}}.split('/')[1].toUpperCase();
      var SubCategory = {{Page Path}}.split('/')[2].toUpperCase();
      var SubSubCategory = {{Page Path}}.split('/')[3].toUpperCase();
      var trigger = "article_page";  
      var articleId = document.body.className.split(' ')[2]; 
      var author = document.getElementsByClassName('author-description')[0].textContent.trim().split('A propos')[1]; 
      var pageName = document.title;
      var userSegment = "Reader"; 
  

  } else if ( {{Page Path}}.split('/').length == 7){
      var nav = "Article Page"; 
      var Category = {{Page Path}}.split('/')[1].toUpperCase();
      var SubCategory = {{Page Path}}.split('/')[2].toUpperCase();
      var SubSubCategory = {{Page Path}}.split('/')[3].toUpperCase();
      var SubSubCategory_bis = {{Page Path}}.split('/')[4].toUpperCase();
      var articleId = document.body.className.split(' ')[2]; 
      var author = document.getElementsByClassName('author-description')[0].textContent.trim().split('A propos')[1];   
      var trigger = "article_page";
      var pageName = document.title;
      var userSegment = "Reader"; 
  
  
  } else {
     var trigger = "other_page"; 
     var pageName = document.title;
     var userSegment = "Visitor"; 
    
  }
  
    dataLayer.push({
        'pageType': nav,
        'cat': Category,
        'subCat': SubCategory,
        'subSubCat': SubSubCategory,
        'subSubSubCat': SubSubCategory_bis,
        'pagename': pageName,
        'articleId': articleId, 
        'author': author, 
        'userSegment':userSegment, 
        'event':trigger
    }); 
</script> 
  

 

Le code pousse les informations que nous avons collectés en javascript dans le dataLayer. Nous allons ensuite pouvoir pousser ces informations dans Google Analytics afin de mieux comprendre les performances du contenu et les intérêts des lecteurs. 

 

En activant l’outil de debugging de GTM, nous pouvons voir les informations bien poussées : 

 

> Exemple 1 

>Exemple 2

Note : Nous prenons soin également de remonter l’identifiant du cookie unique posé par Google Analytics dans le navigateur de l’internaute. Ceci nous permettra d’identifier vos meilleurs lecteurs et d’activer des campagnes de fidélisation. 

Dans un prochain article , nous verrons comment mettre en place le tracking Google Analytics qui nous permettra de remonter toutes les informations que nous collectons en javascript. 

 

 

 

Posted in WebAnalyticsTaggs:
Write a comment