Getting started with @d-cat/tag-template-datalayer-starter

@d-cat/tag-template-datalayer-starter is a tag template that initializes DDM's dataLayer. The Tag Template is designed to use with @d-cat/tag-manager.

Install

npm i @d-cat/tag-template-datalayer-starter

Usage

This template returns a DataLayerStarter that out-of-the-box initializes the dataLayer, for @d-cat/digital-data-manager. Depending on your needs you can enhance the dataLayer with modules.

import DataLayerStarter from '@d-cat/tag-template-datalayer-starter';

const component = new DataLayerStarter({
  event: 'pageview',
  page: window._ddi.page,
  user: window._ddi.user,
  session: window._ddi.session,
});

// default usage
component.render();

Parameters

Parameters	Type	Desc
props	IDataLayerStarterProps	Object that should container a page, user, session, and event prop.

require(plugin: keyof typeof models.Plugins): void

The require method let you enable modules to enrich the dataLayer. The following modules are available:

• contextHubZiggo: enables enhancing the dataLayer with contextHub.available.
• devices: default enabled. enables returning device info.
• ip2isp: returns an object with ISP data based on the users IP.
• imadb: returns user data based on an userid, either: sso, pwc or zcid.
• pageviewCounter: default enabled, counts the amount of pageviews.
• sessionCounter: default enabled, counts the amount of sessions.
• qvisits: default enabled. Enables qvisits.

Example

import DataLayer, { Plugins } from '@d-cat/tag-template-datalayer-starter';

const app = new DataLayer();

app.require(Plugins.imadb); // enabled imadb
app.require(Plugins.ip2isp); // enables ip2isp
app.require(Plugins.qvisits); // enables qvisits

app.render(); // executes tag with all modules enabled

userReady(props?: IDataLayerStartProps): Promise<void>

The userReady method stores the user object in DDM's state tree, and it emits a _dd.user.ready.initial event to DDM's event emitter. This object is persisted for the duration of 1 year. You can inherit this behavior.

import DataLayer from '@d-cat/tag-template-datalayer-starter';

class MyClass extends DataLayer {
  constructor(...args: any[]) {
    super(...args);
  }

  public async userReady(...args: any[]): Promise<void> {
    super.userReady(...args);

    // your logic
  }
}

const myAsyncMethod = async () => {
  const myComponent = new MyClass();

  return await myComponent.userReady();
};

sessionReady(props?: IDataLayerStartProps): Promise<void>

The sessionReady method stores the session object in DDM's state tree, and it emits a _dd.session.ready event to DDM's event emitter. This object is persisted for the duration of 30 minutes. You can inherit this behavior.

import DataLayer from '@d-cat/tag-template-datalayer-starter';

class MyClass extends DataLayer {
  constructor(...args: any[]) {
    super(...args);
  }

  public async sessionReady(...args: any[]): Promise<void> {
    super.sessionReady(...args);

    // your logic
  }
}

const myAsyncMethod = async () => {
  const myComponent = new MyClass();

  return await myComponent.sessionReady();
};

pageReady(props?: IDataLayerStartProps): Promise<void>

The pageReady method stores the page object in DDM's state tree, and it emits a _dd.page.ready event to DDM's event emitter. This object is NOT persisted. You can inherit this behavior.

import DataLayer from '@d-cat/tag-template-datalayer-starter';

class MyClass extends DataLayer {
  constructor(...args: any[]) {
    super(...args);
  }

  public async pageReady(...args: any[]): Promise<void> {
    super.pageReady(...args);

    // your logic
  }
}

const myAsyncMethod = async () => {
  const myComponent = new MyClass();

  return await myComponent.pageReady();
};

public static getProduct(sku: string|number): Promise<models.IProductSKU<string | number>>

The static getProduct method returns product data based on a sku.

import DataLayer from '@d-cat/tag-template-datalayer-starter';

const myAsyncMethod = async () => {
  return await DataLayer.getProduct(1); // returns data of product 1
};

ddReady(): void

The ddReady method emits a _dd.ready event to DDM's event emitter. This event is widely used as the initializer of the dataLayer.

import DataLayer from '@d-cat/tag-template-datalayer-starter';

class MyClass extends DataLayer {
  constructor(...args: any[]) {
    super(...args);
  }

  public ddReady(...args: any[]): void {
    super.ddReady(...args);

    // your logic
  }
}

const mySyncMethod = () => {
  const myComponent = new MyClass();

  return myComponent.ddReady();
};

render(props?: IDataLayerStartProps)): void

The render method is for convenience. It invokes all other methods in correct order. It's recommended to inherit from other methods instead of render.

import DataLayer from '@d-cat/tag-template-datalayer-starter';

const mySyncMethod = () => {
  const myComponent = new DataLayer();

  return myComponent.render();
};