Запустить трекер в приложении Nuxt довольно просто.

Хотя вы можете получить версию кода для копирования и вставки прямо из платформы при создании нового проекта, этот код слишком упрощён и может не соответствовать лучшим практикам, которых ожидает ваша команда или компания.

Вы можете использовать трекер как singleton-экземпляр — это рекомендуемый способ его использования. Таким образом вы сможете обращаться к трекеру из любой части вашего приложения:

import { tracker } from '@openreplay/tracker'

tracker.configure({ projectKey: "<your project key>" });

Или вы можете использовать класс 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);

    if(config?.userIdEnabled) {
        userId = getUserId()
        tracker.setUserID(userId)
    }

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

Эта функция отвечает за создание экземпляра Tracker и вызов метода start, который запускает работу.

Эта функция также принимает объект «конфигурации», который вы можете расширять для будущих возможностей. В этом примере показано, как опционально включить возможность уникальной идентификации пользователей. Вы можете использовать UUID по умолчанию, который будет уникальным для каждого пользователя при каждом посещении страницы. В качестве альтернативы вы можете предоставить пользовательскую функцию getUserId как часть конфигурации.

С помощью вашей пользовательской функции вы можете передавать идентификатор клиента вашего магазина, адрес электронной почты пользователя или любые данные, которые однозначно идентифицируют пользователя в вашем приложении. Таким образом, вы сможете отслеживать его session replays со временем на случай, если у него возникнет конкретная проблема, о которой другие не сообщают.

В этом примере предполагается, что ключ проекта, который вы можете получить в интерфейсе проектов OpenReplay, передаётся внутри объекта config через ключ projectKey.

Чтобы использовать эту функцию startTracker, вам нужно создать плагин, работающий только на стороне клиента, внутри каталога plugins вашего проекта Nuxt.

Обязательно добавьте суффикс .client к имени файла вашего плагина. Это нужно для того, чтобы Nuxt загружал его только на стороне клиента.

Код плагина может выглядеть так:

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

export default defineNuxtPlugin( (nuxtApp) => {
    
    return {
        provide: {
            startTracking: () => {
                let config = useRuntimeConfig().public
                
                let {userId} = startTracker({
                    userIdEnabled: true,
                    projectKey: config.openreplayProjectKey
                })
                //Optional if you need it
                let uid = useUserId()
                uid.value = userId
            }
        }
    }
})

Если вы хотите подробнее узнать о создании плагинов Nuxt, можете ознакомиться с их документацией.

Итак, этот плагин предоставляет функцию под названием startTracking, которая отвечает за вызов функции startTracker, определённой нами ранее. Но самое важное — внутри кода плагина вы можете получить переменную окружения, в которой вы сохранили ключ проекта. Помните, что эта информация не должна быть жёстко прописана в вашем проекте из соображений безопасности.

С помощью функции useRuntimeConfig вы можете получить доступ к публичным переменным окружения. В этом примере я обращаюсь к openreplayProjectKey, которая определена как NUXT_PUBLIC_OPENREPLAY_PROJECT_KEY.

В приведённом выше примере также показано, как использовать возвращаемое значение идентификатора пользователя вместе с composable, чтобы передавать это значение между компонентами. Эти две строки полностью необязательны.

После того как плагин сохранён в файл, вы можете использовать его так в вашем файле app.vue.

<script setup>
onMounted( () => {
  const {$startTracking} = useNuxtApp()
  $startTracking()
})
</script>

<template>
  <div>
    <NuxtPage />
  </div>
</template>

Обязательно вызывайте трекер после того, как сработало событие mounted. Сделать это можно с помощью composable onMounted. После этого трекер должен начать отправлять данные на платформу, как только приложение будет развёрнуто.

Чтобы посмотреть полный код рабочего приложения на основе Nuxt, вы можете ознакомиться с этим репозиторием.

Если у вас возникнут проблемы с настройкой трекера в вашем проекте на основе Nuxt, свяжитесь с нами в нашем сообществе Slack и задайте вопрос напрямую нашим разработчикам!