@d-cat/tag-template-cookie-popup

A GDPR Proof cookie popup, built on top of the OneTrust API, designed to use together with @d-cat/tag-manager and @d-cat/ddm-core. It contains a built-in design for Vodafone, Ziggo and VodafoneZiggo sites, including support for the Digital Data Manager.

Install

npm i @d-cat/tag-template-cookie-popup

Usage

The constructor accepts a state object that will be merged with the initial state.

Parameter	Type	Description
cookie	{keys: string[], id: number, name: string}	Optional parameter where the key is the dataLayer value, the id the index and the name the name of the cookie value.
decline	boolean	Determine if the user can decline the popup. Default it's on true. If a user cannot decline the pop up, the close button will not be available and the overlay will not be clickable.

The render method is the main method of the class. In the render method, all other main methods are invoked. It's meant as a default setup, however you can either override the behavior of each method to fit your needs or call the methods according your own specs.

import CookieTemplate from '@d-cat/tag-template-cookie-popup';

async function cookiePopUp() {
  const component = new CookieTemplate();
  await component.render();
}

getProps(): models.IProps

The getProps method returns the state of the component.

import CookieTemplate from '@d-cat/tag-template-cookie-popup';

const myGetProps = () => {
  const component = new CookieTemplate();
  return component.getProps();
};

dispatch(): models.IProps

The dispatch dispatches a state update and returns the dispatched props.

import CookieTemplate from '@d-cat/tag-template-cookie-popup';

const myDispatcher = () => {
  const component = new CookieTemplate();
  return component.dispatch();
};

render(component?: Component): Promise<void>

The render method invokes all other methods in a fixed order. You can override the behavior, but it's recommended to override other methods instead.

import CookieTemplate from '@d-cat/tag-template-cookie-popup';

const myDispatcher = () => {
  const component = new CookieTemplate();
  return component.dispatch();
};

Rerender Component

The component is made to be accessible through DDM.

import App, { CookieOverview, Router } from './main';

const app: App = new App({
  brand: 'vodafoneziggo',
});

app.dispatch('ROUTE_CHANGE', {
  routeChange: true,
  router: Router.cookieList,
});

app.render(new CookieOverview(app.getProps()));