track-user-activity-js

Web Activity Tracker SDK

Overview

The Activity Tracker SDK is a JavaScript library that enables developers to track user activities on a website. It provides functionalities to record custom events, user login/logout, track page visits, and visualize user interactions through a heatmap. This SDK is designed to assist developers in gaining insights into user behavior for better user experience and optimization.

Features

• Custom Event Tracking: Track custom events with event names, types, and additional data.
• User Authentication Tracking: Log user login/logout events with user-specific details.
• Page Visit Tracking: Monitor and record user visits to different pages on the website.
• Track Page Click: Visualize and analyze user interactions through a heatmap.
• Login and Logout User: Login And Logout User

Getting Started

Installation

npm install activity-tracker-sdk

Usage

  import {ActivityTracker} from "activity-tracker-sdk"
  const config = {
    developer_id: 'YOUR_DEVELOPER_ID',
    app_id: 'YOUR_APP_ID',
  };
  const activityTracker = new ActivityTracker(config);

Tracking Custom Events

This method tracks the user event like button click, mouse movement, hovers etc

@Param( eventName: string eventType: string eventData?: Record<string, any> pageUrl?: string )

Example

  activityTracker.trackCustomEvent('EventName', 'EventType', { eventData: 'additional data' });

User Authentication Tracking

This method is use to track a user currently logged in to the application, in other to associate the logged in user with the ipAddress

To login a user ensure that you call the activityTracker.login() method to track when a logged in user perform an action. and also the activityTracker.logout() to track when the user logs out

@Param( email: string userId: string )

Examples

  activityTracker.login('[e-mail]', 'user_id');
  activityTracker.logout();

Track Page Click

This method is use to track page clicks of a user in an application it accepts three parameter

@Param( scrollx: number, scrolly: number, pageUrl: string )

Example

  activityTracker.trackPageClick(scrollx, scrolly, pageUrl)

Track Page Visits

  activityTracker.trackPageVisit(pageUrl)

Configurations

The SDK requires the following configuration parameters:

  developer_id: Your developer ID.
  app_id: Your application ID.

Examples

Check the examples directory for usage examples and integration scenarios.

How To implement in a react application.

1. Register and account and Create a new application

2. Create Custom Hook to implement the Activity tracker SDK

import ActivityTracker from "track-user-activity-js";

export const useActivityTracker = () => {
  const tracker = new ActivityTracker({
  developer_id: "Your developer ID."
  app_id: "Your application ID."
  });


  const trackPageVisit = (page) => {
  tracker.trackPageVisit(page);
  };

  const trackPageClick = (pageUrl) => {
    const scrollX = window.scrollX || window.pageXOffset;
    const scrollY = window.scrollY || window.pageYOffset;

    tracker.trackPageClick(scrollY, scrollX, pageUrl);
};

 const trackInboundReferral = (pageUrl) => {
    tracker.trackInBoundReferral(pageUrl)
  }

  const trackOutBoundReferral = (pageUrl) => {
    tracker.trackOutboundUrl("/localhost:5000/about")
  }


  const trackCustomEvent = (eventName, eventType, eventData, pageUrl) => {
    tracker.trackCustomEvent(eventName, eventType, eventData, pageUrl);
  };

  const login = async (email, userId) => {
    try {
      await tracker.login(email, userId);
    } catch (error) {
      console.error("Error updating user address:", error);
    }
  };

  const logout = () => {
    tracker.logout()
  }


  return {
    trackPageVisit,
    trackHeatMap,
    trackCustomEvent,
    login,
    logout
  };
};

2. Import Hook in a layout file, or create a Hoc wrapper component

  const { trackPageVisit, trackHeatMap, trackCustomEvent, login, logout } = useActivityTracker()
  const router = useLocation()
  const currentBaseUrl = window.location.origin;

  useEffect(() => {
    trackPageClick(currentBaseUrl + router.pathname)
    console.log("Working")
  }, [currentBaseUrl, router.pathname, trackPageVisit])

  useEffect(() => {
    trackHeatMap("container")
  }, [trackHeatMap])

  function login() {
    login("email address","userId")
  }

  function logout(){
    logout()
  }

  <button onClick={() => trackCustomEvent("Click Button", "click")}>Click me</button>