Analytics & Events

This guide describes how to use Ninetailed Analytics and Events in React.

Overview

To personalize content we need to know about the visitor currently viewing the page. This data is managed by our customer data platform. Anyhow you need to send events about the user to our API so it can aggregate a profile over time.

To make this process as easy as possible Ninetailed provides the page(), track() and identify() methods which can be used via the useAnalytics hook or via the window object of the browser for example in a Tag Manager.

We recommend triggering Pageviews by an automated tracker depending on your router. For frameworks like gatsby an <AutoTracker /> is prebuilt.

useAnalytics

The useAnalytics hook provides the event tracking functions inside your React components. This is very handy if you want to send events from your code.

import React from 'react';
import { useAnalytics } from '@ninetailed/client-sdk-react';
const CallToAction = () => {
const { track, page, identify } = useAnalytics();
return (<button
type="button"
onClick={() => { track('built new Rick'); }}
>
build new Rick
</button>);
}

AnalyticsProvider

To setup the Analytics SDK and by this making personalization possible you need to setup the AnalyticsProvider in your App. Every component using <Personalize /> or useAnalytics needs to be a child component of the AnalyticsProvider.

import React from 'react';
import { ProfileProvider, AnalyticsProvider } from '@ninetailed/client-sdk-react';
const App = () => {
return (
<ProfileProvider>
<AnalyticsProvider apiKey="Your_API_Key">
<YourAppCode />
</AnalyticsProvider>
</ProfileProvider>
);
}

Your API Key can be found in the Contentful app configuration.

Events

Page view

Page views should be sent on every page change. Our sdk populates all data needed as, referrer, url, user-agent and other properties to be consumed by the API.

type Page = () => Promise<void>;

Track

Track events are used to describe special actions the user did, like signup or registered_for_newsletter.

type Track = (event: string) => Promise<void>;

Identify

By identifing a user you add a custom id to the profile, like a Hubspot id or an id from your internal database. Even more important, you can set traits about this customer, like the firstname, age or anything you want to personalize the content even more.

type Identify = (uid: string, traits: Traits) => Promise<void>;

Tag Manager

The Analytics SDK also add the page(), track() and identify() functions to the window object. That way you can also access them from a Tag Manager. We recommend to send pageviews directly from the code as soon as the sdk is initialized so the personalizations are not delayed.