@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.

Core API

Pageload

pageload({ url, plussData });

Impression

screenEnter({ url, id, domElement }); // registers that a domElement has entered the screen (by a certain percent)
screenExit({ url, id, domElement }); // registers taht a domElement has left the screen

Active Time

articleActivityStart({ url }); // sets the user as active for the next 10 seconds, if not else happens
articleActivityPause({ url }); // sets the user as inactive
articleActivityStop({ url }); // sets the user as inactive, and sends active time data

Clicks

click({ url, id, domElement });

Ads

screenEnter({ url, id, domElement });
screenExit({ url, id, domElement });
dfpImpressionViewable();
dfpSlotRenderEnded();
dfpSlotOnload();
adLoad({ url, id, domElement });
requestStartTime({ url, id, domElement });

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,
            recommended: article.isRecommended,
          })
        }
      />
    )}
  </BlinkTracker>
);

Handling pageLoad manually

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

return (
  <BlinkTracker>
    {({trackPageload}) => ... }
  </BlinkTracker>
);

Handling active Time manually

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

return (
  <Blink.ActivityTracker>
    {({register, setIdle, stop}) => ... }
  </Blink.ActivityTracker>
);

Handling impressions

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

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

return (
  <BlinkTracker.Impression
    recommended={article.isRecommended}
    url={article.url}
    threshold={0.5}
  >
    <Article id={article.id} url={article.url} />
  </BlinkTracker.Impression>
);