Meet npm Pro: unlimited public & private packages + package-based permissions.Learn more »

@aller/blink

8.5.0 • Public • Published

blink

Library for user behaviour tracking.

Goals

The main goal is to make it easy to track user behavior on our sites.

  • easy to configure
  • fast
  • small bundle size
  • only collects and stores what is necessary
  • ability to track multiple pages at the same time

Trackers

We have several types of trackers:

  • Pageload tracking
  • Active time tracking
  • Impression tracking
  • Ad tracking
  • Click tracking
  • Video tracking

In addition, we expose one custom tracker type to fill miscellaneous needs.

Usage

import createBlink from '@aller/blink';
 
const blink = createBlink({
  send: events => console.log(events), // Specify how to send events. events,
  sendDirect: events => console.log(events), // Specify how to send events directly (without checking for duplicates, batching or waiting)
  useDevTools: true, // redux devtools enabled
});
 
// Initialize a new "page",
// flushes state, and creates a new uuid for the pageView
blink.pageInit({
  abCookie: 51,
  commercialSegments: 'sport,soccer,gardening',
  pageId: 'front-page',
  pageType: 'instant-article',
  referrer: 'www.dinside.no',
  site: 'www.dagbladet.no',
  url: 'http://dinside.no/a/93289234',
  userId: 'f7a8cad1-773a-4041-b81f-bd1bf9843465',
});
 
// Track a when the page loads
blink.pageLoad({
  clientHeight: 600,
  clientWidth: 800,
  pageId: 'front-page',
  plussData: { hasAccess: true, customerNumber: '123' },
  scrollHeight: 34500,
  url: 'http://dinside.no/a/93289234',
});
 
// Track page performance timings
blink.performance({
    domContentLoadedEventEnd: 100,
    domContentLoadedEventStart: 50,
    domInteractive: 200,
    loadEventEnd: 40,
    loadEventStart: 20,
    responseEnd: 30,
    responseStart: 10,
  },
})
 
// Track that the user clicked on an element / article
blink.click({
  pageId: 'front-page',
  url: 'http://seher.no/a/12931093',
  context: [
    'tag=a&i=1&n=1',
    'tag=article&id=article_69676674&class=columns,large-8,medium-8,preview,small-12&dataId=69678379&i=1&n=1'
  ],
});
 
/**
 * AD-RELATED FUNCTIONS
 */
 
// Track that an ad entered the screen by 30% og 50%, depending on the ad size
blink.adScreenEnter({ id: 'ad-topbanner' });
 
// Track that an ad left the screen, by having less than 30% or 50% inside view
blink.adScreenExit({id: 'ad-topbanner' });
 
// Track that an ad entered the screen by the first pixel
blink.adScreenEnter0({ id: 'ad-medium-rectangle' });
 
// Track that an ad is completely out of the screen
blink.adScreenExit0({id: '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,
  prebidWinningBid: "30.49",
  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({
  context: ['tag=a&i=1&n=1', 'tag=article&i=1&n=1'],
  height: 380,
  personalizationParametersRequested: 'xavier-pluss',
  personalizationSystemUsed: 'cerebro',
  position: 5,
  title: 'Surprising title!',
  url: 'http://seher.no/kjendis/surprising-title/123980243',
  width: 400,
});
 
// Tracking of the users total activity time on a given article
blink.pageActivityStart({
  url: 'http://seher.no/kjendis/surprising-title/123980243', pageScrollOffsetY: 493
}); // sets the user as active for the next 10 seconds, unless a stop event is sent
 
blink.pageActivityStop({
  url: 'http://seher.no/kjendis/surprising-title/123980243'
}); // sets the user as inactive, and sends active time data

API

Page tracking

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({
  abCookie: number,
  commercialSegments: string,
  pageId: string,
  pageType: string,
  pageView: string,
  previousPageView: string,
  referrer: string,
  site: string,
  url: string,
  userId: string,
});

Pageload

pageLoad({
  clientHeight: number,
  clientWidth: number,
  pageId: string,
  plussData: {
    hasAccess: boolean,
    customerNumber: string,
  },
  performance: {
    domContentLoadedEventEnd: number,
    domContentLoadedEventStart: number,
    domInteractive: number,
    domLoading: number,
    loadEventEnd: number,
    loadEventStart: number,
    responseEnd: number,
    responseStart: number,
  },
  scrollHeight: number,
  url: string,
});

Screen tracking

screenShow({
  time?: Date;
})
 
screenHide({
  time?: Date;
})

Clicks

interface ClickInput {
  id?: string;
  url?: string;
  context?: string[];
  pageId?: string;
}
 
click(inputClickInput)void;

Ads

adScreenEnter({ id: stringpageId?: stringtime?: Date });
adScreenExit({ id: stringpageId?: stringtime?: Date });
adScreenEnter0({ id: stringpageId?: stringtime?: Date });
adScreenExit0({ id: stringpageId?: stringtime?: Date };
adLoad({
  id: string;
  offsetHeightnumber;
  offsetTopnumber;
  scrollTopnumber;
};
 
// DFP Events
dfpImpressionViewable({
  id: string;
  scrollTopnumber;
  time?: Date;
});
 
dfpSlotRenderEnded({
  adUnitPath: string;
  advertiserIdnumber;
  bidderstring;
  campaignIdnumber;
  creativeIdnumber;
  idstring;
  lineItemIdnumber;
  prebidWinningBidstring;
  scrollTopnumber;
  sizenumber[];
  sourceAgnosticCreativeIdnumber;
  sourceAgnosticLineItemIdnumber;
});
dfpSlotOnload({
  id: string;
  namestring;
  scrollTopnumber;
  time?: Date;
});

Impression

articlePreviewScreenEnter({
  context?: string[];
  height?: number;
  pageId?: string;
  personalizationSystemUsed?: string;
  personalizationParametersRequested?: string;
  position?: number;
  time?: Date;
  title: string;
  url: string;
  width?: number;
});

Active Time

pageActivityStart({
  url: string;
  pageId?: string;
  pageScrollOffsetY?: number;
  time?: Date;
}); // sets the user as active for the next 10 seconds, unless a stop event is sent
pageActivityStop({
  url: string;
  pageId?: string;
  time?: Date;
}); // sets the user as inactive, and sends active time data

Video

videoLoad({
  videoId: string;
  duration: number;
  position: number;
  title?: string;
  width: number;
  height: number;
  viewable: boolean;
  muted: boolean;
  quality?: string;
  withAdBlock: boolean;
  time?: Date;
  canBeSticky: boolean;
})
 
videoPlay({
  videoId: string;
  playerId: string;
  time?: Date;
  pageId?: string;
  muted: boolean;
  volume: number;
  position: number;
  reason: 'autostart' | 'interaction' | 'related-auto';
});
 
videoStop({
  videoId: string;
  playerId: string;
  time?: Date;
  pageId?: string;
  muted: boolean;
  volume: number;
  position: number;
  reason: 'pause' | 'complete' | 'exit';
});
 
videoAd({
  videoId: string;
  playerId: string;
  time?: Date;
  pageId?: string;
  adPosition: 'pre' | 'mid' | 'post';
  system?: string;
  title?: string;
  client?: string;
  viewable?: number;
  adId?: string;
  isBumper?: boolean;
  creativeId?: string;
  duration?: number;
});

Player

playerShown({
  time: Date;
  muted: boolean;
  position: number;
  volume: number;
  sticky?: boolean;
  playerId: string;
  reason: 'viewable' | 'tabactive';
  pageId?: string;
});
 
playerHidden({
  time: Date;
  muted: boolean;
  position: number;
  volume: number;
  sticky?: boolean;
  playerId: string;
  reason: 'viewable' | 'tabclose' | 'tabhide';
  pageId?: string;
});
 
playerSticky({
  videoId: string;
  playerId: string;
  time?: Date;
  pageId?: string;
  sticky: boolean;
  closed?: boolean;
})

Sending

Explicitly tell blink to send all events. A common usecase is to send all events before a page is unloading.

sendAllEvents(time?: Date)

Box

Box tracking is for tracking elements on ap age that not neccesarily are article previews, but more general boxes.

boxScreenEnter({
  id: string;
  title?: string;
  height?: number;
  width?: number;
  pageId?: string;
  time?: Date;
})

Custom

custom({
  customDomain: string;
  customType: string;
  customContent?: string;
  customValue?: number;
  pageId?: string;
  time?: Date;
});

Install

npm i @aller/blink

DownloadsWeekly Downloads

539

Version

8.5.0

License

MIT

Unpacked Size

768 kB

Total Files

321

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar