Getting started with @d-cat/tag-template-dv360

Tag Template to handle DV360 pixels, based on Google Tag Manager data objects.

Install

npm i @d-cat/tag-template-dv360

Usage

The class returns 1 method: render.

| Parameter | Type | Desc | | ------------ | :----: | ---------------------------------------------------------------------------------------------------: | | threshold | number | Threshold of ga.event triggers. | | detailsIdKey | string | Key of ecommerce detail id inside DDM. | | revenueKey | string | Key of ecommerce revenue id inside DDM. |

import DV360 from '@d-cat/tag-template-dv360';

const dv360 = new DV360({
  threshold: 0.01,
  detailsIdKey: 'ecommerce.detail.id',
  revenueKey: 'ecommerce.revenue',
});

render(gtag?: Function, config: IDV360): void

The render method accepts a Google Tag Manager config file and than sends data to given endpoints. The GTM Config file should be generated using a GTM Tag Template, and looks like:

{
  "data": {
    "account_id": "DC-9539518",
    "pixels": [
      {
        "id": "12345",
        "type": "counter",
        "send_to": "DC-123/test/test+standard",
        "trigger": {
          "page": "zakelijk",
          "reverse": true,
          "matchAllRules": true,
          "matchAllEvents": false,
          "eventData": true,
          "events": [],
          "rules": [
            {
              "key": "random.dd.value",
              "regex": "random",
              "reverse": false
            },
            {
              "key": "random.dd.value",
              "regex": "random",
              "reverse": true
            }
          ],
          "gtmEventId": 0
        },
        "uvars": {
          "variables": [
            {
              "key": "u1",
              "value": "page.host"
            }
          ],
          "gtmEventId": 0
        }
      }
    ],
    "gtmTagId": 3,
    "gtmEventId": 0
  }
}

Please make sure gtag is defined.

Example

import { listen } from '@d-cat/digital-data-manager';
import DV360 from '@d-cat/tag-template-dv360';

listen('3rd.gtag.loaded', ({ data }) => {
  const { gtag } = data;

  // wait for a GTM object
  listen('pixels.dv360', async gtmConfig => {
    const dv360 = new DV360({
      threshold: 0.01,
      detailsIdKey: 'ecommerce.detail.id',
      revenueKey: 'ecommerce.revenue',
    });

    await dv360.render(gtag, gtmConfig.data);
  });
});