Dernière mise à jour le : 25 Sep, 2020

Google Tag Manager : utiliser une variable dans le “custom html” ou dans une autre variable javascript

    Dans Google tag manager, il arrive fréquemment que l’on veuille utiliser la valeur d’une variable dans du code html, ou dans la définition d’une autre variable. Nous allons voir ici un exemple qui montre comment procéder.

    Exemple d’utilisation d’une variable

    Imaginons que vous soyez sur un environnement multi-site, avec à un tag à appeler, qui soit presque le même sur tous vos sites. Par exemple le code de tracking Facebook (Facebook pixel), dont seul l’identifiant va varier. Il est alors utile d’utiliser une variable de type “Lookup table”, statique ou via Regex, pour stocker les identifiants en fonction du domaine par exemple.

    Dans l’exemple ci-dessous, je souhaite appeler un tag Google Tag Manager, dont l’ID dépend du domaine sur lequel je me trouve.

    Les étapes que nous allons suivre sont les suivantes :

    • Construire une “Lookup Table”
    • Utiliser la variable dans le “custom html”
    • Vérifier le bon fonctionnement

    Construire la “Lookup table”

    C’est assez simple. Je crée une variable de type “dynamic table”, qui se base sur le nom de domaine (Hostname plus précisément) pour attribuer un numéro de tag différent.

    Screenshot 2020 09 15 at 19.34.24 | Google Tag Manager : Utiliser une variable dans le "custom html"

    Utiliser la variable dans le “custom html”

    Dans le code standard, je remplace l’ID du conteneur tag manager par la variable entre {{}} :

    Code d’origine :

    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer', 'GTM-5ABCDEF');</script>
    <!-- End Google Tag Manager -->

    Code modifié :

    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer', {{GTM - Dynamic Id}});</script>
    <!-- End Google Tag Manager -->

    Vérifier

    Le mieux est de regarder directement le code de la page. En effet, la console de debug Google Tag Manager ne montrera pas le code avec la variable calculée, mais une variante indiquant que la variable est quand même calculée :

    Screenshot 2020 09 16 at 07.57.04 | Google Tag Manager : Utiliser une variable dans le "custom html"

    Suivez l'actualité Data

    Newsletter UnNest

    Ne manquez aucun contenu : recevez chaque mois la liste des derniers articles publiés.