ActivityTracker

Activity tracker brings a simple way to track user activity on your website. It can be used to track user page views. It is a simple and lightweight option to determine user favorites sites and pages.

Installation

To use the ActivityTracker component in your project, you can install it via npm.

npx rosalana-dev@latest add ActivityTracker

Usage

Using the ActivityTracker is very simple. Follow the steps below to start tracking user page visits. The ActivityTracker uses the vue-router to track the user's page visits.

Tracking

In your route middleware or file that is responsible for managing route changes in vue-router, you can configure and initialize the ActivityTracker as follows.

const { config, track } = useActivity();

First you have a option to configure how the ActivityTracker will behave. You can set the following options:

// Set the maximum number of activities to store if you don't want to limit the number of activities simply don't set this option
config.max = 10; 
// Set routes that will be ignored by the `ActivityTracker`
config.exclude = ['/login', '/register'];
// You can also change the key that will be used to store the activities in the storage
config.storage = {
    key: 'my-activity-key' // default is 'activity'
    storage: localStorage // default is localStorage
}

When you have configured the ActivityTracker you can start tracking the user activities by calling the track function.

track(curentRoute: RouteLocationNormalizedGeneric);

Getting Activities

To get the activities that have been tracked you can call the activities function.

The activities function provides a simple query system to filter the activities as you need. It can merge activities in groups and also determine the page type such as index, show, create or edit.

const { activities } = useActivity();

Function activities is like for creating scope for filtering activities. By the parameter, you can filter activities by the path or by group@type string. Group is like a category for the activities and it is computed from the path. Type is the type of the page as mentioned above.

// You can scope all
const scopeAll = activities();
// You can scope by path
const scopeByPath = activities('/some-path');
// You can scope by group
const scopeByGroup = activities('some-group');
// You can scope by type (only index pages)
const scopeByType = activities('@index');
// or you can combine them
const scopeByGroupAndType = activities('some-group@index');

When you have scoped the activities you can work with them as so. Every function chained after will affect only the scoped activities.

// Get full computed object
const full = myScope.get(limit?: number);
// Get only the ids parameters of the activities
const ids = myScope.ids(limit?: number);
// Remove all activities from the scope
myScope.remove();

API

Objects returned by the get() function has the following properties:

• count: The number of visits.
• lastVisited: The last visited page.
• meta: The meta information about the page (name, params, query).
• path: The path of the page.
• score: The score of the activity. It is computed based on the last visited and the count of visits.

You dont have to determine which activity is the most relevant. The ActivityTracker has a simple algorithm that will determine the most relevant activity based on the last visited and the count of visits. This is the score property. When you call the get() function the activities will be sorted by the score automatically.