9.3 Configuration des variables Google Tag Manager

Accédez à https://tagmanager.google.com/ et connectez-vous avec vos informations de connexion personnelles.

Après avoir créé et configuré la balise Google Analytics, nous sommes maintenant prêts à configurer les variables Google Tag Manager (comme les éléments de données que nous utilisons dans le lancement d’Adobe).

Dans l’interface utilisateur de Google Tag Manager, accédez à Variables. Vous verrez la liste des variables intégrées.

La première variable que nous devons ajouter est appelée customerEmail. Lorsqu’un client crée un profil sur le site Web de démonstration de la plate-forme, nous lierons l’adresse électronique du client à son profil client dans la plate-forme.
Sur le site Web de démonstration de la plate-forme, les informations sont souvent stockées dans localStorage. Pour y accéder, nous avons besoin d’un code JavaScript personnalisé pour renseigner la variable Google Tag Manager.

Dans la section Variables définies par l’ utilisateur, cliquez sur Nouveau:

Renommez d’abord "Variable sans titre" en un nom plus descriptif :

Cliquez ensuite dans la partie Configuration, ce qui vous permet de choisir un type de variable.

Choisissez celui-ci.

Il s’agit du code personnalisé à saisir dans l’écran ci-dessous :

function() {
  var email = localStorage.getItem("email");
  return email;
}

Donc après avoir collé le code, votre écran ressemble à ceci.

Cliquez sur Enregistrer pour enregistrer votre nouvelle variable.

Tu es un écran ressemblera à ça.

Pour les variables suivantes, vous répéterez ce processus :

• Dans la section Variables ​​définies par l’utilisateur, cliquez sur Nouveau.
• Rename the Untitled Variable
• Sélectionnez JavaScript ​​personnalisé comme type de configuration
• Coller le code JavaScript
• Cliquez sur Enregistrer pour enregistrer votre nouvelle variable.

La prochaine variable sera customerMobileNrdéfinie. Lorsqu’un client crée un profil sur le site Web de démonstration de la plate-forme, nous lierons le numéro de mobile du client à son profil client dans la plate-forme.

Dans la section Variables ​​définies par l’utilisateur, cliquez sur Nouveau.

• Renommer Untitled Variable en customerMobileNr
• Choisir un script ​​JavaScript personnalisé comme type de variable
• Collez ce code JavaScript personnalisé :

function() {
  var mobilenr = localStorage.getItem("mobilenr");
  return mobilenr;
}

Votre écran devrait ressembler à ceci.

Cliquez sur Enregistrer pour enregistrer votre nouvelle variable.

La prochaine variable sera customerFirstNamedéfinie. Lorsqu’un client crée un profil sur le site Web de démonstration de la plate-forme, nous lierons le prénom du client à son profil de client dans la plate-forme.

Dans la section Variables ​​définies par l’utilisateur, cliquez sur Nouveau.

• Renommer Untitled Variable en customerFirstName
• Choisir un script ​​JavaScript personnalisé comme type de variable
• Collez ce code JavaScript personnalisé :

function() {
  var firstname = localStorage.getItem("firstname");
  return firstname;
}

Votre écran devrait ressembler à ceci.

Cliquez sur Enregistrer pour enregistrer votre nouvelle variable.

Suivant : customerLastName. Lorsqu’un client crée un profil sur le site Web de démonstration de la plate-forme, nous lierons le nom de famille du client à son profil de client dans la plate-forme.

Dans la section Variables ​​définies par l’utilisateur, cliquez sur Nouveau.

• Renommer Untitled Variable en customerLastName
• Choisir un script ​​JavaScript personnalisé comme type de variable
• Collez ce code JavaScript personnalisé :

function() {
  var lastname = localStorage.getItem("lastname");
  return lastname;
}

Votre écran devrait ressembler à ceci.

Cliquez sur Enregistrer pour enregistrer votre nouvelle variable.

Suivant : aepTenantId. Lorsqu’un client crée un profil sur le site Web de démonstration de la plate-forme, nous lierons le nom de famille du client à son profil de client dans la plate-forme.

Dans la section Variables ​​définies par l’utilisateur, cliquez sur Nouveau.

• Renommer Untitled Variable en aepTenantId
• Choisir un script ​​JavaScript personnalisé comme type de variable
• Collez ce code JavaScript personnalisé :

function() {
  var aepTenantId = localStorage.getItem("aepTenantId");
  return aepTenantId;
}

Votre écran devrait ressembler à ceci.

Cliquez sur Enregistrer pour enregistrer votre nouvelle variable.

Suivant : customerLoggedIn. Lorsqu’un client est connecté au site Web de démonstration de la plate-forme, nous définirons cette variable sur Oui et utiliserons cette condition dans une configuration de règle de lancement.

Dans la section Variables ​​définies par l’utilisateur, cliquez sur Nouveau.

• Renommer Untitled Variable en customerLoggedIn
• Choisir un script ​​JavaScript personnalisé comme type de variable
• Collez ce code JavaScript personnalisé :

function() {
  var loggedin = localStorage.getItem("loggedin");
  return loggedin;
}

Votre écran devrait ressembler à ceci.

Cliquez sur Enregistrer pour enregistrer votre nouvelle variable.

Suivant : brandName. Lorsque vous sélectionnez une marque à faire une démonstration dans le menu Admin -, la marqueName est envoyée à Adobe Experience Platform.

Dans la section Variables ​​définies par l’utilisateur, cliquez sur Nouveau.

• Renommer Untitled Variable en brandName
• Choisir un script ​​JavaScript personnalisé comme type de variable
• Collez ce code JavaScript personnalisé :

function() {
  var brandName = localStorage.getItem("brandName");
  return brandName;
}

Votre écran devrait ressembler à ceci.

Cliquez sur Enregistrer pour enregistrer votre nouvelle variable.

Les variables suivantes seront créées dans le même processus, mais avec un code légèrement différent.

La variable suivante dont nous avons besoin est appelée productProductView. Lorsqu'un client vue un produit, cette variable stocke les informations de vue du produit.

Dans la section Variables ​​définies par l’utilisateur, cliquez sur Nouveau.

• Renommer Untitled Variable en productProductView
• Choisir un script ​​JavaScript personnalisé comme type de variable
• Collez ce code JavaScript personnalisé :

function() {
  var productview = JSON.parse(localStorage.getItem("thisProductView"));
  return productview;
}

Votre écran devrait ressembler à ceci.

Cliquez sur Enregistrer pour enregistrer votre nouvelle variable.

La variable suivante est appelée return1. Nous utiliserons cette variable pour renvoyer une valeur numérique de 1 si nécessaire.

Dans la section Variables ​​définies par l’utilisateur, cliquez sur Nouveau.

• Renommer Untitled Variable en return1
• Choisir un script ​​JavaScript personnalisé comme type de variable
• Collez ce code JavaScript personnalisé :

function() {
  return 1;
}

Votre écran devrait ressembler à ceci.

Cliquez sur Enregistrer pour enregistrer votre nouvelle variable.

Si nous avions travaillé avec des applications d'Adobe, nous aurions dû capturer l'ECID. Puisque nous allons montrer que nous pouvons aussi le faire avec une approche de plateforme Google uniquement , nous allons stocker un identifiant Google unique, à partir de Google Analytics. Nous affecterons la valeur de l'identifiant côté client à cette variable.

La variable suivante est appelée gaClientId. Nous utiliserons cette variable comme clé pour toutes les données Google Analytics.

Dans la section Variables ​​définies par l’utilisateur, cliquez sur Nouveau.

• Choisir le cookie ​​propriétaire comme type de variable

• Choisir _ga comme nom de cookie

Cliquez sur Enregistrer pour enregistrer votre nouvelle variable.

Suivant : pageTimeStamp. Nous avons besoin d'un horodatage unique pour chaque appel à Plateforme.

Dans la section Variables ​​définies par l’utilisateur, cliquez sur Nouveau.

• Renommer Untitled Variable en pageTimeStamp
• Choisir un script ​​JavaScript personnalisé comme type de variable
• Collez ce code JavaScript personnalisé :

function() {
var date = new Date();

var month = date.getUTCMonth();
var day = date.getUTCDate();
var hour = date.getUTCHours();
var min = date.getUTCMinutes();
var sec = date.getUTCSeconds();

month = (month < 9 ? "0" : "") + (month+1);
day = (day < 10 ? "0" : "") + day;
hour = (hour < 10 ? "0" : "") + hour;
min = (min < 10 ? "0" : "") + min;
sec = (sec < 10 ? "0" : "") + sec;

var str = date.getFullYear() + "-" + month + "-" + day + "T" +  hour + ":" + min + ":" + sec + ".000Z";

return str;
}

Cliquez sur Enregistrer pour enregistrer votre nouvelle variable.

Suivant : pageHitId. Nous avons besoin d'un HitId unique pour chaque appel à la plate-forme.

Dans la section Variables ​​définies par l’utilisateur, cliquez sur Nouveau.

• Renommer Untitled Variable en pageHitId
• Choisir un script ​​JavaScript personnalisé comme type de variable
• Collez ce code JavaScript personnalisé :

function() {
  var min = 111111111;
  var max = 9999999999999;
  var randomNumber = Math.random() * (max - min) + min;
  return String(randomNumber);
}

Enregistrez votre fragment de code, puis cliquez à nouveau sur Enregistrer pour enregistrer votre configuration de variable.

Ensuite, nous allons capturer certaines variables disponibles pour Google Tag Manager sans code personnalisé, en référençant des objets JavaScript.

Pour ce faire, procédez comme suit :

Dans la section Variables ​​définies par l’utilisateur, cliquez sur Nouveau.

• Rename the Untitled Variable
• Choisir la variable ​​JavaScript comme type de variable
• Saisissez le nom de la variable JavaScript.
• Cliquez sur Enregistrer pour enregistrer votre nouvelle variable.

First: customerLanguage. Nous capturerons la langue préférée du client en l'empruntant aux paramètres du navigateur.

Dans la section Variables ​​définies par l’utilisateur, cliquez sur Nouveau.

• Renommez la Untitled Variable en customerLanguage.
• Sélectionnez Variable ​​JavaScript comme type de variable.

• Enter the JavaScript Variable name: navigator.language.
  Votre écran doit maintenant ressembler à ceci :

• Cliquez sur Enregistrer pour enregistrer votre nouvelle variable.

Suivant : pageType. Lors de chaque nouveau chargement de page, nous devons capturer le type de page.

Dans la section Variables ​​définies par l’utilisateur, cliquez sur Nouveau.

• Renommez la Untitled Variable en pageType.
• Sélectionnez Variable ​​JavaScript comme type de variable.
• Enter the JavaScript Variable name: digitalData.category.siteSection.

Votre écran doit maintenant ressembler à ceci :

• Cliquez sur Enregistrer pour enregistrer votre nouvelle variable.

Suivant : productCategory. Pour chaque vue de produits, nous devons capturer la catégorie du produit et l'envoyer à la plate-forme.

Dans la section Variables ​​définies par l’utilisateur, cliquez sur Nouveau.

• Renommez la Untitled Variable en productCategory.
• Sélectionnez Variable ​​JavaScript comme type de variable.
• Enter the JavaScript Variable name: digitalData.product.category.

Votre écran doit maintenant ressembler à ceci :

• Cliquez sur Enregistrer pour enregistrer votre nouvelle variable.

Suivant : productName. Pour chaque vue de produits, nous devons capturer le nom du produit et l’envoyer à la plate-forme.

Dans la section Variables ​​définies par l’utilisateur, cliquez sur Nouveau.

• Renommez la Untitled Variable en productName.
• Sélectionnez Variable ​​JavaScript comme type de variable.
• Enter the JavaScript Variable name: digitalData.product.name.

Votre écran doit maintenant ressembler à ceci :

• Cliquez sur Enregistrer pour enregistrer votre nouvelle variable.

Suivant : productPrice. Pour chaque vue de produits, nous devons capturer le prix du produit et l'envoyer à Plateforme.

Dans la section Variables ​​définies par l’utilisateur, cliquez sur Nouveau.

• Renommez la Untitled Variable en productPrice.
• Sélectionnez Javascript ​​personnalisé comme type de variable.
• Entrez le javascript personnalisé en collant le code ci-dessous :

function() {
  var price = Number(digitalData.product.price);
  return price;
}

Votre écran doit maintenant ressembler à ceci :

• Cliquez sur Enregistrer pour enregistrer votre nouvelle variable.

Suivant : productImageUrl. Pour chaque vue de produits, nous devons capturer l’URL d’image du produit et l’envoyer à la plate-forme.

Dans la section Variables ​​définies par l’utilisateur, cliquez sur Nouveau.

• Renommez la Untitled Variable en productImageUrl.
• Sélectionnez Variable ​​JavaScript comme type de variable.
• Enter the JavaScript Variable name: digitalData.product.imageUrl.

Votre écran doit maintenant ressembler à ceci :

• Cliquez sur Enregistrer pour enregistrer votre nouvelle variable.

Suivant : productInteraction. Pour chaque vue de produits, nous devons capturer le type d’interaction (Vue, Ajouter au panier, Achat, etc.) et l’envoyer à la plateforme.

Dans la section Variables ​​définies par l’utilisateur, cliquez sur Nouveau.

• Renommez la Untitled Variable en productInteraction.
• Sélectionnez Variable ​​JavaScript comme type de variable.
• Enter the JavaScript Variable name: digitalData.product.interaction.

Votre écran doit maintenant ressembler à ceci :

• Cliquez sur Enregistrer pour enregistrer votre nouvelle variable.

Suivant : pageUserAgent. Pour chaque vue de page, nous devons capturer le type de périphérique utilisateur et le système d’exploitation et l’envoyer à la plate-forme. Nous utilisons l'agent utilisateur pour dériver ces informations. Pour plus d'informations sur l'agent utilisateur, consultez la page : https://en.wikipedia.org/wiki/User_agent

Dans la section Variables ​​définies par l’utilisateur, cliquez sur Nouveau.

• Renommez la Untitled Variable en pageUserAgent.
• Sélectionnez Variable ​​JavaScript comme type de variable.
• Enter the JavaScript Variable name: navigator.userAgent.

Votre écran doit maintenant ressembler à ceci :

• Cliquez sur Enregistrer pour enregistrer votre nouvelle variable.

Presque terminé, maintenant le temps pour : pageName. Lors de chaque nouveau chargement de page, nous devons capturer le nom de la page et l’envoyer à AA, AAM et plate-forme.

Dans la section Variables ​​définies par l’utilisateur, cliquez sur Nouveau.

• Renommez la Untitled Variable en pageName.
• Sélectionnez Variable ​​JavaScript comme type de variable.
• Enter the JavaScript Variable name: document.title.

Votre écran doit maintenant ressembler à ceci :

• Cliquez sur Enregistrer pour enregistrer votre nouvelle variable.

Et la dernière : pageUrl. Lors de chaque nouveau chargement de page, nous devons capturer l’URL pour l’envoyer à d’autres solutions.
L’URL de page est déjà une variable intégrée dans Google Tag Manager. Il n’est donc pas nécessaire de la définir. Mais pour la cohérence avec d'autres informations sur Plateforme nous définirons pageUrl de toute façon.

Dans la section Variables ​​définies par l’utilisateur, cliquez sur Nouveau.

• Renommez la Untitled Variable en pageUrl.
• Sélectionnez URL comme type de variable.

Votre écran doit maintenant ressembler à ceci :

• Cliquez sur Enregistrer pour enregistrer votre nouvelle variable.

Vous avez terminé de configurer toutes les variables Google Tag Manager requises !

Étape suivante : 9.4 Récupération des jeux de données de plateformes

Revenir au module 9

Revenir à tous les modules