Browser Integration

Overview

The topiq-event-tracker is a JavaScript library designed to track user events and interactions on web applications. By integrating the Topiq Tracker into your project, you can collect valuable data to analyse user behaviour, improve user experience, and make informed decisions.

This guide provides step-by-step instructions on how to install and use the Topiq Tracker in any JavaScript project.

---

Install via npm:

Install the topiq-event-tracker package via npm by running the following command in your project directory.

command

npm i topiq-event-tracker

Import the Tracker:

In your JavaScript project, import the initializeTopiqDataLayer function from the tracker file

javascript

import initializeTopiqDataLayer from "topiq-event-tracker";

Initialize the Tracker:

Call the initializeTopiqDataLayer function with the required configuration options. Provide the configuration object containing access_token, app_id, and url:

javascript

initializeTopiqDataLayer({
  access_token: 'YOUR_ACCESS_TOKEN',
  app_id: 'YOUR_APP_ID',
  url: 'YOUR_API_ENDPOINT_URL'
});

initializeTopiqDataLayer function will assign the topiqDataLayer function as a property of the window object, making it accessible globally throughout the application.

Use the Tracker:

now we can use the tracker by calling topiqDataLayer function from window object anywhere in the project

javascript

<script type="text/javascript">
  
var payload = {};

window.topiqDataLayer(payload)

</script>

Payload: For payload structure, please refer to API documentation

Example:

Search Event

The search page event should be monitored when users conduct searches on the site, including interactions with the Autosuggest widget. This tracking encompasses the queries users use to retrieve responses, even for zero-result queries. Utilize the provided code snippet as a guide to invoke the search tracking function.

CoffeeScript

<script type="text/javascript">
  
var payload = {
  event_time: "2023-07-24T10:28:31.302Z",
  session_id: "abc123",
  session_user_id: "user123",
  user_id: "user456",
  device: "mobile",
  location: "New York",
  channel: "web",
  metadata: { 
    language: "en",
    browser: "Chrome"
  },
  ab_flag: "variantA",
  event_type: "SearchEvent",
  search_term: "cat",
  search_result_count: 10,
  impressions: [
    {
      product_id: "prod123",
      rank: 1,
      instock: true
    }
  ]
}


window.topiqDataLayer(payload)

</script>

Please refer the links below for list of Events.

Types of Events
Content Site Events