Google Tag Manager

c15t supports Google Tag Manager (GTM) and Consent Mode v2. The pre-built c15t script will automatically inject the GTM script into your page and update the consent state in GTM to match the consent state in c15t.

By default, c15t will always load this script regardless of consent. This is because GTM manages its own consent state internally & loads other scripts based on the consent state.

Allowing c15t to manage GTM prevents any issues with GTM scripts being loaded without consent.

Implementation

Creating a Tag Manager Container

Info

This step is optional if you already have a Tag Manager container. Ensure your container has consent overview enabled.

After signing into Google Tag Manager, you can create a new container. Continue to Google Tag Manager

In Tag Manager, click Admin > Container Settings.
Under Additional Settings, select "Enable consent overview".

Enable consent overview

Custom Update Trigger

We now need to create a custom trigger in GTM to trigger the update event, this is the trigger that is fired when the consent state is updated, e.g. user gives consent to a specific purpose.

In GTM, you can create a new trigger by clicking on the "Triggers" tab and then clicking on "New".

For the event name, you can use the default "consent-update", this is customizable later so you can change it if you want.

Create trigger

Adding / Updating tags

Now for your existing tags, you can add the "consent-update" trigger to the tag, this will fire the update event when the consent state is updated & it has the appropriate consent state.

Update tags

Setting up c15t with Google Tag Manager

After creating your container, you can set up c15t with Google Tag Manager. All you need to do is copy and paste your container ID & begins with "GTM-".

import { configureConsentManager } from 'c15t';
import { googleTagManager } from '@c15t/scripts/google-tag-manager';

configureConsentManager({
  // ... 
  scripts: [
    googleTagManager({
      id: 'GTM-XXXXXXX',
    }),
  ],
});

Types