Vue.js Tracking SDK Documentation

Introduction

This SDK allows you to track user activities in a Vue.js application. It includes tracking for different types of events such as click, mouse movement, navigation, drag and drop, keyboard input, and idle time. The SDK also includes a Vue.js directive for easy integration into your Vue.js components.

Features

• Event Tracking: Supports various event types - click, mouse movement, navigation, drag and drop, keyboard input, and idle.
• Debounce Function: Controls the frequency of tracking for certain events.
• FingerprintJS: Implements FingerprintJS for visitor identification.
• Vue.js Directive: Provides a Vue.js directive for easy tracking integration into your components.

Quick Start

First, install the SDK using npm:

npm install vue-sdk-analytics

Then, import the SDK into your Vue.js application:

import { createApp } from 'vue'

import App from './App.vue'
import router from './router'

import SDK from 'vue-sdk-analytics'

const app = createApp(App)

app.use(SDK, router, {
    SDK_APP_ID: '<YOUR_APP_ID>',
    SDK_APP_SECRET: '<YOUR_APP_SECRET>',
    SDK_API_URL: '<YOUR_API_URL>',
    IDLE_TIMEOUT: 5 * 60 * 1000, // Optional
})

app.use(router)

app.mount('#app')

To use the tracking directive in a component:

<button v-tracker="'click.BUTTON'">Click Me</button>

Documentation

SDK Options

The Options interface defines the following properties that are required for the SDK to function:

• SDK_APP_ID: Your application ID.
• SDK_APP_SECRET: Your application secret.
• SDK_API_URL: The API URL the SDK should use.
• IDLE_TIMEOUT: Optional. The timeout in milliseconds for idle event tracking. (Default: 15 minutes)

EventEnum

The EventEnum enumeration lists the supported event types for tracking:

• click
• mouse
• navigation (Automatically tracked)
• drag
• keyboard
• idle (Automatically tracked)
• hover

Output

The SDK sends the following data to the API (YOUR_API_URL):

headers :

{
    "Content-Type": "application/json",
    "App-Id": "<YOUR_APP_ID>",
    "App-Secret": "<YOUR_APP_SECRET>",
},

body :

{
    "event": "keyboard",
    "tag": "INPUT",
    
    "host": "localhost:5173",
    "path": "/",
    
    "sessionId": "<SESSION_ID>",
    "visitorId": "<VISITOR_ID>",

    "timestamp": "2023-07-12T13:02:54.139Z",
}