Comment afficher les variables du datalayer dans une pop-in ?


Pour être efficace et faciliter le travail de recette du tracking,

Il est pratique de pouvoir afficher en 1 seul clic les variables du dataLayer à recetter.

Cela évite de passer par la console du navigateur (plus de clics et d'actions pour accéder aux informations).

Pour cela, l'astuce est de créer un favori sur lequel on cliquera pour voir le datalayer avec les variables souhaitées. Ce favori va executer un code javascript affichant les informations dans une pop-in.

La pop-in peut etre generée à l'aide de la librairie jquery-ui.

Ci-dessous un exemple s'appliquant au DataLayer du site fnac.com.
Le favori est à créer de la même facon que n'importe quel favori à ajouter au navigateur. Il suffit juste de remplacer l'URL par le code javascript en commanceant par le libellé "javascript:"

Ci-desssous un exemple du code à copier-coller pour une pop-in correspondant au dataLayer du site fnac.com (le dataLayer est dans l'objet window.tc_vars):

javascript:

var dialog_jquery = document.createElement("script");
dialog_jquery.src = "https://code.jquery.com/jquery-1.12.4.js";
document.body.appendChild(dialog_jquery);

var dialog_jquery_ui = document.createElement("script");
dialog_jquery_ui.src = "https://code.jquery.com/ui/1.12.1/jquery-ui.js";
document.body.appendChild(dialog_jquery_ui);

var dialog_jquery_ui_css1 = document.createElement("link");
dialog_jquery_ui_css1.setAttribute("rel", "stylesheet");
dialog_jquery_ui_css1.href = "https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css";
document.body.appendChild(dialog_jquery_ui_css1);

var version = 'DataLayer_Check_v2019';

var a = '';
if (typeof window.tc_vars === 'undefined') {
  a += 'Pas de variable window.tc_vars'
} else {
  a += 'Environnement = ';
  a += (typeof window.tc_vars.environment !== 'undefined' ? window.tc_vars.environment : '');
  a += '
';
  a += 'pays = ';
  a += (typeof window.tc_vars.env_country !== 'undefined' ? window.tc_vars.env_country : '');
  a += '
';
  a += 'arbo_niv1 = ';
  a += (typeof window.tc_vars.arbo_niv1 !== 'undefined' ? window.tc_vars.arbo_niv1 : '');
  a += '
';
  a += 'arbo_niv2 = ';
  a += (typeof window.tc_vars.arbo_niv2 !== 'undefined' ? window.tc_vars.arbo_niv2 : '');
  a += '
';
  a += 'page = ';
  a += (typeof window.tc_vars.page_name !== 'undefined' ? window.tc_vars.page_name : '');
  a += '
';
  a += 'template = ';
  a += (typeof window.tc_vars.template_name !== 'undefined' ? window.tc_vars.template_name : '');
  a += '
';
  }

function createDialog(title, text) {
  return $("

<div class='dialog' title='" + title + "'>

" + text + "
</div>


").dialog(
  {
    width: 800,
    height: 500,
 	});
}
createDialog(version, a);

x = document.querySelectorAll(".ui-front");
for(var i=0; i<x.length ; i++){
x[i].style.zIndex = 6000000000;
}

En cliquant sur le favori quand la page à recetter est chargée, une pop-in s'affiche alors.

fnac_datalayer

 

0.00 avg. rating (0% score) - 0 votes

Laissez un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *