Créer et manipuler un datalayer avec Google Tag Manager

Publié le 10/12/21

Accéder aux différentes variables de son DataLayer, en créer ou les modifier peut s’avérer assez compliqué surtout si on utilises Google Tag Manager. Voici une liste d’exemples pour mieux l’utiliser.

Créer un Datalayer ou accéder au DataLayer existant

<script>
  window.dataLayer = window.dataLayer || [];
  console.log(datalayer); // visualiser dans la console son dataLayer
</script>

Exemple de dataLayer Ecommerce

<script>
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
    'event': 'myevent', // mise en place de mon événement
    "ecommerce": {
      "purchase": {
        "actionField": {
          "id": "123456",
          "affiliation": "Outdoor Adventure Park",
          "revenue": "29.98",
          "location": "Bristol"
        },
        "products": [{
          "name": "Quad Biking",
          "id": "15727899",
          "category": "Vehicle Track",
          "price": "14.99",
          "quantity": "1"
        },
        {
          "name": "Clay Pigeons",
          "id": "16682710",
          "category": "Shooting Range",
          "price": "14.99",
          "quantity": "1"
        }]
      }
    }
  });
</script>

Pousser un événement personnalisé dans son DataLayer

<script>
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({'event': 'mynewEvent'});
</script>





On peut maintenant utiliser cet évenement comme trigger(déclencheur)

Ajouter une nouvelle variable à son DataLayer

Si la variable déclarée n’existe pas à l’emplacement voulu, celle-ci y est ajoutée

<script>
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({'ecommerce':{'purchase' :{ 'actionField' :{'newitem': 'my new value'}}}});
</script>

Ce qui donne :

  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
    'event': 'monEvenementPersonnalise',
    "ecommerce": {
      "purchase": {
        "actionField": {
          "id": "123456",
          "affiliation": "Outdoor Adventure Park",
          "revenue": "29.98",
          "location": "Bristol",
          "newitem": "my new value" // Notre nouvelle valeur se trouve dans l'objet purchase
        },
        ...

Accéder à une variable

Récupérer sa variable avec du javascript

Récupérer l’array qui a pour event “monEvenementPersonnalise”.

  var array = dataLayer.filter(item => (item.event === "monEvenementPersonnalise"));
  console.log(array);
  //[{…}]
  //  0:
  //  ecommerce: {purchase: {…}}
  //  event: "monEvenementPersonnalise"
  //  gtm.uniqueEventId: 4
  //  [[Prototype]]: Object
  //  length: 1
  //[[Prototype]]: Array(0)

Accéder à la valeur de location avec l’exemple ci-dessus :

  var array = dataLayer.filter(item => (item.event === "monEvenementPersonnalise"));
  var location = array[0].ecommerce.purchase.actionField.location;

Récupérer sa variable via GTM

Pour récupérer les données souhaitées via Google Tag Manager on peut soit définir une variable avec du Javascript personnalisé ou en utilisant les variables de couche de données.

Récupérer via les variables de couche de données

Pour par exemple stocker le nom du second produit(Clay Pigeons) de notre dataLayer dans une variable “dlv - productName”.

ecommerce.purchase.products.1.name

Utiliser une variable de javascript personnalisée

Pour récupérer la localisation de l’élément actionField, il nous faut d’abord créer une variable de couche de données pour nous faciliter un peu le travail.
Je créer donc une variable de couche de données plutôt simple en récupérant uniquement les données ecommerce > purchase du DataLayser.
Je nomme cette variable : dlv - ecommerce purchase datas

ecommerce.purchase


A présent je créer une variable Javascript Personnalisée que je nomme dlv - purchase location.

  
  function(){
    return {{dlv - ecommerce purchase datas}}.actionField.location;
  }
  

Modifier les valeurs de son DataLayer

On souhaite mettre à jour la valeur “Bristol” dans notre DataLayer par “New York” Dans une balise HTML de GTM on intègre le script suivant

<script>
  dataLayer.push({'ecommerce':{'purchase':{ 'actionField':{'location':"New York"}}}});
</script>

#Gtm

Thomas Hunckler

Expert SEO