Skip to content
Logspot Blue White Logo Concord

JS SDK

npm version

Logspot SDK for browser applications built with React, Next.js, Angular, etc.

Installation

npm install @logspot/web

or

yarn add @logspot/web

Usage

Init

import Logspot from '@logspot/web';


Logspot.init({ publicKey: 'YOUR_PUBLIC_KEY' });
  • publicKey - project public key
  • cookiesDisabled - use this property to disable anonymous user tracking
  • cookieDomain - use this property to set root domain (cross-domain tracking)
  • cookieExpirationInSeconds - use this property to define when user id should expire (by default, it’s 2 years)
  • enableAutoPageviews - enable auto tracking of pageviews (default: true)
  • enableAutoClicks - enable auto capture of user clicks (default: false)
  • externalApiUrl - API proxy url
  • onLoad - callback function to perform actions when Logspot is loaded. E.g. register super properties before initial pageview
  • eventMapper - callback function which maps tracking payload to a new payload. With it, you can adjust Logspot’s events to your needs.

Track

Logspot.track({
  event: 'UserSubscribed',
  userId: '[email protected]',
  metadata: { additionalData: '123' },
});

Parameters:

  • name - event name e.g. GroupCreated
  • userId (optional) - unique user id which will link the event to a specific user. It can be integer, UUID or even an email.
  • metadata (optional) - you can attach a JSON object to your event.
  • notify (optional) - triggers mobile notifcation.
  • message (optional | max 255 chars) - messaged displayed in the app and in the notification.

Maximum size of the payload is 3kB.

Track using CSS classes

You can also track clicks on your website by using lgspt- classname. All clicks will be automatically tracked. The event name will be fetched from the classname.

<button class="my-class other-class lgspt-sign-up">Sign up</button>

Above click will result in the Sign Up event.

Super properties

You can define super properties which will be assigned to every event and pageview by calling register method. Previous properties will be merged with new properites (the new props will overwrite the prev props).

?> Super properties will be stored in cookies for 30 days (if cookies are enabled)

Register super properties

Logspot.register({
  email: '[email protected]',
  name: 'John',
});

Get super properties

const props = Logspot.getProperties();
// {
//   email: "[email protected]",
//   name: "John",
// }

Unregister super properties

You can unregister super property when it’s not needed anymore.

Logspot.unregister('email');

Reset super properties & user id

When you want to clean up super properties and user id, use reset method.

Logspot.reset();

How to configure super properties for all events including the first pageview?

!> The first pageview is sent when the script is loaded. If we call register after init, the first pageview won’t have super properties.

We need to use onLoad parameter in the sdk config. In the onLoad, you can call register method to register super properties for all events or any other method.

Register static properties:

import Logspot from "@logspot/web";


Logspot.init({ ..., onLoad: () => {
    Logspot.register({ siteName: "Google" })
}});

or register dynamic properties with e.g. API call:

import Logspot from "@logspot/web";


Logspot.init({ ..., onLoad: async () => {
    const user = await fetchSomeUserData(userId);
    Logspot.register({ someUserProperty: user.property })
}});