Si vous utilisez VueX pour gérer l’état de vos applications basées sur Vue, alors intégrer le plugin d’OpenReplay pour suivre les mises à jour de l’état est très simple.

Si vous souhaitez suivre l’exemple, utilisez le code publié ici.

La première chose dont nous devons nous préoccuper est l’intégration du tracker d’OpenReplay dans le projet. Nous avons affaire à un projet basé sur Vue, ce qui signifie que notre point d’entrée sera le fichier main.js. Installez d’abord le tracker avec :

yarn add @openreplay/tracker

Ou utilisez npm si vous préférez :

npm install @openreplay/tracker

Une fois cela fait, après avoir configuré le projet dans la plateforme, récupérez la KEY du projet et enregistrez-la dans un fichier .env situé à la racine du projet.

VUE_APP_OPENREPLAY_PROJECT_KEY=<your project key here>

Remarquez le nom de la variable d’environnement. Elle commence par VUE_APP_ car, lorsque nous faisons cela, WebPack remplacera sa valeur partout où nous utilisons le code process.env.VUE_APP_OPENREPLAY_PROJECT_KEY, ce qui nous évite d’avoir à livrer le fichier de configuration réel au client.

Maintenant, à l’intérieur de votre dossier src, créez un dossier tracker et un fichier index.js à l’intérieur de celui-ci. Ce fichier exportera une seule fonction : startTracker, qui configurera tout et démarrera le tracker.

import Tracker from '@openreplay/tracker';

import {v4 as uuidV4} from 'uuid'

function defaultGetUserId() {
   return uuidV4() 
}

export function startTracker(config) {

    console.log("Starting tracker...")

    const getUserId = (config?.userIdEnabled && config?.getUserId) ? config.getUserId : defaultGetUserId
    let userId = null;

    const trackerConfig = {
        projectKey: config.projectKey
    }

    const tracker = new Tracker(trackerConfig);

    const pluginReturns = {}
    Object.keys(config?.plugins).forEach( pk => {
        pluginReturns[pk] = tracker.use(config?.plugins[pk]())
    })
 
    if(config?.userIdEnabled) {
        userId = getUserId()
        tracker.setUserID(userId)
    }
    console.log("tracker: user id: ", userId)

    tracker.start();
    return {
        tracker,
        userId,
        ...pluginReturns
    }
}

Ce dont vous devez vous préoccuper maintenant, c’est que cette fonction fait tout ce dont vous avez besoin. Tout ce que vous avez à faire est de passer la project key lors de son appel. Comme ceci (depuis le fichier main.js) :

import {startTracker} from './tracker/index'

let {vuexTracker} = startTracker({
    projectKey: process.env.VUE_APP_OPENREPLAY_PROJECT_KEY,
})

Comme nous l’avons déjà vu, la ligne process.env.VUE_APP_OPENREPLAY_PROJECT_KEY sera remplacée par votre véritable project key lors du rendu de la page.

Maintenant, ajoutons le plugin VueX afin de pouvoir également commencer à suivre les changements d’état.

Le plugin s’installe facilement avec une seule ligne :

yarn add @openreplay/tracker-vuex

Après cela, nous pouvons l’importer dans notre code et le passer dans l’objet de configuration à la fonction startTracker.

Revenez à la définition de cette fonction et remarquez que nous avons déjà du code pour gérer les plugins. En fait, l’élément plugins de la configuration est une map qui reçoit les plugins (avec une clé de notre choix) et renvoie ce que nous obtenons en appelant la méthode use, également sur la même clé que celle utilisée pour le plugin.

Laissez-moi vous montrer ; ceci se trouve, à nouveau, dans le fichier main.js :

//your other imports go here...
import trackerVuex from '@openreplay/tracker-vuex';
import store from './store'

let {vuexTracker} = startTracker({
    userIdEnabled: true,
    projectKey: process.env.VUE_APP_OPENREPLAY_PROJECT_KEY,
    plugins:{
      'vuexTracker': trackerVuex
    } 
})

new Vue({
  router,
  store: store([vuexTracker]),
  render: h => h(App)
}).$mount('#app')

Remarquez comment nous :

1. Appelons la fonction startTracker avec la map plugins. La chaîne « vuexTracker » est quelque chose que j’ai inventé sur le moment, mais vous pouvez utiliser n’importe quelle chaîne ici.
2. Déstructurons la réponse et récupérons la clé « vuexTracker » (la même clé que celle utilisée pour la map). Tant que ces deux clés correspondent, vous pouvez utiliser n’importe quelle chaîne.
3. Passons la fonction vuexTracker en paramètre à la fonction store.

La variable vuexTracker contient essentiellement notre plugin VueX ; ce plugin sera rattaché au store VueX et, pour cela, nous utilisons le code suivant :

import Vue from 'vue'
import Vuex from 'vuex'

import account from './account'
import product from './product'

Vue.use(Vuex)

export default function (plugins = []) {
  return function() {
    const Store = new Vuex.Store({
      modules: {
        account,
        product
      },

      strict: process.env.DEV,
      plugins
    })

    return Store
  }
}

L’extrait ci-dessus est votre code standard pour configurer un store ; nous avons simplement ajouté la possibilité de configurer des plugins afin de nous assurer que nous pouvons suivre ce qui arrive à l’état dans notre application.

Une fois que cela est prêt, vous devriez voir une nouvelle option VueX dans les rejeux de session, comme ceci :

Vous pouvez consulter ce dépôt pour obtenir le code source complet d’une application fonctionnelle utilisant VueX avec le Tracker.

Si vous rencontrez des problèmes pour configurer le Tracker ou le plugin VueX dans votre projet, contactez-nous sur notre communauté Slack et posez directement vos questions à nos développeurs !