Custom Events Tracking

Learn how to use the Intelligems Javascript API to track visitors on your store.

Prerequisites

Make sure Intelligems is installed on your site. Verify this by running window.igData in your browser's developer console.

Setup

The Intelligems tracking object igEvents can be treated like an array, where events are pushed to the array. The implementation should be roughly analogous to Google's Data Layer.

igEvents is created as an array if the Intelligems script hasn't yet loaded. This ensures that timing won't affect the integrity of your tracking. Once it has loaded, all events in this array will be retroactively tracked, and all consequent events will be tracked immediately.

<script>
    window.igEvents = window.igEvents || [];
    window.igEvents.push({"event": "myCustomEvent"});
</script>

API

Track an event by calling igEvents.push() . The object passed into push accepts two parameters:

event: the name of your event, meant to uniquely identify the action you're tracking. This will be used to categorize events when viewing analytics in our dashboard.

Commas, single quotes, and trailing spaces will be stripped from event names

properties : arbitrary key value pairs, anything goes as long as it's valid JSON. Use this to add context relevant to the event . It'll help you create more fine grained queries among a single event when digging into your analytics.

Properties will be saved for future use, but are not currently available for analysis in Intelligems analytics.

Intelligems Context

Intelligems appends other meaningful metadata to your events. This lets you associate custom event flows with actionable outcomes that Intelligems tracks by default. Includes but not limited to:

• Intelligems assigned unique user identifier, set in local storage so it persists across sessions

• Test groups the user is assigned to for any active experiment

• Campaigns the user is included in

Example Usage

Track a button click by pushing to igEvents in the onclick handler.

<script>
function trackIntelligemsEvent(event) {
  window.igEvents = window.igEvents || [];
  window.igEvents.push({
    "event": event
  })
}

const myButton = document.getElementById("#my-button");
myButton.addEventListener("click", () => {
  trackIntelligemsEvent("My Button Clicked");
})
</script>

Track a page view in a window event listener.

window.addEventListener("load", (event) => {
  window.igEvents = window.igEvents || [];
  window.igEvents.push({
    "event": "Product Page Viewed"
  })
});

Track a mouseover event on an element.

myElement.addEventListener("mouseover", (event) => {
  window.igEvents = window.igEvents || [];
  window.igEvents.push({
    "event": "ATC Hovered"
  })
});

Viewing Custom Events in Intelligems

Once you have set up Custom Event Tracking, you can view your custom events in two locations in the Intelligems Analytics Dashboard:

1. You can view how many visitors have completed your custom event(s) in the charts at the bottom of the Visitors tab.

2. You can filter your results to visitors that have completed your custom event(s) under the filters option in the top right corner of the analytics dashboard.