Créer un ID de session unique dans Google Tag Manager

Créer un ID de session unique dans Google Tag Manager

Au cours de ce post nous allons apprendre à créer une variable unique de session dans Google Tag manager, en utilisant deux macros et une astuce vieille comme le web : déposer un cookie en JavaScript. Vous allez me dire “quelle utilité ?” Il peut y en avoir plein, mais je vais vous donner un cas précis qui m’est arrivé : dans le cadre d’une campagne de display DoubleClick, l’agence média avec laquelle je travaillais avait besoin de faire remonter une variable de session pour dé-dupliquer ses conversions. Un tag FloodLight (le type de tag utilisé par DoubleClick) peut être configuré de trois manières : soit au niveau hit, soit au niveau session, soit au niveau utilisateur. Dans le premier et le dernier cas, tout se fait sans encombre, mais dans le cas de la session, il faudra renseigner un paramètre unique par session.

Dans ce cas, et comme c’est souvent le cas en agence, je ne pouvais pas compter sur le support de l’IT étant donné qu’ils étaient débordés à finaliser le projet en urgence et que le tracking n’est évidemment pas la priorité. Etant habitués à ce genre de situation, les analystes en agence ont pris pour habitude de mettre en place un outil de Tag Management comme Google Tag Manager (GTM) sur tous leurs projets pour être indépendants au niveau de l’implémentation de leur tracking. Petite précision pour ceux qui auraient peur de la démonstration à venir : je suis moi-même une énorme quiche en JavaScript et en JQuery, ce qui compte ici (et dans le reste de la série Google Tag Manager Pour Les Quiches) ce n’est pas d’être bon techniquement, mais d’être futé.

Pour répondre à cette problématique, j’ai procédé en trois étapes  :

1 – Créer une macro de nombre aléatoire

2 – Créer un tag en custom HTML pour déposer un cookie

3 – Créer la macro first party cookie pour alimenter le tag DoubleClick

1 – Créer une macro de nombre aléatoire

On y va doucement et on commence par le plus simple : créer une macro de type “random number”. A vrai dire, je ne voyais pas l’utilité de ce type macro avant d’être confronté à ce problème précis, si vous pensez à un autre usage, je suis curieux alors postez vos suggestions en commentaire. Là, on ne va pas chercher midi à 14h :

Le concept est simple, je crée une macro qui générera, dès qu’on le lui demande, un nouveau chiffre aléatoire compris entre 0 et 2147483647 (deux milliards quoi). Donc à moins d’avoir des millions de conversions sur votre site, vous êtes plutôt pépères (pour ceux qui se posent la question, il faudra un peu plus de 21 millions de sessions pour qu’on atteigne 1% de probabilité d’erreur).

Evidemment, pour ceux qui sont plus à l’aise avec le JS il y a plein de solutions pour créer une chaîne de caractères aléatoires en créant une var comprenant un ensemble de caractères possibles (nombres et lettres tant qu’à faire) puis en utilisant une fonction random quelque chose (genre Math.Random). Mais là, le but est d’aller au plus simple en utilisant les fonctions de bases de GTM.

2 – Tag Custom HTML : le cookie de session

Cette étape est un peu plus complexe (mais vraiment pas beaucoup). Ici il s’agit de connaissances basiques en JavaScript et d’utiliser une recette bien établie : déposer un cookie ne contenant qu’une valeur. Vous l’aurez compris, cette valeur sera générée par la macro précédente. Le code est ci-dessous, je vous explique tout après :

<script>
if (typeof({{FL - Session}}) == "undefined") {
  var d = new Date();
  d.setTime(d.getTime()+1800000);
  var expires = "expires="+d.toGMTString();
  document.cookie = "idsession={{FL - Unique ID}}; "+expires+"; path=/";
}
else {}
</script>

codeyolo

En français ça donne ça :

– Cherche la valeur du cookie dont le nom est idsession. Ici j’appelle la macro {{FL – Session}} qui contient la valeur du cookie, vous comprendrez après.

– Si cette valeur n’existe pas (vérifié par == “undefined”), donc que le cookie n’existe pas encore, dépose le.

– Ce cookie contiendra deux paramètres importants :

– Un chiffre aléatoire, généré par la macro {{FL – Unique ID}} qu’on vient de créer

– Il expirera au bout de 1.800.000 milli-secondes, soit 30 minutes (tout comme ce bon vieux cookie de session utm_b pour Google Analytics). Pour cette partie, on récupère l’heure du dépôt du cookie avec la fonction toGMTString().

3 – Créer une macro first party cookie pour faire remonter l’ID de session dans le Tag DoubleClick

Dernière ligne droite, il suffit de créer la fameuse macro qui ira chercher la variable dans le cookie que vous venez de déposer et alimenter vos tags DoubleClick. Les macros de first party cookie remontent dès qu’elles sont appelées la valeur que vous avez préalablement déposée.

Dans ce cas, mon cookie idsession contient l’ID unique. Nous allons appeler cette macro {{FL – Session}} (pour info, toutes mes macros en rapports avec ces tags comporte la mention FL pour FloodLight). Vous l’aurez remarqué, cette macro était justement appelée dans l’étape de vérification de la valeur du cookie dans le tag custom. Donc, pour renseigner cet ID unique dans mon tag DoubleClick, il suffira de l’ajouter dans la configuration du dit tag. Dans mon cas, cet ID devait remonter dans une variable nommée U6 (les tags doubleclick peuvent posséder 19 variables U). Cependant, il semble aussi possible de renseigner un paramètre nommé “Per session” dans ce type de tag, cf ci-dessous :

Si c’est votre cas, vous renseignerez la macro {{FL – Session}} à cet endroit là. Dans, mon cas, voici la configuration :

Et c’est aussi simple que ça. Pas de data layer, pas de problème de variable persistante, juste un cookie classique pour régler vos soucis.

Si vous avez des questions, surtout n’hésitez pas à laisser un commentaire ou à me contacter sur Google +, Twitter etc. Je vais essayer de faire ce genre de tuto de manière assez régulière, donc si vous êtes confrontés à un problème de tagging récurrent que vous voulez régler avec GTM, n’hésitez pas à me suggérer un sujet pour le prochain épisode de GTM Pour Les Quiches.

Liens pratiques :

http://www.jshint.com/ Parfait pour tester son JS et identifier des problèmes basiques.

Sources :

La base sur les cookies JS

Un très bon article de Simo Ahava qui m’a bien servi

Culture générale :

Pourquoi 2147483647 ?

Remerciements :

Jean Baptiste Gabellieri pour m’avoir suggéré la solution

Samuel Péan pour avoir décelé une erreur grossière de “}” dans mon code de base

Par

Docteur ès lolcats et Web Analyste en agence. Il partage sa veille Analytics, UX, Dataviz et autres conneries sur @fredserval