Dans l'article précédent, je vous ai montré la configuration de base pour GTM dans une application Vue.JS. Voyons maintenant comment vue-gtm met le datalayer à jour à chaque chargement de page. Ensuite, nous ajouterons un titre pour chaque page, en utilisant le router Vue.JS. Nous verrons aussi comment enregistrer n'importe quel type d'évènement dans le dataLayer avec vue-gtm.

Vous pouvez vous référer au projet GitHub suivant pour obtenir tout le code source: https://github.com/JeanRemyDuboc/vue-gtm/tree/Part-2.

Comment vue-GTM déclenche un évènement page_view avec le routeur Vue.js

Quand nous avons initialisé notre application dans main.ts, nous avons ajouté le routeur dans notre configuration:

app.use(router)

Nous avons ensuite configuré l'application avec une nouvelle instance de vue-gtm :

app.use(
  createGtm({
    id: "GTM-xxxx",
    vueRouter: router
  })
)

Une fois cette configuration ajoutée, vue-gtm va mettre à jour le dataLayer avec un nouvel évènement à chaque changement de page. Mais comment ça marche ?

Examinons le module @gtm-support/core, qui est à la base de vue-gtm. Dans le fichier /src/gtm-support.ts, la fonction trackView() a pour paramètres le nom de page (screenName) et le chemin (path). Plus loin dans la fonction, on récupère l'objet dataLayer du contexte window:

const dataLayer: DataLayerObject[] = (window.dataLayer =
        window.dataLayer ?? []);

On déclenche ensuite la fonction dataLayer.push avec les paramètres nécessaires:

  dataLayer.push({
    ...additionalEventData,
    event: this.options.trackViewEventProperty ?? 'content-view',
    'content-name': path,
    'content-view-name': screenName,
  });

trackView() est déclenchée dans @gtm-support/vue-gtm/index.js, dans la méthode afterEach() du routeur. Pour plus d'information sur la fonction afterEach(), voyez la documentation du routeur Vue.js. Notez l'ajout de additionalEventData, qui permet d'ajouter des propriété personalisées dans chaque route (documentation ici: https://github.com/gtm-support/vue-gtm#sync-gtm-with-your-router).

C'est comme si on écrivait le code suivant manuellement, à chaque fois qu'une "route" Vue.js est déclenchée:

dataLayer.push({
    event: 'content-view',
    content-name: <chemin de la route (path)>,
    content-view-name: <nom de la route>
})

Notez que le nom de l'évènement ajouté au datalayer est "content-view" par défaut, mais peut être modifié dans notre configuration avec le paramètre trackViewEventProperty, par exemple:

app.use(
  createGtm({
    id: "GTM-T3BRZPM",
    vueRouter: router,
    trackViewEventProperty: 'page-load'
  })
)

Avec cette nouvelle configuration, quand nous naviguons sur la page /about le code déclenché sera équivalent à :

dataLayer.push({
    event: 'page-load',
    content-name: "/about",
    content-view-name: "About"
})

Mettre à jour les titres de page avec le routeur Vue.js

En naviguant dans l'application Vue, notez que la balise <title> ne change pas lorsqu'on change de page. Cette balise est codée "en dur" dans index.html. Sans titre distinct, on aura du mal à identifier chaque page sur Google Analytics, et pour l'utilisateur c'est mieux d'avoir un titre explicite pour chaque page. Modifions donc le contenu de cette balise de manière dynamique, en utilisant le routeur de notre application. L'objectif est d'utiliser la valeur "name" pour chaque route, et de placer cette valeur dans <title> à chaque changement de page.

Pour cela, nous utilisons la méthode beforeEach du routeur. Comme son nom l'indique, cette fonction se déclenche avant chaque chargement de route. Une fois déclenché, nous pouvons mettre en place une nouvelle valeur pour <title> avec la propriété name de la route qui vient d'être chargée. Pour faire tout ça, ajoutez le code ci-dessous dans main.ts:

router.beforeEach((to, from, next) => {
  // Obtenir le nom de la route s'il existe
  if(typeof to.name === "string"){
    const title = to.name
    // Si la route a bien un nom, mettons-le comme titre dans la balise <title>
    if (title) {
      document.title =  title
    }
  }
  // Continuons les opérations nécessaires pour résoudre la route
  next()
})

Et voilà! Notre navigation de page est terminée.

Ajouter un evenement personalisé dans le dataLayer

Si nous ajoutons d'autres interactions dans l'application, nous devrons les traçer manuellement. Imaginons que notre application permette aux utilisateurs de s'inscrire. Une fois l'inscription faite, on pourra déclencher l'évènement login, qui fait parti des évènements recommandés dans GA4.

Pour cela, rien de plus simple: utilisons useGtm et sa méthode trackEvent (similaire à trackView):

import { useGtm } from '@gtm-support/vue-gtm';

const gtm = useGtm()
gtm.trackEvent({
  event: 'login'
})

Vous pouvez utiliser ce déclencheur sur vos vues de page ou ailleurs dans l'application, en fonction des besoins. Voyez mon exemple ici: https://github.com/JeanRemyDuboc/vue-gtm/blob/Part-2/src/views/AboutView.vue.

Et voilà! Vous pouvez maintenant traçer tous vos évènement avec Vue.js et Google Tag Manager. Maintenant, il n'y a plus qu'à configurer Google Analytics dans Google Tag Manager, et ajouter une bannière RGPD.