WebInsider

WebInsider offers a comprehensive suite of features designed to provide deep insights into visitor behavior and engagement.

Table of Contents

1. WebInsider Overview
2. Installation
3. Usage
4. Using Different Builds

WebInsider Overview

Core Features:

• Visitor Tracking: Capture detailed information about visitors, including session data and behavior patterns.
• Session Management: Track individual visitor sessions, including all page views and interactions within a session.
• Event Tracking: Log specific events (e.g., button clicks, form submissions) on a page to understand user engagement.
• UTM Tag Tracking: Collect and analyze UTM parameters to track marketing campaign effectiveness.
• Browser Details: Gather granular information about the visitor's browser, device, and environment for detailed user profiling.

Installation

To install the WebInsider package, run the following command in your terminal:

npm install webinsider

Usage

Importing the Package

To start using WebInsider, import the class into your project:

import WebInsider from 'webinsider';

Loading a Token

You can load a token with the load method, which sets the global token for tracking events.

const wi = WebInsider.load('your-token-here');

Tracking Events

Once the token is loaded, you can track events using the trackEvent method. This allows you to send event data to the server.

wi.trackEvent('eventName', 'eventType', {
  prop1: 'value1',
  prop2: 'value2',
});

API

WebInsider

Methods

• load(token: string): void

  Loads the given token and updates the global token.

  Parameters:

  • token (string): The token to be loaded.

• static load(token: string): WebInsider

  Static method to create a new instance of WebInsider and load the given token.

  Parameters:

  • token (string): The token to be loaded.

  Returns:

  • WebInsider: A new instance of WebInsider with the token loaded.

Example

Here’s a complete example of how to use the WebInsider package:

import WebInsider from 'webinsider';

// Load the token
const wi = WebInsider.load('your-token-here');

// Track an event
wi.trackEvent('eventName', 'eventType', {
  prop1: 'value1',
  prop2: 'value2',
});

With WebInsider, event tracking becomes simple and efficient, allowing you to seamlessly manage site interactions.

Using Different Builds

1. Using UMD in Browser or Plain HTML

The UMD version can be used directly in a <script> tag in your HTML or JavaScript files. It exposes a global WebInsider object, which you can use to load tokens and track events.

Example:

<script src="https://unpkg.com/[email protected]/dist/tracker.umd.js"></script>
<script>
  // Initialize WebInsider and load the token
  const wi = WebInsider.load('your-token-here');

  // Optionally, store it in window for global access
  window.webinsider = wi;

  // Track an event
  wi.trackEvent('eventName', 'eventType', {
    prop1: 'value1',
    prop2: 'value2',
  });
</script>

This method is suitable for scenarios where you are not using any build system like Webpack or Babel, such as when integrating scripts into plain HTML files.

2. Using ES Modules (ESM) in Modern JavaScript or React

For modern browsers and bundlers like Webpack, Rollup, or Parcel, you can use the ES module version. React is a great fit for this.

Example in React:

import React, { useEffect } from 'react';

// Import WebInsider as an ES Module
import WebInsider from 'https://unpkg.com/[email protected]/dist/tracker.esm.js';

const App = () => {
  useEffect(() => {
    // Load the token
    const wi = WebInsider.load('your-token-here');

    // Optionally, store in window for global access
    window.webinsider = wi;

    // Track an event
    wi.trackEvent('eventName', 'eventType', {
      prop1: 'value1',
      prop2: 'value2',
    });
  }, []);

  return (
    <div>
      <h1>Welcome to WebInsider in React!</h1>
    </div>
  );
};

export default App;