Google Tag Manager (GTM)

Source code Package Browser ES5

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

Configuration

Start by setting up the config for the destination. Destinations can be used via node or directly in the browser.

const config = {
  custom: {
    containerId: "GTM-XXXXXXX",
    dataLayer: "dataLayer",
    domain: "https://www.googletagmanager.com/gtm.js?id=";
  },
};

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

When using loadScript: true the containerId is required.

How to use

Choose one of the installation options below to start using the GTM destination:

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

Loading 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);
})();