@d-cat/tag-manager v3.0.1

@d-cat/tag-manager

A fully node, web and TypeScript supported Tag Manager. It offers 100% control on manipulating your environment through a Tag Manager. The built-in dataLayer provides everything you need to futurize your Tag Management.

Install

npm i @d-cat/tag-manager

Usage

The constructor accepts 1 parameter: a manifest, with the following keys:

The render method is the main method of the class. The other methods are invoked within the constructor. You can override this behavior.

import TagManager from '@d-cat/tag-manager';

const myTagManager = () => {
  const tagManager = new TagManager({
    dataLayer: {
      events: ['_ddm.loaded', '_dd.loaded', '_ddm.core.initiated.ready'],
      listenKey: '_ddm.restored',
      version: '2.0.1',
      hooks: '4.0.0',
    },
    date: new Date(Date.now()),
    id: Math.random(),
    prefix: 'vodafone',
    tags: [], // tags array
    version: '1.0.0',
  });

  return tagManager.render(); // undefined
};

NOTE: for convenience the constructor invokes initializeDataLayer, filterTagsOnUrl and sortTagsOnPriority.

initializeDataLayer: void

The initializeDataLayer method initializes DDM on either global (Node) or window (Web). DDM is our Event Emitter and state tree and only communication layer between services.

Once DDM is initialized, it will trigger tag-manager:start.

Example

import TagManager from '@d-cat/tag-manager';

class MyTagManager extends TagManager {
  constructor(...args: any[]) {
    super(...args);
  }

  protected initializeDataLayer(...args: any[]): void {
    super.initializeDataLayer(...args);
    // your logic
  }
}

const myTagManager = () => {
  const tagManager = new MyTagManager({
    dataLayer: {
      events: ['_ddm.loaded', '_dd.loaded', '_ddm.core.initiated.ready'],
      listenKey: '_ddm.restored',
      version: '2.0.1',
      hooks: '4.0.0',
    },
    date: new Date(Date.now()),
    id: Math.random(),
    prefix: 'vodafone',
    tags: [], // tags array
    version: '1.0.0',
  });

  return tagManager.initializeDataLayer(); // undefined
};

filterTagsOnUrl(tags?: ITags[]): ITags[]

The filterTagsOnUrl is used to return only the tags that should execute on the current page. To determine which tags are applicable, it uses the urls array in manifest.

Example

import TagManager from '@d-cat/tag-manager';

class MyTagManager extends TagManager {
  constructor(...args: any[]) {
    super(...args);
  }

  protected filterTagsOnUrl(...args: any[]): void {
    super.filterTagsOnUrl(...args);
    // your logic
  }
}

const myTagManager = () => {
  const tagManager = new MyTagManager({
    dataLayer: {
      events: ['_ddm.loaded', '_dd.loaded', '_ddm.core.initiated.ready'],
      listenKey: '_ddm.restored',
      version: '2.0.1',
      hooks: '4.0.0',
    },
    date: new Date(Date.now()),
    id: Math.random(),
    prefix: 'vodafone',
    tags: [], // tags array
    version: '1.0.0',
  });

  return tagManager.filterTagsOnUrl(tagManager.tags); // []
};

sortTagsOnPriority(tags: ITags[]): ITags[]

The sortTagsOnPriority is used to order tags on a given priority.

Example

import TagManager from '@d-cat/tag-manager';

class MyTagManager extends TagManager {
  constructor(...args: any[]) {
    super(...args);
  }

  protected sortTagsOnPriority(...args: any[]): void {
    super.sortTagsOnPriority(...args);
    // your logic
  }
}

const myTagManager = () => {
  const tagManager = new MyTagManager({
    dataLayer: {
      events: ['_ddm.loaded', '_dd.loaded', '_ddm.core.initiated.ready'],
      listenKey: '_ddm.restored',
      version: '2.0.1',
      hooks: '4.0.0',
    },
    date: new Date(Date.now()),
    id: Math.random(),
    prefix: 'vodafone',
    tags: [], // tags array
    version: '1.0.0',
  });

  return tagManager.sortTagsOnPriority(tagManager.tags); // []
};

render(): void

The render method is used to loop over all the tags and assign a generator to each tag, that keep pending untill all triggers apply.

Example

import TagManager from '@d-cat/tag-manager';

class MyTagManager extends TagManager {
  constructor(...args: any[]) {
    super(...args);
  }

  protected render(...args: any[]): void {
    super.render(...args);
    // your logic
  }
}

const myTagManager = () => {
  const tagManager = new MyTagManager({
    dataLayer: {
      events: ['_ddm.loaded', '_dd.loaded', '_ddm.core.initiated.ready'],
      listenKey: '_ddm.restored',
      version: '2.0.1',
      hooks: '4.0.0',
    },
    date: new Date(Date.now()),
    id: Math.random(),
    prefix: 'vodafone',
    tags: [], // tags array
    version: '1.0.0',
  });

  return tagManager.render(); // undefined
};

ITags

Tags are objects with business rules and a handler that will be invoked when all business rules apply.

const tags = [
  {
    name: `example tag`,
    id: '1234-4567-79810',
    urls: [
      {
        url: '.*',
        reverse: false,
      },
    ],
    handler: () => console.log('all business rules apply'),
    triggers: [
      {
        type: 'instantly',
        id: '12345',
      },
    ],
    priority: 1,
    firingAmount: 1,
  },
];

ITrigger

Each tag can have unlimited amount of triggers, there are 5 trigger types:

Example of triggers:

triggers: [
  {
    id: '1',
    type: 'dataLayer',
    name: 'user.id',
    reverse: false,
    value: '.*',
  },
  {
    id: '12345',
    type: 'datalayer',
    name: 'user.bladder',
    reverse: false,
    value: 'bladder1',
  },
  {
    id: '1234567',
    type: 'event',
    name: 'userr',
  },
];