Getting started with @d-cat/tag-template-click-listener

Tag Template to handle all element clicks and emit a click to DDM. The template is designed to use with @d-cat/tag-manager.

Install

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

Usage

The constructor accepts 1 argument: a string array of events that should be emitted to DDM on each button, anchor or angular click. Defaults to: ga.event and click. The render method is the main method of the class, it invokes all other methods. You can inherit the class and override behavior.

import Listener from '@d-cat/tag-template-click-listener';

const myAsyncListener = async () => {
  const listener = new Listener();
  return await listener.render();
}

handleAngularClick(event: models.IConfig): IGoogleAnalyticsClickEvent

The handleAngularClick handles a click event and returns the object that should be emitted to DDM. You can inherit this method.

import Listener, { IGoogleAnalyticsClickEvent } from '@d-cat/tag-template-click-listener';

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

  public handleAngularClick(...args: any[]): IGoogleAnalyticsClickEvent {
    super.handleAngularClick(...args);

    // your logic
  }
}

const myClickListener = () => {
  const listener = MyClass();

  document.addEventListener('click', listener.handleAngularClick, false);
};

handleButtonClick(event: models.IConfig): IGoogleAnalyticsClickEvent

The handleButtonClick handles a click event and returns the object that should be emitted to DDM. You can inherit this method.

import Listener, { IGoogleAnalyticsClickEvent } from '@d-cat/tag-template-click-listener';

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

  public handleButtonClick(...args: any[]): IGoogleAnalyticsClickEvent {
    super.handleButtonClick(...args);

    // your logic
  }
}

const myClickListener = () => {
  const listener = MyClass();

  document.addEventListener('click', listener.handleButtonClick, false);
};

handleAnchorClick(event: models.IConfig): IGoogleAnalyticsClickEvent

The handleAnchorClick handles a click event and returns the object that should be emitted to DDM. You can inherit this method.

import Listener, { IGoogleAnalyticsClickEvent } from '@d-cat/tag-template-click-listener';

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

  public handleAnchorClick(...args: any[]): IGoogleAnalyticsClickEvent {
    super.handleAnchorClick(...args);

    // your logic
  }
}

const myClickListener = () => {
  const listener = MyClass();

  document.addEventListener('click', listener.handleAnchorClick, false);
};

render(e: MouseEvent): void

The render method is a default setup and can be used for convenience. It invokes all other methods and handles a click on anchor, button and angular elements.

import Listener from '@d-cat/tag-template-click-listener';

const myClickListener = () => {
  const listener = Listener();

  document.addEventListener('click', async (e: MouseEvent) => listener.render(e), false);
};