Ajouter Google Analytics à un site Nuxt

Si vous avez déjà installé Google Analytics sur un site Web, vous connaissez surement le script analytics.js. Cette solution est en train d’être remplacée par Google au profit de sa nouvelle solution gtag.js ou Global Site Tag.
Nous allons voir dans ce tutoriel comment utiliser GTAG sur un site utilisant NuxtJS

Installer Google analytics sur une application Nuxt JS

Pour installer Google Analytics sur un site Nuxt, on va utiliser la librairie vue-gtag.

Commençons par installer cette librairie: Le site sur lequel je vais installer Gtag, est sous NuxtJS v2, ce qui implique que c’est Vue v2 qui est utilisé. On va donc utiliser la version 1 de vue-gtag , la version 2 étant uniquement compatible avec la version 3 de VueJS.

npm install vue-gtag@1 --save

Cette librairie va être utilisée comme plugin par NuxtJS, on va donc créer un plugin GoogleAnalytics.js dans le dossier plugins de notre application :

import Vue from 'vue'  
import VueGtag from 'vue-gtag'

Vue.use(VueGtag, {  
  config: {id: 'G-XXXXXXXXX-X'},  
  appName: 'MyApp'
})

Pensez à remplacer G-XXXXXXXXX-X par l’identifiant de votre compte Google Analytics, et MyApp par le nom de votre application.

Activer le plugin dans le fichier nuxt.config.js de votre application :

plugins: [  
    {
        src: '~/plugins/GoogleAnalytics.js',
        mode: 'client'
    }
]

A ce stade, Google Analytics est installé sur notre application.

Single Page Application (SPA) et Google Analytics

En utilisant cette libraire et sans configuration particulière, Google Analytics va remonter les changements de pages sur votre site même si vous utilisez une configuration en Single Page Application (SPA). La librairie va se greffer aux événements du routeur de Nuxt (vue-router) et va remonter les changements de pages du site à Google Analytics.

Créer des Événements Google Analytics personnalisés

Vous pouvez définir des événements personnalisés qui peuvent êtres remontés à Google Analytics. Par exemple, pour le site d’un de mes projects, AutoTube (une alternative décentralisée à YouTube) je souhaite avoir un retour sur les téléchargements de l’application.

Comme vous pourrez le constater en allant sur le site d’AutoTube, il y a trois boutons qui permettent de télécharger l’application. Un pour la version Windows, un pour la version Mac et un pour la version Linux. Je souhaite connaitre le nombre de téléchargements de chacune de ces trois versions.

Pour cela, je vais créer un événement qui sera remonté à Google Analytics lors du clic sur un des trois boutons.

Sur chaque bouton on ajoute un gestionnaire d’événement click qui va exécuter la fonction sendDownloadEventToGa en lui passant comme paramètre le système d’exploitation choisi :

<v-btn
    :disabled="card.link === ''"    
    :href="card.link"
    @click="sendDownloadEventToGa(card.os)"
>

La fonction sendDownloadEventToGa va remonter l’événement à Google Analytics:

sendDownloadEventToGa (os) {
    this.$gtag.event('download', {
        event_category: 'download',
        event_label: 'os',
        value: os
    })
}