@d-cat/tag-template-pageview-listener

@d-cat/tag-template-pageview-listener is a Tag Template designed to use with @d-cat/tag-manager. It emits a pageview event to DDM.

Install

npm i @d-cat/tag-template-pageview-listener

Usage

@d-cat/tag-template-pageview-listener uses the global window._ddi object to determine how and when a pageview event should be emitted.

_ddi object

Depending on the appType prop, the template will either execute a pageview directly, or only after a routeChange.ready event is emitted to DDM.

window._ddi = {
  page: {
    siteId: '1085-v1',
    r42prefix: 'ziggo|hawaii|www',
    type: 'mijnziggo',
    environment: 'prod',
    appType: 'spa', // type of app, regular or spa (single page app)
    cdn_id: '1010',
  },
};

subscribe(name?: string = 'routeChange.ready'): void

The subscribe method default subscribes to a routeChange.ready event in DDM. On each routeChange.ready event, the handler emits a pageview event to DDM.

import Pageview from '@d-cat/tag-template-pageview-listener';
import { trigger } from '@d-cat/digital-data-manager';

// add a routeChange.ready listener
const component = new Pageview();
component.subscribe();

// TO DO: add the trigger in a router hook.
trigger({ event: 'routeChange.ready' });

emit(event?: string = 'pageview'): Promise<void>

The emit method default emits a pageview event to DDM.

import Pageview from '@d-cat/tag-template-pageview-listener';
import { trigger } from '@d-cat/digital-data-manager';

// add a routeChange.ready listener
const component = new Pageview();

// emits a pageview event
component.emit();

render(): void

The render method is for convenience. It invokes both subscribe as emit.

import Pageview from '@d-cat/tag-template-pageview-listener';

// add a routeChange.ready listener
const component = new Pageview();

// emits a pageview event
// subscribes to routeChange.ready
component.render();