@aller/blink

blink

Library for user behaviour tracking.

Goals

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

• easy to configure
• fast
• small bundle size
• don't store more than neccessary

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 Tracking

• 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

Usage

import createBlink from '@aller/blink';

const blink = createBlink({
  send: event => console.log(event),
  utils: {
    getUserId: () => 'f7a8cad1-773a-4041-b81f-bd1bf9843465',
    getAbCookie: () => '51',,
    getReferrer: () => document.referrer,
    getScrollHeight: () => document.documentElement.scrollHeight,
    getClientHeight: () => document.documentElement.clientHeight,
    getClientWidth: () => document.documentElement.clientWidth,
    getSite: () => window.location.hostname,
    getPlussData: () => ({ hasAccess: true, customerNumber: '123' }),
    getCmId: () => 'c9e0eb73-cdde-45f4-a2a0-2811d24ff5b4',
  },
  useDevTools: true, // redux devtools enabled
});

// Initialize a new "page",
// flushes state, and creates a new uuid for the pageView
blink.pageInit('http://dinside.no/a/93289234');

// Track a when the page loads
blink.pageload('http://dinside.no/a/93289234');

// Track that the user clicked on a element / article
blink.click('http://seher.no/a/12931093');


/**
 * AD-RELATED FUNCTIONS
 */

// Track that an ad entered the screen by 30% og 50%, depending on the ad size
blink.adScreenEnter('ad-topbanner');

// Track that an ad left the screen, by having less than 30% or 50% inside view
blink.adScreenExit('ad-topbanner');

// Track that an ad entered the screen by the first pixel
blink.adScreenEnter0('ad-medium-rectangle');

// Track that an ad is completely out of the screen
blink.adScreenExit0('ad-medium-rectangle');

// Track that an ad started loading
blink.adLoad({ id: 'ad-medium-rectangle', offsetTop: 200, offsetHeight: 450, scrollTop: 100 });

// Track data that is gotten from DFP, with internals only known by DFP gurus
blink.dfpImpressionViewable({ id: 'ad-medium-rectangle', scrollTop: 100 });
blink.dfpSlotRenderEnded({
  id: 'ad-medium-rectangle',
  adUnitPath: '/8578/dagbladet.no/seksjoner/kjendis/artikkel',
  advertiserId: 29318043,
  campaignId: 123018391,
  creativeId: 123908149018,
  lineItemId: 344329408239,
  size: [300, 250]
  sourceAgnosticCreativeId: 123908149018,
  sourceAgnosticLineItemId: 344329408239,
  scrollTop: 100
});
blink.dfpSlotOnload({
  id: 'ad-medium-rectangle1',
 name: 'medium-rectangle1',
 scrollTop: 100,
});

/**
 * ARTICLE-RELATED FUNCTIONS
 */

// Track that an article preview went into screen
blink.articlePreviewScreenEnter({
  url: 'http://seher.no/kjendis/surprising-title/123980243',
  title: 'Surprising title!',
  height: 380,
  width: 400,
  personalizationParametersRequested: 'xavier-pluss',
  personalizationSystemUsed: 'cerebro',
  position: 5,
});
// Track that an article preview went out of screen
blink.articlePreviewScreenExit('http://seher.no/kjendis/surprising-title/123980243');

// Tracking of the users total activity time on a given article
articleActivityStart('http://seher.no/kjendis/surprising-title/123980243'); // sets the user as active for the next 10 seconds, if not else happens
articleActivityPause('http://seher.no/kjendis/surprising-title/123980243'); // sets the user as inactive
articleActivityStop('http://seher.no/kjendis/surprising-title/123980243'); // sets the user as inactive, and sends active time data

API

PageInit

Should be called on a page initialization. Sets the pageView and computes values that will not change over the course of the page view.

pageInit(url, pageView);

Pageload

pageload(url);

Clicks

click(url);

Ads

adScreenEnter(id);
adScreenExit(id);
adScreenEnter0(id);
adScreenExit0(id);
adLoad({ id, scrollTop, scrollHeight });

// DFP Events
dfpImpressionViewable({ id });
dfpSlotRenderEnded({
  id,
  adUnitPath,
  advertiserId,
  campaignId,
  creativeId,
  lineItemId,
  size,
  sourceAgnosticCreativeId,
  sourceAgnosticLineItemId,
});
dfpSlotOnload({ id, name });

Impression

articlePreviewScreenEnter({
  url: string,
  title: string,
  height: number,
  width: number,
  personalizationParametersRequested: string,
  personalizationSystemUsed: string,
  position: integer,
});
articlePreviewScreenExit(url);

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