Stocker / sauvegarder les UTMs et autres liens de tracking dans un cookie

J’ai récemment été amené à développer un cookie pour sauvegarder mes liens de tracking et UTMs (suivi Google Analytics). Au départ, je me confrontais à un problème technique qui ne me permettait pas de suivre mes campagnes marketing. J’ai finalement créé un super outil d’analyse qui me permettait de suivre tout le cheminement de mes clients avant leur achat final.

Il y a peu, j’ai rencontré un problème dans le tracking de mes campagnes marketing. Je travaillais depuis peu avec une application tierce et je ne pouvais pas suivre une action sur mon site web. J’utilise Google Analytics et normalement, j’aurais du créer un événement sur google analytics ou sur Google Tag Manager. Cependant, il est très difficile de détecter ce qui se passe sur une balise <iframe>. Effectuer un suivi sur google analytics était pour moi un enjeu crucial : mesurer mon ROI (retour sur investissement). Cela me permettrait d’investir plus ou moins dans une campagne adwords, de mieux connaître l’efficacité de mes campagnes emailing ou encore la pertinence de mes partenaires.

Ma démarche avant de créer le cookie

Il est important de connaître toutes les variables d’un projet avant de se lancer dans le développement d’un programme. Ma première démarche a donc été de contacter le prestataire qui avait développé l’application tierce que j’utilisais sur mon site web. Par chance c’était une startup française et je n’ai pas eu de mal à rentrer en contact avec elle. J’ai discuté avec eux du moyen de suivre mes campagnes adwords (mais aussi de connaitre l’efficacité de toutes mes autres campagnes). Le prestataire m’a clairement dit qu’il était difficile de suivre les événement sur un iframe et qu’il n’y avait pas de solution évidente pour suivre la source de ses campagnes.

Je n’avais encore jamais créé de cookie et j’ai donc cherché un moyen simple pour faire cette opération. J’ai décidé de créer mon cookie avec la librairie JS Cookie (Lire le tutoriel). Pensez donc bien à appeler cette librairie sur votre page web !

J’ai ensuite décomposé le projet par étapes :

• Récupérer les paramètres d’url de chaque visiteur de mon site
• Si l’url contient des paramètres, je paramètre mon cookie. Sinon,ne rien faire.
• Si le cookie contient déjà des paramètres d’url différents de mes nouveaux paramètres, je veux les cumuler.
• Récupérer et utiliser les données stockées par mon cookie

Je décide de stocker mes paramètres dans un objet en JavaScript, qui me permet de manipuler une association de noms et valeurs. Ainsi, chaque visiteur (qui a cliqué sur les liens de mes campagnes emailing ou adwords…) va stocker ces informations de tracking. Voici un exemple de ce que pourra stocker mon cookie :

{ source : pub3-lien2-twitter , medium : adword-email-social , campaign : ma_campagne }

Récupérer les paramètres d’url en JavaScript

Il s’agit d’une fonction basique en JS. Ici, je vais récupérer3 paramètres d’urls qui correspondent aux UTMs source, medium et campaign. Si ces paramètres d’url n’existent pas dans mon url, aucun soucis, ma variable restera vide.

// Récupère les paramètres de l'url 
function getParameter(theParameter) {
  var params = window.location.search.substr(1).split('&');
  for (var i = 0; i < params.length; i++) {
    var p=params[i].split('=');
     if (p[0] == theParameter) {
      return decodeURIComponent(p[1]);
    }
  }
  return false;
}
url_src = getParameter('utm_source');
url_mdm = getParameter('utm_medium');
url_cpn = getParameter('utm_campaign');

Paramétrer mon cookie en fonction des informations récupérées

Je choisis de nommer mon cookie cookie_utms et de le créer pour une durée de 120 jours. Mais avant cela, je dois faire face à 3 conditions :

• Les paramètres d’url sont présents et le cookie n’existe pas encore (je vais créer un cookie)
• Les paramètres d’url sont présents et le cookie existe (je vais récupérer les valeurs du cookie et y ajouter mes nouvelles valeurs)
• Les paramètres d’url n’existent pas (ne rien faire)

// je récupère les données de mon cookie (s'il existe déjà) et je crée un objet pour stocker mes nouvelles valeurs
var pepites = new Object();
var pate_cookie = Cookies.get('cookie_utms');

// si on a au moins un utm et le cookie n'existe pas
if((url_src!== false || url_mdm!==false || url_cpn!==false) && (pate_cookie == null || pate_cookie == "" )) {
  if(url_src!== false){ 
    pepites["source"] = url_src; 
  }
  if(url_mdm!==false){
    pepites["medium"] = url_mdm; 
  }
  if (url_cpn!==false) {
    pepites["campaign"] = url_cpn;
  }
  Cookies.set('cookie_utms', pepites, { expires: 120 } );
}

// sinon si on a au moins un utm et le cookie existe
else if((url_src!== false || url_mdm!==false || url_cpn!==false) && (pate_cookie != null || pate_cookie != "")) {
  pate_cookie_choco = JSON.parse(pate_cookie);


  if(pate_cookie_choco["source"] != undefined) {
    if(url_src!== false && pate_cookie_choco["source"].indexOf(url_src) != -1 ){
      pepites["source"] = pate_cookie_choco["source"]; 
    }
    else if(url_src!== false){
    pepites["source"] = pate_cookie_choco["source"]+"-"+url_src; 
    }
    else if ( url_src == false && pate_cookie_choco["source"] != undefined) { 
    pepites["source"] = pate_cookie_choco["source"]; 
    }
  }									 
  else if ( url_src!== false ) { 
      pepites["source"] = url_src; 
  }

  if(pate_cookie_choco["medium"] != undefined) {
    if(url_mdm!== false && pate_cookie_choco["medium"].indexOf(url_mdm) != -1 ){
      pepites["medium"] = pate_cookie_choco["medium"];
    }
    else if(url_mdm!== false ) { 
    pepites["medium"] = pate_cookie_choco["medium"]+"-"+url_mdm; 
    }
    else if(url_mdm == false){
    pepites["medium"] = pate_cookie_choco["medium"]; 
    }
  }
  else if(url_mdm!== false){
    pepites["medium"] = url_mdm; 
  }

  if(pate_cookie_choco["campaign"] != undefined) {
    if(url_cpn!== false && pate_cookie_choco["campaign"].indexOf(url_cpn) != -1 ){
      pepites["campaign"] = pate_cookie_choco["campaign"];
    }
    else if(url_cpn!== false) { 
    pepites["campaign"] = pate_cookie_choco["campaign"]+"-"+url_cpn; 
    }  
    else if(url_cpn == false){
      pepites["campaign"] = pate_cookie_choco["campaign"]; 
    } 
  }
  else if(url_cpn!== false){
    pepites["campaign"] = url_cpn; 
  }
  Cookies.set('cookie_utms', pepites, { expires: 120 } );
}

Enfin, je récupère les données de mon cookie pour en faire ce dont j’ai besoin

Personnellement, j’ai besoin de passer ces valeurs dans l’url d’un iframe contenant un formulaire d’inscription.

// récupération des données du cookie sur sa page
var cookie = Cookies.get('cookie_utms');
if(cookie != undefined){
  cookie_choco = JSON.parse(cookie);
  cookie_src = cookie_choco["source"];
  cookie_mdm = cookie_choco["medium"];
  cookie_cpn = cookie_choco["campaign"];

  // il est maintenant possible d'utiliser les données de votre cookie comme bon vous semble :)
}

Voila 🙂 maintenant, c’est à vous de jouer ! Un tel cookie peut être paramétré pour récupérer n’importe quel paramètre d’url.

NB : Le stockage d’infos dans un cookie a ses limites, puisqu’un cookie ne peut pas dépasser 4Ko (selon le navigateur), soit environ 4000 caractères.

retrouvez tous les outils et ressources en liens avec ce tuto ...

Sources externes :

• Le code du cookie UTMs est sur Github

Technologies utilisées pour ce tuto :

Google analytics

JavaScript (JS)

Tutoriels en lien avec le sujet :

• Pré-remplir un champs de formulaire (input) avec JavaScript
• Créer un cookie simplement avec JS cookie