@aller/blink

blink

Library for user behaviour tracking.

Goals

The main goal is to make tracking of user behavior in news sites easy.

• be easy to configure
• not use much resources
• have a small bundle size
• batch tracking events together before sending
• be GDPR compliant
• send data when the user leaves the page

Pageload Tracking

• Is the user a DB Pluss user?
• Which ab-testing group is the user a part of?

Element Tracking

This can be tracking of elements like article previews and ads.

• has it been seen by the user (inscreen)?
• has it been clicked on by the user (clicks)?
• has it been loaded (load)?
• where is it on the page (position)?
• where was the user when it loaded (load position)?

Ad Specific Things

• track DFP

Activity Tracking

Tracking of general user activity.

• how long has the user been active on the page (active time)?
  • stop the active time counter if the user is inactive for n seconds or makes the page inactive

GDPR Tracking

• has the user opted in or out of GDPR items?

API

This is an idea of how we would like this library to be used.

Multi page applications (Labrador)

import blink from '@aller/blink';

blink.configure({
  sendUrl: 'https://aas.medialaben.no/a',
  sendInterval: 20000,
  batchLimit: 3,
  batchedSendInterval: 5000,
});

// Track active time
blink.trackActiveTime({
  url: document.head.querySelector('meta[property="og:url"]'), // default: window.location.href
});

// Track page load
blink.trackPageLoad({
  url: window.location.href,
});

// Track article clicks
blink.trackArticlePreviewClick({
  selector: 'article.preview,.article-list>li',
  // The url is parsed from the dom
});

// Track article impressions
blink.trackArticlePreviewImpression({
  selector: 'article.preview,.article-list>li',
  // The url is parsed from the dom
});

blink.trackAdImpressions({
  selector: '.adunit',
  selector0: '.adunit',
});

Single Page Applications (Sol)

// Inside a root config file
import { BlinkProvider } from '@aller/blink';

return (
  <BlinkProvider
    prodUrl="https://aas.medialaben.no/a"
    devUrl="http://localhost:3000/a"
    sendInterval={20000}
    batchLimit={3}
    batchedSendInterval={5000}
    trackActivity={false}
    trackPageload={true}
  >
    <App />
  </BlinkProvider>
);

Handling clicks manually

// Inside a React component
import { BlinkTracker } from '@aller/blink';

return (
  <BlinkTracker>
    ({trackClick}) =>
    <Article onClick={() => trackClick({ id: article.id, url: article.url })} />
  </BlinkTracker>
);

Handling impressions

No function calls are needed, because the impression is on the container element

import { BlinkTrackerImpression } from '@aller/blink';

return (
  <BlinkTrackerImpression url={article.url} threshold={0.5}>
    <Article id={article.id} url={article.url} />
  </BlinkTrackerImpression>
);