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
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,
});
blink.pageInit({ url: 'http://dinside.no/a/93289234' });
blink.pageload('http://dinside.no/a/93289234');
blink.click('http://seher.no/a/12931093');
blink.adScreenEnter('ad-topbanner');
blink.adScreenExit('ad-topbanner');
blink.adScreenEnter0('ad-medium-rectangle');
blink.adScreenExit0('ad-medium-rectangle');
blink.adLoad({ id: 'ad-medium-rectangle', offsetTop: 200, offsetHeight: 450, scrollTop: 100 });
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,
});
blink.articlePreviewScreenEnter({
url: 'http://seher.no/kjendis/surprising-title/123980243',
title: 'Surprising title!',
height: 380,
width: 400,
personalizationParametersRequested: 'xavier-pluss',
personalizationSystemUsed: 'cerebro',
position: 5,
});
blink.articlePreviewScreenExit('http://seher.no/kjendis/surprising-title/123980243');
articleActivityStart('http://seher.no/kjendis/surprising-title/123980243');
articleActivityPause('http://seher.no/kjendis/surprising-title/123980243');
articleActivityStop('http://seher.no/kjendis/surprising-title/123980243');
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 });
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);
articleActivityPause(url);
articleActivityStop(url);