25 JavaScript personnalisés Google Tag Manager.

Renforcez vos connaissances JavaScript grâce à de nombreux exemples de variables JavaScript personnalisés utiles avec Google Tag Manager. Chaque script est expliqué et peut être utilisé directement dans GTM.

Google Tag Manager (GTM) est un outil fantastique qui permet d’ajouter ou de modifier du code sur votre site Web sans avoir besoin d’accéder directement à votre code source. Vous pouvez créer des tags, des déclencheurs et des variables pour suivre les interactions des utilisateurs avec votre site et envoyer ces données à Google Analytics, Facebook, et bien d’autres plateformes.

L’une des fonctionnalités les plus puissantes de GTM est la possibilité de créer des variables JavaScript personnalisées. Ces variables vous permettent d’exécuter du code JavaScript dans GTM et de renvoyer le résultat comme une variable que vous pouvez utiliser dans vos tags et déclencheurs.

De plus, veuillez noter que pour des raisons de sécurité, GTM ne permet pas l’utilisation de certaines méthodes JavaScript dans cette variable, comme document.write, eval, etc.

Voici 30 exemples de scripts utiles que vous pouvez utiliser dans des variables « JavaScript personnalisé » dans GTM.

1. JavaScript pour récupérer le jour de la semaine.
2. JavaScript pour calculer le temps passé sur une page.
3. JavaScript pour récupérer le titre d’une page.
4. JavaScript pour vérifier si l’utilisateur est connecté.
5. JavaScript pour récupérer le type de l’appareil utilisé.
6. JavaScript pour récupérer la taille de l’écran.
7. JavaScript pour récupérer la position de défilement.
8. JavaScript pour récupérer le fuseau horaire.
9. JavaScript pour vérifier si les cookies sont activés.
10. JavaScript pour récupérer le nombre de pages visitées pendant la session actuelle.
11. JavaScript pour récupérer le nombre de clics sur un élément spécifique.
12. JavaScript pour récupérer la langue du navigateur.
13. JavaScript pour vérifier si l’utilisateur a interagi avec un élément spécifique.
14. JavaScript pour récupérer la source du trafic.
15. JavaScript pour récupérer le texte d’un élément spécifique.
16. JavaScript pour récupérer la valeur d’un élément de formulaire.
17. JavaScript pour vérifier si l’utilisateur est sur un appareil mobile.
18. JavaScript pour récupérer l’adresse IP de l’utilisateur.
19. JavaScript pour récupérer la position de l’utilisateur.
20. JavaScript pour obtenir le nombre de jours depuis la première visite.
21. JavaScript pour extraire le domaine de l’URL de référent.
22. JavaScript pour obtenir le titre de la page précédente.
23. JavaScript pour obtenir le temps passé sur la page précédente.
24. JavaScript pour obtenir le type d’événement d’interaction.
25. JavaScript pour obtenir la liste des paramètres item_id de la page panier.

1 – JavaScript pour récupérer le jour de la semaine.

Cette variable GTM « JavaScript personnalisé » retourne le jour actuel de la semaine en français. Il n’y a pas de variables à ajuster.

function() { 

   var dayNames = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"];

   var now = new Date();

   return dayNames[now.getDay()];

}

Voici le détail du JavaScript GTM ligne par ligne :

• var dayNames = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"];: Cette ligne déclare une variable appelée dayNames qui est un tableau des noms des jours de la semaine en français. Chaque position dans le tableau correspond à un jour de la semaine, en commençant par le dimanche (indice 0) jusqu’au samedi (indice 6).
• var now = new Date();: Cette ligne déclare une autre variable appelée now qui représente la date et l’heure actuelles.
• return dayNames[now.getDay()];: Cette ligne renvoie le nom du jour de la semaine en français correspondant au jour actuel. La méthode getDay() est appelée sur l’objet now (qui représente la date actuelle) et renvoie un nombre entier entre 0 (pour dimanche) et 6 (pour samedi). Ce nombre est utilisé comme indice pour accéder à l’élément correspondant dans le tableau dayNames

2 – JavaScript pour calculer le temps passé sur une page.

Cette variable GTM « JavaScript personnalisé » retourne le temps passé sur la page actuelle en secondes depuis le chargement de la page. Il n’y a pas de variables à ajuster.

function() {

    return Math.round(window.performance.now() / 1000);

}

Voici le détail du JavaScript GTM ligne par ligne :

• function() {} : Ceci est une déclaration de fonction anonyme. Les fonctions anonymes sont des fonctions qui ne sont pas associées à un identifiant. Elles sont souvent utilisées lorsqu’elles sont immédiatement invoquées ou lorsqu’elles sont utilisées comme arguments d’autres fonctions.
• return Math.round(window.performance.now() / 1000); : Cette ligne retourne le temps écoulé depuis le chargement de la page.
  • window.performance.now(): La méthode now() de l’objet performance de la fenêtre retourne un timestamp DOMHighResTimeStamp précis au millième de milliseconde. Ce timestamp indique le temps écoulé depuis que la fenêtre du navigateur a commencé à se charger.
  • / 1000 : Cette opération divise le timestamp par 1000 pour convertir le temps de millisecondes en secondes.
  • Math.round() : Cette fonction arrondit le nombre à l’entier le plus proche.

3 – JavaScript pour récupérer le titre d’une page.

Cette variable GTM « JavaScript personnalisé » retourne le titre de la page actuelle. Il n’y a pas de variables à ajuster.

function() { 

    return document.title;

}

4 – JavaScript pour vérifier si l’utilisateur est connecté.

Cette variable GTM « JavaScript personnalisé » vérifie si un certain cookie est présent. Il retourne la valeur du cookie si celui-ci est présent, sinon il retourne null. Vous devez remplacer ‘isLoggedIn’ par le nom de votre cookie.

function() {

    // Remplacez 'isLoggedIn' par le nom réel de votre cookie.

    var cookieName = 'isLoggedIn';

    var match = document.cookie.match(new RegExp('(^| )' + cookieName + '=([^;]+)'));

    return match ? match[2] : null;

}

Vous pouvez également mêler une variable native GTM, « Cookie propriétaire » pour simplifier le script. Cette fois-ci le script retourne « logged » (si le cookie existe) sinon « unlogged ».

function() {

    // Remplacez 'isLoggedIn' par le nom réel de votre cookie.

    var cookieName = '{{cookie isLoggedIn}};

    return cookieName ? 'logged' : 'unlogged';

}

5 – JavaScript pour récupérer le type de l’appareil utilisé.

Cette variable GTM « JavaScript personnalisé » détecte le type de l’appareil utilisé pour visiter la page, soit « Desktop » soit « Mobile ». Il n’y a pas de variables à ajuster.

function() { 

    var deviceType = "Desktop";

    if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {

        deviceType = "Mobile";

    }

    return deviceType;&

}

Voici une explication pas à pas du script :

1. var deviceType = "Desktop"; : On initialise une variable deviceType avec la valeur "Desktop".
2. if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {...} : Cette ligne utilise une expression régulière (regex) pour tester si la chaîne navigator.userAgent contient l’un des mots suivants : Android, webOS, iPhone, iPad, iPod, BlackBerry, IEMobile, Opera Mini. Ces mots sont généralement présents dans navigator.userAgent lorsque l’utilisateur accède à la page depuis un appareil mobile.Si l’expression régulière est vraie (c’est-à-dire que l’un des mots est trouvé), le bloc de code à l’intérieur des accolades {...} est exécuté.
3. deviceType = "Mobile"; : Si le test regex est vrai, cela signifie que l’utilisateur accède à la page depuis un appareil mobile. Donc, on change la valeur de deviceType à "Mobile".
4. return deviceType; : Enfin, la fonction retourne la valeur de deviceType, qui est soit "Desktop", soit "Mobile", en fonction du type d’appareil de l’utilisateur.

6 – JavaScript pour récupérer la taille de l’écran.

Cette variable GTM « JavaScript personnalisé » retourne la taille de la fenêtre du navigateur en pixels. Il n’y a pas de variables à ajuster.

function() {

    return window.innerWidth + 'x' + window.innerHeight;

}

Voici le détail du JavaScript GTM ligne par ligne :

• window.innerWidth : C’est une propriété de l’objet window en JavaScript qui renvoie la largeur intérieure de la fenêtre du navigateur en pixels. Cette largeur inclut la barre de défilement verticale si elle est visible.
• window.innerHeight : C’est une autre propriété de l’objet window qui renvoie la hauteur intérieure de la fenêtre du navigateur en pixels. Cette hauteur inclut la barre de défilement horizontale si elle est visible.
• 'x' : C’est juste une chaîne de caractères ‘x’ qui sert à séparer la largeur et la hauteur.
• + : C’est l’opérateur de concaténation en JavaScript, qui est utilisé ici pour concaténer (joindre) la largeur, la chaîne ‘x’ et la hauteur en une seule chaîne de caractères.

7 – JavaScript pour récupérer la position de défilement.

Cette variable GTM « JavaScript personnalisé » retourne la position de défilement de l’utilisateur sur la page en pixels. Il n’y a pas de variables à ajuster.

function() {

    return window.pageYOffset || document.documentElement.scrollTop; 

}

Voici le détail du JavaScript GTM ligne par ligne :

• window.pageYOffset: Ceci est une propriété de l’objet window qui renvoie le nombre de pixels que le document a défilés verticalement. Il renvoie 0 si la fenêtre n’a pas du tout été défilée. C’est standard dans la plupart des navigateurs modernes.
• document.documentElement.scrollTop: Ceci est une alternative à window.pageYOffset qui est utilisée pour une meilleure compatibilité avec certains navigateurs plus anciens. document.documentElement renvoie l’objet Element pour l’élément <html> au sommet du document, et scrollTop renvoie le nombre de pixels que le contenu de l’élément a défilé verticalement.

La fonction utilise l’opérateur OR (||). Si window.pageYOffset est défini (c’est-à-dire non nul), il sera renvoyé. Sinon, document.documentElement.scrollTop sera renvoyé. Ainsi, cette fonction est une façon robuste d’obtenir le défilement vertical indépendamment du navigateur.

8 – JavaScript pour récupérer le fuseau horaire.

Cette variable GTM « JavaScript personnalisé » retourne le fuseau horaire de l’utilisateur. Il n’y a pas de variables à ajuster.

function() {

    return Intl.DateTimeFormat().resolvedOptions().timeZone;

}

En JavaScript, Intl.DateTimeFormat().resolvedOptions().timeZone; est utilisé pour obtenir le nom du fuseau horaire de l’utilisateur du système.

Voyons chaque partie du script :

1. Intl.DateTimeFormat() est une fonction JavaScript intégrée qui permet de formater des dates dans différentes langues.
2. .resolvedOptions() est une méthode qui renvoie un nouvel objet contenant les options par défaut pour la méthode de formattage de date ou de numéro, ainsi que les valeurs actuellement calculées. Cela signifie qu’il donne les options réellement utilisées par l’instance Intl.DateTimeFormat.
3. .timeZone est une propriété de l’objet renvoyé par resolvedOptions(). Cette propriété renvoie le fuseau horaire du système de l’utilisateur. Par exemple, pour un utilisateur en France, cela pourrait renvoyer « Europe/Paris ».

9 – JavaScript pour vérifier si les cookies sont activés.

Cette variable GTM « JavaScript personnalisé » vérifie si les cookies sont activés dans le navigateur de l’utilisateur. Il n’y a pas de variables à ajuster.

function() {

    return navigator.cookieEnabled ? 'Enabled' : 'Disabled';

}

Voici le détail du JavaScript GTM ligne par ligne :

1. navigator.cookieEnabled : Cette propriété retourne une valeur booléenne (true ou false) indiquant si les cookies sont activés dans le navigateur de l’utilisateur.
2. Le signe ‘?’ correspond à une condition en JavaScript, également appelée opérateur ternaire. Cette condition peut être lue comme « si… alors… sinon… ». Ici, elle vérifie si navigator.cookieEnabled est vrai.
3. Si navigator.cookieEnabled est vrai (c’est-à-dire si les cookies sont activés), la fonction retourne la chaîne de caractères ‘Enabled’.
4. Si navigator.cookieEnabled est faux (c’est-à-dire si les cookies ne sont pas activés), la fonction retourne la chaîne de caractères ‘Disabled’.

10 – JavaScript pour récupérer le nombre de pages visitées pendant la session actuelle.

Cette variable GTM « JavaScript personnalisé » retourne le nombre de pages visitées par l’utilisateur pendant la session actuelle. Il n’y a pas de variables à ajuster.

function() {

    return history.length;

}

Ce script est une fonction JavaScript anonyme qui renvoie la longueur de l’objet history.

L’objet history fait partie de l’API de navigation Web et il contient l’historique des URL visitées par l’utilisateur dans la session de la fenêtre ou de l’onglet actuel.

history.length donne le nombre d’éléments dans l’historique de la session. Cela inclut généralement la page actuelle, les pages précédemment visitées dans l’onglet ou la fenêtre et souvent la première page par défaut de la nouvelle fenêtre ou de l’onglet.

Il est important de noter que pour des raisons de confidentialité, l’objet history ne permet pas à une page d’accéder à l’URL d’une autre page à moins qu’elles n’aient le même domaine, protocole et port. Cependant, l’utilisation de history.length est permise car cela ne révèle pas d’informations spécifiques sur les URL visitées.

11 – JavaScript pour récupérer le nombre de clics sur un élément spécifique.

Cette variable GTM « JavaScript personnalisé » récupère le nombre de clics sur un élément spécifique. Vous devez remplacer ‘#myElement’ par le sélecteur CSS de votre élément.

function() {

    // Remplacez '#myElement' par le sélecteur CSS de votre élément.

    var elementSelector = '#myElement';

    var element = document.querySelector(elementSelector);

    return element ? element.dataset.clickCount : 0;

}

Voici le détail du JavaScript GTM ligne par ligne :

1. function() { ... } : Définition d’une fonction anonyme sans nom. Cela signifie que la fonction n’est pas accessible ou réutilisable ailleurs dans le code.
2. var elementSelector = '#myElement'; : Déclaration d’une variable elementSelector qui contient un sélecteur CSS #myElement. Ce sélecteur est utilisé pour cibler un élément spécifique dans le document HTML.
3. var element = document.querySelector(elementSelector); : La fonction document.querySelector() est utilisée pour récupérer le premier élément correspondant au sélecteur CSS spécifié. Dans ce cas, elle récupère l’élément avec l’ID myElement dans le document HTML.
4. return element ? element.dataset.clickCount : 0; : Cette ligne retourne le nombre de clics enregistrés sur l’élément ciblé. Elle utilise l’opérateur ternaire pour vérifier si l’élément existe (element) ou non. Si l’élément existe, elle accède à la propriété dataset.clickCount de l’élément pour récupérer le nombre de clics enregistrés. Sinon, elle retourne 0.

12 – JavaScript pour récupérer la langue du navigateur.

Cette variable GTM « JavaScript personnalisé » retourne la langue du navigateur de l’utilisateur. Il n’y a pas de variables à ajuster.

function() {

    return navigator.language || navigator.userLanguage;

}

Voici le détail du JavaScript GTM ligne par ligne :

À l’intérieur de la fonction, il y a une expression de retour (return). L’expression retourne la valeur de l’expression logique « navigator.language || navigator.userLanguage ». Voyons ce que cela signifie :

• « navigator » est un objet JavaScript qui représente le navigateur web de l’utilisateur. Il fournit de nombreuses informations sur le navigateur et son environnement.
• « navigator.language » est une propriété de l’objet « navigator » qui renvoie la langue préférée de l’utilisateur, telle qu’elle est définie dans les paramètres du navigateur.
• « navigator.userLanguage » est une propriété alternative qui renvoie la langue préférée de l’utilisateur dans certains navigateurs spécifiques, tels que Internet Explorer.

L’expression « navigator.language || navigator.userLanguage » utilise l’opérateur de coalescence nulle (||) pour retourner la première valeur non nulle. Cela signifie que si « navigator.language » est défini (non nul), il sera retourné. Sinon, si « navigator.userLanguage » est défini (non nul), il sera retourné à la place.

13 – JavaScript pour vérifier si l’utilisateur a interagi avec un élément spécifique.

Cette variable GTM « JavaScript personnalisé » vérifie si l’utilisateur a interagi avec un élément spécifique. Vous devez remplacer ‘#myElement’ par le sélecteur CSS de votre élément.

function() {

    // Remplacez '#myElement' par le sélecteur CSS de votre élément.

    var elementSelector = '#myElement';

    var element = document.querySelector(elementSelector);

    return element && element.dataset.hasInteracted ? 'Yes' : 'No';

}

Voici le détail du JavaScript GTM ligne par ligne :

Ce script est une fonction JavaScript anonyme qui recherche un élément spécifié dans le document HTML et vérifie si cet élément a une propriété de données appelée « hasInteracted » définie. Voici une explication ligne par ligne du script :

1. La ligne function() { indique le début de la définition de la fonction anonyme.
2. Le commentaire // Remplacez '#myElement' par le sélecteur CSS de votre élément. est une indication pour remplacer #myElement par le sélecteur CSS de l’élément que vous souhaitez cibler.
3. La ligne var elementSelector = '#myElement'; déclare une variable appelée elementSelector et lui attribue la valeur #myElement. Cela signifie que l’élément ciblé est celui qui a l’identifiant myElement. Vous pouvez remplacer cette valeur par un sélecteur CSS valide pour cibler un autre élément.
4. La ligne var element = document.querySelector(elementSelector); déclare une variable appelée element et utilise la méthode querySelector pour sélectionner le premier élément dans le document qui correspond au sélecteur CSS spécifié par elementSelector. Cette ligne récupère l’élément ciblé dans la variable element.
5. La ligne return element && element.dataset.hasInteracted ? 'Yes' : 'No'; vérifie si l’élément existe (element) et si la propriété de données hasInteracted est définie pour cet élément (element.dataset.hasInteracted). Si ces conditions sont satisfaites, la fonction renvoie la chaîne de caractères 'Yes'. Sinon, elle renvoie la chaîne de caractères 'No'.

14 JavaScript pour récupérer la source du trafic.

Cette variable GTM « JavaScript personnalisé » détermine la source du trafic en examinant l’URL de référence. Il n’y a pas de variables à ajuster.

function() {

    var referrer = document.referrer;

    if (referrer.indexOf('google') > -1) return 'Google';

    if (referrer.indexOf('facebook') > -1) return 'Facebook';

    if (referrer.indexOf('twitter') > -1) return 'Twitter';

    return 'Other';
}

Voici le détail du JavaScript GTM ligne par ligne :

1. La fonction est définie sans nom, ce qui signifie qu’elle peut être appelée ultérieurement en utilisant le nom de la variable à laquelle elle est assignée.
2. La variable referrer est initialisée avec la valeur de document.referrer. document.referrer renvoie l’URL de la page précédente à partir de laquelle le visiteur est arrivé sur la page actuelle. Cela peut être un moteur de recherche, un réseau social ou un lien direct.
3. Ensuite, il y a une série de conditions if qui vérifient si le referrer contient certaines chaînes de caractères spécifiques.
   • La première condition vérifie si la chaîne 'google' est présente dans referrer. Si c’est le cas, cela signifie que le visiteur est arrivé sur le site web en provenance de Google. Dans ce cas, la fonction retourne la chaîne 'Google'.
   • La deuxième condition vérifie si la chaîne 'facebook' est présente dans referrer. Si c’est le cas, cela signifie que le visiteur est arrivé sur le site web en provenance de Facebook. Dans ce cas, la fonction retourne la chaîne 'Facebook'.
   • La troisième condition vérifie si la chaîne 'twitter' est présente dans referrer. Si c’est le cas, cela signifie que le visiteur est arrivé sur le site web en provenance de Twitter. Dans ce cas, la fonction retourne la chaîne 'Twitter'.
4. Si aucune des conditions précédentes n’est satisfaite, cela signifie que le visiteur est arrivé directement sur le site web, sans être référé par un moteur de recherche ou un réseau social. Dans ce cas, la fonction retourne la chaîne 'Other'.

En résumé, ce script détecte la source de trafic d’un visiteur en examinant la valeur de document.referrer et en renvoyant une chaîne correspondant à la source de trafic (Google, Facebook, Twitter ou Other).

15 – JavaScript pour récupérer le texte d’un élément spécifique.

Cette variable GTM « JavaScript personnalisé » vous permet de capturer le texte à l’intérieur d’un élément spécifié par son sélecteur CSS.

function() {

  var element = document.querySelector('selecteur CSS de l’élément');

  return element ? element.innerText : undefined; 

}

Voici le détail du JavaScript GTM ligne par ligne :

1. Elle utilise la méthode document.querySelector() pour rechercher et sélectionner un élément HTML sur la page en utilisant un « sélecteur CSS de l’élément ». Le sélecteur CSS est une syntaxe utilisée pour cibler des éléments spécifiques sur une page HTML en se basant sur leur structure et leurs attributs.
2. Si l’élément est trouvé (c’est-à-dire si element n’est pas égal à null), la fonction retourne le texte contenu à l’intérieur de cet élément en utilisant la propriété innerText. innerText renvoie le contenu textuel visible à l’intérieur de l’élément, mais exclut le contenu des éléments enfants masqués par CSS ou d’autres méthodes.
3. Si l’élément n’est pas trouvé (c’est-à-dire si element est égal à null), la fonction retourne undefined.

16 – JavaScript pour récupérer la valeur d’un élément de formulaire.

Cette variable GTM « JavaScript personnalisé » récupère la valeur d’un élément de formulaire spécifique sur la page. Remplacez formElementSelector par le sélecteur de l’élément de formulaire.

function() {

  var element = document.querySelector('formElementSelector');

  return element ? element.value : undefined;

}

Voici le détail du JavaScript GTM ligne par ligne :

1. Il utilise la méthode document.querySelector('formElementSelector') pour sélectionner un élément dans le document HTML. L’argument 'formElementSelector' doit être remplacé par un sélecteur CSS valide qui cible l’élément de formulaire spécifique que vous souhaitez sélectionner. Par exemple, vous pouvez utiliser un ID ('#monElement') ou une classe (.monElement) pour sélectionner un élément.
2. Il attribue l’élément sélectionné à la variable element.
3. Il utilise une expression conditionnelle pour vérifier si element existe. Si l’élément est trouvé, la valeur de element.value est renvoyée. element.value représente la valeur actuelle de l’élément de formulaire (comme un champ de texte ou une case à cocher). Si element est évalué à true, la fonction renvoie cette valeur.
4. Si element n’existe pas ou est évalué à false, la fonction renvoie undefined. Cela peut se produire si l’élément sélectionné n’est pas présent dans le document HTML.

17 – JavaScript pour vérifier si l’utilisateur est sur un appareil mobile.

Cette variable GTM « JavaScript personnalisé » vérifie si l’utilisateur est sur un appareil mobile.

function() {

  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ? true : false;

}

Voici une explication ligne par ligne du script :

1. La fonction est déclarée sans nom et n’a pas de paramètres entre les parenthèses vides.
2. À l’intérieur de la fonction, une expression régulière est utilisée pour rechercher des correspondances dans la chaîne de l’agent utilisateur du navigateur. La chaîne de l’agent utilisateur contient des informations sur le navigateur et le système d’exploitation de l’utilisateur.L’expression régulière utilisée est la suivante : /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/iCette expression régulière recherche les occurrences des chaînes suivantes, sans tenir compte de la casse :
   • « Android »
   • « webOS »
   • « iPhone »
   • « iPad »
   • « iPod »
   • « BlackBerry »
   • « IEMobile »
   • « Opera Mini »
   Ces chaînes correspondent à certains systèmes d’exploitation mobiles couramment utilisés.
3. La méthode .test() de l’objet RegExp est utilisée pour tester si la chaîne de l’agent utilisateur correspond à l’expression régulière. Cette méthode retourne true si une correspondance est trouvée et false sinon.
4. Le résultat de la méthode .test() est utilisé dans une expression ternaire (condition ? value1 : value2) pour retourner true si une correspondance est trouvée (c’est-à-dire si l’utilisateur utilise un appareil mobile), et false sinon.

18 – JavaScript pour récupérer l’adresse IP de l’utilisateur.

Cette variable GTM « JavaScript personnalisé » permet de récupérer l’IP de l’utilisateur actif.

Notez que pour des raisons de confidentialité, vous ne pouvez pas directement récupérer l’adresse IP de l’utilisateur avec JavaScript. Cependant, vous pouvez utiliser un service API tiers pour le faire. Assurez-vous de respecter les lois sur la protection de la vie privée lorsque vous utilisez cette méthode.

function() {

  var xhr = new XMLHttpRequest();

  xhr.open('GET', 'https://api.ipify.org?format=json', false);

  xhr.send(null);

  
  if (xhr.status === 200) {

    return JSON.parse(xhr.responseText).ip;

  }

}

Ce script utilise la technologie JavaScript pour effectuer une requête HTTP vers l’API d’un service appelé « ipify ». L’objectif principal de ce script est de récupérer l’adresse IP du client exécutant le script.

Voici le détail du JavaScript GTM ligne par ligne :

1. La fonction est définie sans nom et ne prend aucun paramètre.
2. Une instance de l’objet XMLHttpRequest est créée en utilisant le constructeur new XMLHttpRequest(). XMLHttpRequest est un objet intégré dans les navigateurs web modernes qui permet de faire des requêtes HTTP asynchrones.
3. La méthode open de l’objet XMLHttpRequest est appelée pour configurer la requête. Elle prend trois paramètres : la méthode HTTP (dans ce cas, ‘GET’ pour une demande de lecture), l’URL de l’API (‘https://api.ipify.org?format=json‘) et un booléen indiquant si la requête doit être asynchrone ou non (dans ce cas, false est utilisé pour une requête synchrone).
4. La méthode send de l’objet XMLHttpRequest est appelée sans aucun paramètre pour envoyer la requête au serveur.
5. Le script vérifie si la propriété status de l’objet XMLHttpRequest est égale à 200. Le code HTTP 200 indique une réponse réussie du serveur.
6. Si le statut est égal à 200, cela signifie que la requête a réussi. Le script utilise alors la méthode responseText pour obtenir la réponse du serveur sous forme de chaîne de caractères. Cette réponse est ensuite analysée en utilisant JSON.parse pour extraire la propriété ip de l’objet JSON retourné par l’API d’ipify.
7. La valeur de l’adresse IP est renvoyée par la fonction.

En résumé, ce script effectue une requête HTTP synchrone vers l’API d’ipify pour récupérer l’adresse IP du client et renvoie cette adresse IP en tant que résultat de la fonction.

19 – JavaScript pour récupérer la position de l’utilisateur.

Cette variable GTM « JavaScript personnalisé » utilise l’API de géolocalisation pour récupérer la position de l’utilisateur. Assurez-vous d’obtenir le consentement de l’utilisateur avant d’utiliser cette méthode.

function() {

  if ("geolocation" in navigator) {

    navigator.geolocation.getCurrentPosition(function(position) {

      return position.coords.latitude + ', ' + position.coords.longitude;

    });

  } else {

    return "Geolocation not supported";

  }

}

Ce script est une fonction JavaScript qui utilise l’API de géolocalisation du navigateur pour obtenir les coordonnées de latitude et de longitude de l’utilisateur. Voici une explication détaillée du script :

1. La fonction est déclarée sans nom et n’a pas de paramètres entre les parenthèses vides.
2. La première ligne de la fonction vérifie si l’objet « geolocation » existe dans l’objet « navigator ». L’objet « geolocation » fait partie de l’API de géolocalisation du navigateur et fournit des méthodes pour obtenir la position géographique de l’utilisateur.
3. Si l’objet « geolocation » est disponible, cela signifie que le navigateur prend en charge la géolocalisation. Le script utilise alors la méthode « getCurrentPosition() » de l’objet « geolocation » pour obtenir la position actuelle de l’utilisateur.
4. La méthode « getCurrentPosition() » prend en argument une fonction de rappel (callback) qui sera appelée avec l’objet « position » contenant les informations de localisation. Cette fonction de rappel est définie de manière anonyme avec la syntaxe function(position) { ... }.
5. À l’intérieur de la fonction de rappel, les coordonnées de latitude et de longitude sont extraites de l’objet « position.coords ». Les coordonnées sont ensuite concaténées avec une virgule et un espace pour former une chaîne de caractères représentant les coordonnées géographiques.
6. Enfin, la chaîne de caractères contenant les coordonnées est retournée à partir de la fonction de rappel.
7. Si l’objet « geolocation » n’est pas disponible dans le navigateur, le bloc « else » est exécuté. Il renvoie simplement la chaîne de caractères « Geolocation not supported » pour indiquer que la géolocalisation n’est pas prise en charge.

Notez que cette fonction ne renvoie pas directement les coordonnées géographiques lorsqu’elle est appelée, mais elle renvoie plutôt une promesse (promise) ou une valeur de retour à l’intérieur de la fonction de rappel. Pour utiliser les coordonnées, vous devrez modifier le script pour utiliser la promesse ou traiter la valeur de retour de manière appropriée.

20 – JavaScript pour obtenir le nombre de jours depuis la première visite.

Cette variable GTM « JavaScript personnalisé » utilise les cookies pour suivre le nombre de jours depuis la première visite de l’utilisateur.

function() {

  // La clé du cookie

  var cookieName = 'firstVisit';


  // Recherche du cookie

  var match = document.cookie.match(new RegExp('(^| )' + cookieName + '=([^;]+)'));

  var firstVisit = match ? new Date(+match[2]) : new Date();


  // Mise à jour du cookie

  if (!match) {

    document.cookie = cookieName + '=' + firstVisit.getTime() + '; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/';

  }

  // Calcul et retour du nombre de jours depuis la première visite

  var delta = new Date() - firstVisit;

  return Math.floor(delta / 1000 / 60 / 60 / 24);

}

Ce script est une fonction JavaScript qui gère un cookie utilisé pour suivre le nombre de jours écoulés depuis la première visite d’un utilisateur sur un site web. Voici une explication ligne par ligne du script :

1. La première ligne indique qu’il s’agit d’une fonction anonyme. Cela signifie que la fonction n’a pas de nom spécifique et peut être utilisée de manière anonyme dans le code.
2. La variable cookieName est définie pour stocker la clé du cookie. Dans ce cas, la clé est définie comme 'firstVisit', mais cela pourrait être modifié en une autre valeur selon les besoins.
3. La ligne suivante recherche le cookie correspondant à la clé spécifiée (firstVisit). Elle utilise la méthode match() de l’objet document.cookie pour trouver le cookie qui correspond au modèle régulier '(^| )' + cookieName + '=([^;]+)'. Cette expression régulière récupère le contenu du cookie associé à la clé firstVisit.
4. La variable match stocke le résultat de la recherche du cookie. Si un cookie correspondant est trouvé, match sera un tableau contenant des informations sur le cookie. Sinon, match sera null.
5. La variable firstVisit est initialisée à la date actuelle si aucun cookie correspondant n’a été trouvé. Sinon, elle est initialisée avec la date extraite du cookie trouvé. Le + devant match[2] convertit la valeur du cookie en un nombre.
6. La condition if (!match) vérifie si aucun cookie correspondant n’a été trouvé. Si c’est le cas, cela signifie que c’est la première visite de l’utilisateur. Dans ce cas, un nouveau cookie est créé en utilisant document.cookie. Il contient la clé cookieName et la valeur firstVisit.getTime(), qui est le nombre de millisecondes écoulées depuis le 1er janvier 1970 jusqu’à firstVisit. Le cookie est défini pour expirer le 19 janvier 2038 à 03:14:07 GMT.
7. Enfin, la variable delta est calculée en soustrayant la date actuelle (new Date()) de firstVisit. Cela donne la différence en millisecondes entre la première visite et la visite actuelle.
8. La fonction retourne ensuite le nombre de jours écoulés depuis la première visite en divisant delta par 1000 (pour obtenir le nombre de secondes), puis par 60 (pour obtenir le nombre de minutes), puis par 60 (pour obtenir le nombre d’heures), et enfin par 24 (pour obtenir le nombre de jours). La fonction Math.floor() arrondit le résultat à l’entier inférieur.

21 – JavaScript pour extraire le domaine de l’URL de référent.

Cette variable GTM « JavaScript personnalisé » extrait le domaine de l’URL de référent (la page précédente qui a envoyé l’utilisateur à la page actuelle).

function() {

  var referrer = document.referrer;

  if (referrer) {

    var link = document.createElement('a');

    link.href = referrer;

    return link.hostname;

  }

  return null;

}

Ce script est une fonction JavaScript qui permet d’obtenir le nom d’hôte (hostname) de la page référente (referrer) dans laquelle le visiteur était avant d’accéder à la page actuelle. Voici une explication ligne par ligne :

1. La fonction est déclarée sans nom, ce qui signifie qu’elle est anonyme et peut être assignée à une variable ou appelée directement.
2. La variable referrer est initialisée avec la valeur de document.referrer. document.referrer est une propriété qui contient l’URL de la page référente. Si le visiteur a accédé à la page actuelle depuis une autre page, referrer contiendra cette URL. Sinon, referrer sera une chaîne vide.
3. La condition if (referrer) vérifie si referrer existe et n’est pas une chaîne vide.
4. À l’intérieur de la condition, une nouvelle balise <a> est créée en utilisant document.createElement('a'). Cette balise est utilisée pour manipuler des liens hypertexte.
5. Ensuite, l’attribut href de la balise <a> est défini avec la valeur de referrer. Cela permet de récupérer l’URL complète de la page référente.
6. Enfin, la fonction retourne link.hostname, qui correspond au nom d’hôte (par exemple, « www.example.com« ) extrait de l’URL de la page référente.
7. Si la condition if échoue, c’est-à-dire que referrer est une chaîne vide ou non définie, la fonction retourne null.

22 – JavaScript pour obtenir le titre de la page précédente.

Cette variable GTM « JavaScript personnalisé » stocke le titre de la page précédente dans un cookie pour l’utiliser sur la page actuelle.

function() {

  var pageTitleKey = 'prevPageTitle';

  var prevPageTitle = document.cookie.replace(new RegExp("(?:(?:^|.*;\\s*)" + pageTitleKey + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1") || null;

  document.cookie = pageTitleKey + "=" + document.title + "; path=/";

  return prevPageTitle;

}

Voici le détail du JavaScript GTM ligne par ligne :

1. Elle crée une variable pageTitleKey et lui attribue la valeur 'prevPageTitle'. Cette variable est utilisée comme clé pour stocker et récupérer le titre de la page précédente dans les cookies.
2. Elle utilise la propriété document.cookie pour accéder à la valeur des cookies du document courant. La méthode replace est utilisée avec une expression régulière pour extraire la valeur du cookie correspondant à pageTitleKey. L’expression régulière est construite en utilisant pageTitleKey pour trouver la chaîne de caractères "prevPageTitle" suivie d’un signe égal (=) et la valeur du cookie correspondante. La valeur extraite est stockée dans la variable prevPageTitle. Si aucun cookie correspondant n’est trouvé, prevPageTitle sera défini sur null.
3. Elle crée un nouveau cookie en utilisant document.cookie. Le cookie est constitué de la clé pageTitleKey concaténée avec le titre de la page actuelle (document.title). Le cookie est défini pour être accessible à toutes les pages du site (chemin /).
4. Enfin, la fonction retourne la valeur de prevPageTitle, qui est le titre de la page précédente stocké dans les cookies. Si aucun titre de page précédente n’a été trouvé, la valeur de retour sera null.

23 – JavaScript pour obtenir le temps passé sur la page précédente.

Cette variable GTM « JavaScript personnalisé » utilise les cookies pour stocker le temps passé sur la page précédente.

function() {

  var cookieName = 'prevPageTime';

  var prevPageTime = document.cookie.replace(new RegExp("(?:(?:^|.*;\\s*)" + cookieName + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1") || null;

  var currentTime = new Date().getTime();

  document.cookie = cookieName + "=" + currentTime + "; path=/";

  return prevPageTime ? currentTime - prevPageTime : null;

}

Voici le détail du JavaScript GTM ligne par ligne :

1. Définition d’une variable cookieName avec la valeur « prevPageTime ». Cette variable représente le nom du cookie utilisé pour stocker l’heure de la page précédente.
2. Récupération de la valeur du cookie prevPageTime en utilisant document.cookie. La méthode replace est utilisée avec une expression régulière pour extraire la valeur du cookie. Si aucune valeur n’est trouvée, la valeur par défaut est null.
3. Obtention de l’heure actuelle en utilisant new Date().getTime(). Cela renvoie le nombre de millisecondes écoulées depuis le 1er janvier 1970 à 00:00:00 UTC.
4. Enregistrement du cookie prevPageTime avec la valeur de currentTime en utilisant document.cookie. Le chemin du cookie est défini sur « / ».
5. La fonction retourne la différence entre currentTime et prevPageTime si prevPageTime n’est pas null. Sinon, elle renvoie null.

24 – JavaScript pour obtenir le type d’événement d’interaction.

Cette variable GTM « JavaScript personnalisé » distingue les clics gauche, droit et du milieu de la souris.

function() {

  return function(e) {

    switch (e.which) {

      case 1: return 'left';

      case 2: return 'middle';

      case 3: return 'right';

    }

  };

}

Voici le détail du JavaScript GTM ligne par ligne :

1. La première ligne déclare une fonction anonyme sans paramètres. Cette fonction externe sert de conteneur pour la fonction interne qui sera retournée.
2. La deuxième ligne déclare une fonction anonyme qui prend un paramètre e.
3. La ligne suivante utilise l’instruction switch pour évaluer la valeur de la propriété which de l’objet e. La propriété which représente le code de la touche ou du bouton de la souris qui a été pressé ou relâché.
4. Le switch examine la valeur de e.which et exécute le code correspondant au cas correspondant. Dans ce cas, il y a trois cas possibles :
   • Si e.which est égal à 1, le code case 1 est exécuté, et la fonction retourne la chaîne de caractères 'left' (gauche).
   • Si e.which est égal à 2, le code case 2 est exécuté, et la fonction retourne la chaîne de caractères 'middle' (milieu).
   • Si e.which est égal à 3, le code case 3 est exécuté, et la fonction retourne la chaîne de caractères 'right' (droite).
5. Si e.which ne correspond à aucun des cas spécifiés, la fonction interne ne retourne rien (undefined).
6. La fonction interne est retournée et peut être assignée à une variable ou appelée avec des arguments ultérieurement.

25 – JavaScript pour obtenir la liste des paramètres item_id de la page panier.

Cette variable GTM « JavaScript personnalisé » récupère les identifiants d’articles à partir de la couche de données (dataLayer) d’une page web. Il retourne un tableau avec tous les item_id de la page panier. Assurez-vous d’avoir intégré l’événement GA4 « view_cart » ou « begin_checkout ».

function() {

    var itemIds = [];

    if (window.dataLayer) {

        for (var i = 0; i < window.dataLayer.length; i++) {

            if (window.dataLayer[i]['event'] === 'view_item') {

                var items = window.dataLayer[i]['ecommerce']['items'];

                for (var j = 0; j < items.length; j++) {

                    itemIds.push(items[j]['item_id']);

                }

            }

        }

    }

    return itemIds;

}

Voici le détail du JavaScript GTM ligne par ligne :

1. La fonction est définie sans aucun paramètre. Elle ne prend pas d’argument lors de son appel.
2. À l’intérieur de la fonction, une variable itemIds est déclarée et initialisée comme un tableau vide. Cette variable sera utilisée pour stocker les identifiants des articles.
3. La condition if (window.dataLayer) vérifie si la variable window.dataLayer est définie et non nulle. window.dataLayer est une variable globale utilisée couramment dans le suivi des événements sur les sites web.
4. Si window.dataLayer existe, une boucle for est utilisée pour parcourir tous les éléments de window.dataLayer.
5. À chaque itération de la boucle, la condition if (window.dataLayer[i]['event'] === 'view_cart') vérifie si l’événement en cours est une vue de panier. L’événement est identifié par la propriété event de l’élément window.dataLayer[i].
6. Si l’événement est une vue de panier, la variable items est affectée à la valeur de la propriété ecommerce.items de l’élément window.dataLayer[i]. Cette propriété contient les détails des articles du panier.
7. Une autre boucle for est utilisée pour parcourir tous les éléments de items.
8. À chaque itération de la boucle interne, l’identifiant de l’article (item_id) est extrait de l’élément items[j] et ajouté à la variable itemIds à l’aide de la méthode push(). Cela permet de stocker l’identifiant de chaque article du panier.
9. Une fois toutes les itérations terminées, la fonction retourne le tableau itemIds qui contient les identifiants des articles du panier.

En résumé, ce script récupère les identifiants des articles d’un panier en parcourant un objet window.dataLayer à la recherche de l’événement « view_cart » et en extrayant les identifiants des articles correspondants.

A vous de jouer !

Voilà, nous avons présenté dix exemples de scripts utiles en utilisant les variables « JavaScript personnalisé » dans Google Tag Manager. Ces scripts vous permettent d’ajouter des fonctionnalités personnalisées à votre analyse en capturant des informations spécifiques ou en interagissant avec des éléments sur la page.

N’oubliez pas d’adapter les variables dans chaque script en fonction de votre contexte et de vos besoins. Assurez-vous de créer les variables nécessaires dans Google Tag Manager et de les référencer correctement dans les scripts.

Utiliser ces scripts peut vous aider à obtenir des données plus précises et pertinentes, ce qui vous permettra d’améliorer votre compréhension des interactions des utilisateurs avec votre site web.

N’hésitez pas à expérimenter avec ces scripts et à les adapter en fonction de vos propres objectifs et exigences. Et n’oubliez pas de toujours tester et valider vos modifications avant de les mettre en production.

En utilisant efficacement les scripts personnalisés dans Google Tag Manager, vous pouvez augmenter la flexibilité et les capacités de votre analyse, vous permettant ainsi d’obtenir des informations précieuses pour optimiser votre site web et offrir une meilleure expérience utilisateur.

Réinventez votre Analytics avec une Consultation Gratuite.

Réservez une session de 15 minutes pour discuter de l'optimisation de votre Analytics et des possibilités offertes par l'automatisation AI.

Réservez votre session