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 travaillons avec 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

Cela étant fait, une fois que vous avez configuré le projet au sein de 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_ parce que, lorsque nous faisons cela, WebPack remplacera sa valeur partout où nous utilisons le code process.env.VUE_APP_OPENREPLAY_PROJECT_KEY, afin de nous éviter d’avoir à expédier le fichier de configuration réel au client.

Maintenant, dans votre dossier src, créez un dossier tracker et un fichier index.js à l’intérieur. 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 soucier maintenant, c’est que cette fonction fait tout ce dont vous avez besoin. Tout ce que vous avez à faire est de passer la clé de projet 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 la clé réelle de votre projet 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, sous la même clé que celle utilisée pour le plugin.

Laissez-moi vous montrer, ceci est de 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 comme paramètre à la fonction store.

La variable vuexTracker contient essentiellement notre plugin VueX ; ce plugin sera connecté 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 de pouvoir suivre ce qui arrive à l’état dans notre application.

Une fois que tout 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 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 sur votre projet, veuillez nous contacter sur notre communauté Slack et posez vos questions directement à nos développeurs !