Grip-cdp-tracker NPM

Grip CDP Tracker

If you're hosting events with Grip, you can get further insights into exhibitors' and visitors' use of your own event site by using this Customer Data Platform package.

Installation

with NPM/Yarn

npm install @grip/cdp-tracker

yarn install @grip/cdp-tracker

Old-School JS Snippet

In HTML <head>:

<script src="https://cdn.jsdelivr.net/npm/@grip/cdp-tracker/..."></script>
<script>
  gripCdpTracker.init({
    /* ... */
  });
  gripCdpTracker.trackPageView();
  // ...etc.
</script>

Usage

import * as GripCDP from '@grip/cdp-tracker';

Initialization

GripCDP.init({
  app_id: 123,
  container_id: 123,
  registration_id: "N1408",
});

init() takes one object parameter with various properties.

You'll need to let us know the app_id and container_id. (Note that the container_id may also be called Event ID in some places.)

You can also set the registration_id if known. The from_id is actually preferred, but it's unlikely to be known unless the user is logged into a Grip app or website.

Tracking Page Views

GripCDP.trackPageView();

trackPageView() takes the following parameters

meta (optional)
- an object with any additional data which needs to be tracked
URL (optional)
- The document.URL value will be used unless you pass in an alternative string

Tracking Page Visibility

GripCDP.trackPageVisibility();

As the page is shown/hidden, the document.URL will be recorded along with page-shown/page-hidden. The document unload event is unreliable so we watch visibility instead, with the assumption that when it's invisible it has been closed.

GripCDP.startHeartbeat();

Every second that the page is visible, we'll record the fact. You can optionally pass a number of milliseconds between each "heartbeat". Every time this is called it will stop any existing heartbeat (using stopHeartbeat()) and start a new one.

Tracking Link Clicks

GripCDP.trackLinkClicks({
  content_title: "",
  content_type: "",
  track: "",
  session_id: 0,
  source: "",
});

This will find all regular <a href="... tags on the page and track when they've been clicked, automatically noting the href value. You can optionally add any meta (applied to all links on the page). You will probably need to rerun this after each navigation event if you're using a Single Page App or any other dynamic content loading approach.

Tracking custom events

GripCDP.trackEvent("start", "stream", 123, {
  title: "Never Gonna Give You Up!",
});

trackEvent() takes the following parameters

event
- a string (verb) describing what's happened
to_type
- a string naming the event subject's type, e.g. session / advert etc
to_id
- a number/string identifying whatever is being acted upon
meta (optional)
- an object with any further information