Google Tag Manager (GTM)

Source code Package Browser ES5

Google Tag Manager (GTM) is a tag management solution that allows you to create and update tags for your web and mobile applications.

Installation

TypeScript

Install the destination via npm

npm i @elbwalker/destination-web-google-gtm

import { elb } from '@elbwalker/walker.js';
import destinationGoogleGTM from '@elbwalker/destination-web-google-gtm';

elb('walker destination', destinationGoogleGTM, config);

Script

Load the destination via dynamic import

<script>
  // Upload the dist/index.mjs on your own server
  const destination = (
    await import(
      'https://cdn.jsdelivr.net/npm/@elbwalker/destination-web-google-gtm/dist/index.mjs'
    )
  ).default;

  elb('walker destination', destination, config);
</script>

Code

Copy the code from the index.browser.js file

(function () {
  'use strict';
  var Destination = (() => {})(); // This is the copied code

  elb('walker destination', Destination.default, config);
})();

Configuration

Configure your Google Tag Manager destination.

Example

Custom Config

{
  containerId: 'GTM-XXXXXXX', // Required
  dataLayer: 'dataLayer',
  domain: 'https://www.googletagmanager.com/gtm.js?id=',
}

{ containerId: 'GTM-XXXXXXX', // Required dataLayer: 'dataLayer', domain: 'https://www.googletagmanager.com/gtm.js?id=', }

Result

No event yet.

No event yet.

Custom

Property	Type	Description
containerId	string	Google Tag Manager container ID.
dataLayer	string	Name of the dataLayer array.
domain	string	Source domain for the Google Tag Manager script.

When using loadScript: true the containerId is required.

Mapping

Using the dataLayer.push function to send events to Google Tag Manager.

add_to_cart

Event

{
  event: "product add",
  data: {
    id: "ers",
    name: "Everyday Ruck Snack",
    color: "black",
    size: "l",
    price: 420
  },
  context: {
    shopping: [
      "intent",
      0
    ]
  },
  globals: {
    pagegroup: "shop"
  },
  custom: {
    completely: "random"
  },
  user: {
    id: "us3r",
    device: "c00k13",
    session: "s3ss10n"
  },
  nested: [],
  consent: {
    functional: true
  },
  id: "1741911217000-gr0up-1",
  trigger: "click",
  entity: "product",
  action: "add",
  timestamp: 1741911217000,
  timing: 3.14,
  group: "gr0up",
  count: 1,
  version: {
    source: "0.0.7",
    tagging: 1
  },
  source: {
    type: "web",
    id: "https://localhost:80",
    previous_id: "http://remotehost:9001"
  }
}

{ event: "product add", data: { id: "ers", name: "Everyday Ruck Snack", color: "black", size: "l", price: 420 }, context: { shopping: [ "intent", 0 ] }, globals: { pagegroup: "shop" }, custom: { completely: "random" }, user: { id: "us3r", device: "c00k13", session: "s3ss10n" }, nested: [], consent: { functional: true }, id: "1741911217000-gr0up-1", trigger: "click", entity: "product", action: "add", timestamp: 1741911217000, timing: 3.14, group: "gr0up", count: 1, version: { source: "0.0.7", tagging: 1 }, source: { type: "web", id: "https://localhost:80", previous_id: "http://remotehost:9001" } }

Custom Config

{
  name: "add_to_cart",
  data: {
    map: {
      currency: {
        value: "EUR",
        key: "data.currency"
      },
      override: "data.old",
      value: "data.price",
      items: {
        loop: [
          "this",
          {
            map: {
              item_id: "data.id",
              item_variant: "data.color",
              quantity: {
                value: 1,
                key: "data.quantity"
              }
            }
          }
        ]
      }
    }
  }
}

{ name: "add_to_cart", data: { map: { currency: { value: "EUR", key: "data.currency" }, override: "data.old", value: "data.price", items: { loop: [ "this", { map: { item_id: "data.id", item_variant: "data.color", quantity: { value: 1, key: "data.quantity" } } } ] } } } }

Result

No event yet.

No event yet.

purchase

Event

{
  event: "order complete",
  data: {
    id: "0rd3r1d",
    currency: "EUR",
    shipping: 5.22,
    taxes: 73.76,
    total: 555
  },
  context: {
    shopping: [
      "complete",
      0
    ]
  },
  globals: {
    pagegroup: "shop"
  },
  custom: {
    completely: "random"
  },
  user: {
    id: "us3r",
    device: "c00k13",
    session: "s3ss10n"
  },
  nested: [
    {
      type: "product",
      data: {
        id: "ers",
        name: "Everyday Ruck Snack",
        color: "black",
        size: "l",
        price: 420
      },
      context: {
        shopping: [
          "complete",
          0
        ]
      },
      nested: []
    },
    {
      type: "product",
      data: {
        id: "cc",
        name: "Cool Cap",
        size: "one size",
        price: 42
      },
      context: {
        shopping: [
          "complete",
          0
        ]
      },
      nested: []
    },
    {
      type: "gift",
      data: {
        name: "Surprise"
      },
      context: {
        shopping: [
          "complete",
          0
        ]
      },
      nested: []
    }
  ],
  consent: {
    functional: true
  },
  id: "1741911217000-gr0up-1",
  trigger: "load",
  entity: "order",
  action: "complete",
  timestamp: 1741911217000,
  timing: 3.14,
  group: "gr0up",
  count: 1,
  version: {
    source: "0.0.7",
    tagging: 1
  },
  source: {
    type: "web",
    id: "https://localhost:80",
    previous_id: "http://remotehost:9001"
  }
}

{ event: "order complete", data: { id: "0rd3r1d", currency: "EUR", shipping: 5.22, taxes: 73.76, total: 555 }, context: { shopping: [ "complete", 0 ] }, globals: { pagegroup: "shop" }, custom: { completely: "random" }, user: { id: "us3r", device: "c00k13", session: "s3ss10n" }, nested: [ { type: "product", data: { id: "ers", name: "Everyday Ruck Snack", color: "black", size: "l", price: 420 }, context: { shopping: [ "complete", 0 ] }, nested: [] }, { type: "product", data: { id: "cc", name: "Cool Cap", size: "one size", price: 42 }, context: { shopping: [ "complete", 0 ] }, nested: [] }, { type: "gift", data: { name: "Surprise" }, context: { shopping: [ "complete", 0 ] }, nested: [] } ], consent: { functional: true }, id: "1741911217000-gr0up-1", trigger: "load", entity: "order", action: "complete", timestamp: 1741911217000, timing: 3.14, group: "gr0up", count: 1, version: { source: "0.0.7", tagging: 1 }, source: { type: "web", id: "https://localhost:80", previous_id: "http://remotehost:9001" } }

Custom Config

{
  name: "purchase",
  data: {
    map: {
      transaction_id: "data.id",
      value: "data.total",
      tax: "data.taxes",
      shipping: "data.shipping",
      currency: {
        key: "data.currency",
        value: "EUR"
      },
      items: {
        loop: [
          "nested",
          {
            map: {
              item_id: "data.id",
              item_name: "data.name",
              quantity: {
                key: "data.quantity",
                value: 1
              }
            }
          }
        ]
      }
    }
  }
}

{ name: "purchase", data: { map: { transaction_id: "data.id", value: "data.total", tax: "data.taxes", shipping: "data.shipping", currency: { key: "data.currency", value: "EUR" }, items: { loop: [ "nested", { map: { item_id: "data.id", item_name: "data.name", quantity: { key: "data.quantity", value: 1 } } } ] } } } }

Result

No event yet.

No event yet.

info

If you need professional support with your walkerOS implementation, check out our services.