A common way to add a cookie banner is as a new tag in Google Tag Manager (GTM), fired on all pages. The problem is timing. By the time a tag inside GTM runs, the container has already started, and other tags can write cookies before the banner is in force.

The short answer

  • Put the cookie banner’s code in the page’s real <head>, above the GTM container snippet, on every page.
  • Do not add the banner as a tag inside GTM. Cookie Compliance does not offer a GTM template.
  • Leave the GTM container where it is, below the banner.
  • If you can only change <head> through GTM, ask whoever manages your site’s templates first. Loading the banner from inside GTM will not hold tags back.

Why inside GTM is too late

Here is the order things happen in with Cookie Compliance:

  1. The banner script loads at the top of <head>.
  2. The Consent Mode default is set, if Google Consent Mode is on: every mapped signal starts as denied.
  3. Blocking starts. Recognised non-essential scripts are held. That includes the GTM container itself, which belongs to the Content Personalisation category. This happens whether Consent Mode is on or off.
  4. The banner shows, and the visitor chooses.
  5. Held scripts in the accepted categories are released. If Consent Mode is on and the choice changes mapped values, an update is sent. If the visitor accepted Content Personalisation, GTM loads, and Google’s tags already have a consent state.
  6. GTM fires its tags. The banner checks each new tag against its tracker patterns (next section).

If GTM loads before the banner, it cannot be held, because it has already run. Google’s tags also start without a consent default, and Google may treat that as “granted”. Putting the banner inside GTM causes the same failure: tags that fire before the banner is in force can set cookies before the visitor has chosen.

What about GTM’s Consent Initialization trigger?

It fires before other tags in the container, which suits tools that only set consent signals. Cookie Compliance also holds scripts, including the container itself, so it must load before the container starts.

Step by step

  1. Copy the live snippet from Integrations → Manual Integration in the Cookie Compliance dashboard. After changing settings, click Publish Now first.
  2. Paste it as the first script in <head> in your site’s layout, theme or HTML, so it is on every page.
  3. Leave the GTM snippet below it, unchanged.
  4. Turn on Google Consent Mode in the dashboard (Configuration → Consent Signals, then Publish Now). It is off by default. Blocking works without it, but you need it to send consent signals to Google’s tags and to get the consent events used below.
  5. Check the tags GTM fires and deal with any the banner does not recognise (next section).
<head>
  <!-- 1. Cookie Compliance first (paste your live snippet exactly) -->
  <script>var huOptions = { "appID": "YOUR_APP_ID", "currentLanguage": "en", "blocking": true, "globalCookie": false };</script>
  <script src="https://cdn.hu-manity.co/v2/hu-banner.min.js" type="text/javascript" charset="utf-8"></script>

  <!-- 2. Google Tag Manager below it, unchanged -->
  <script>(function(w,d,s,l,i){ /* your standard GTM snippet */ })</script>
</head>

Do not add async or defer to the banner’s scripts. Newer apps load the banner from a /v2/ address and older apps do not, so always paste the snippet the dashboard gives you.

How tags inside GTM are handled

Once GTM has loaded, the banner keeps watching the page for new scripts and iframes. Each tag GTM adds is checked against the banner’s built-in tracker patterns and any patterns you have added:

  • A tag that matches a pattern is held until the visitor accepts its category. For example, a Google Analytics tag belongs to Site Optimisation, so it waits until the visitor accepts Site Optimisation.
  • A tag that matches no pattern runs as soon as GTM fires it.

Use the test guide to find any tag that runs before consent. Then either:

  • Teach the banner to recognise it in the Cookie Compliance dashboard (Autoblocking). Adding a URL pattern to an existing provider works on Free. Adding a new provider, or changing a provider’s category, needs Professional.
  • Gate it inside GTM with consent triggers, as below. Google’s own tags (Google tag, Analytics, Ads, Floodlight, Conversion Linker) also have built-in consent checks that read the Consent Mode signal.

Gating a tag inside GTM

Cookie Compliance pushes two events to the dataLayer. They exist only when Google Consent Mode is on with at least one signal mapped, so switch it on first.

  • CC Consent Set — fires once per page view, straight after the consent default is set. For a returning visitor, that default already carries their saved choice, so this is the only event on their page loads.
  • CC Consent Updated — fires after the visitor clicks a choice, and only if the consent values changed.

The banner creates window.dataLayer if it does not exist yet, so both events are queued even while the GTM container is still held. Google’s documentation says that when a container loads, Tag Manager processes all queued data layer messages in order and fires any tags whose trigger conditions are met (Google: The data layer).

For each tag you gate this way:

  1. Create two Custom Event triggers, one for CC Consent Set and one for CC Consent Updated, and give the tag both. Without the first, the tag will not fire for returning visitors, because only CC Consent Set fires on their page loads.
  2. In the tag’s Advanced Settings → Consent Settings, under Additional Consent Checks, choose Require additional consent for tag to fire and add the matching type, for example ad_storage for an advertising pixel. This stops the CC Consent Set trigger from firing the tag for a visitor who has not agreed.

Do not set a consent default anywhere inside GTM, for example with gtag('consent', 'default', …) in a Custom HTML tag. The banner already sets the default, and a second default can conflict.

You do not need to delete your Analytics or Ads tags to make consent work.

WordPress and optimisers

On WordPress with a GTM plugin, install the Cookie Compliance for WordPress plugin rather than pasting the snippet. Speed tools that combine, defer or delay JavaScript can change script order. Exclude the banner script (hu-banner) from defer and delay, and keep the GTM script out of combined bundles.

How to check it works

  1. View the page source. The Cookie Compliance scripts should appear above the GTM snippet in <head>.
  2. Before you click anything in the banner, check your browser’s Application → Cookies and Network. There should be no Analytics or Ads cookies and no data requests. The gtm.js file may be requested. A held file’s code does not run.
  3. Use GTM Preview mode / Tag Assistant. Because the container is held until consent, Preview may not connect until you accept in the banner. Once it connects, the consent default should be at the very start of the timeline, before any tag fires.
  4. After you accept, tags that wait for consent should fire.

FAQ

Is there a Cookie Compliance template for Google Tag Manager?

No. The banner goes in the page <head> above the GTM container. A template that runs inside GTM would start after the container, which is too late to hold tags.

My tags stopped firing after consent. What is wrong?

Usually the trigger. Check that Google Consent Mode is on (the CC events only exist then), give the tag both the CC Consent Set and CC Consent Updated triggers, and check which consent type it requires.

Does Cookie Compliance work with GTM on the Free plan?

Yes. Google Consent Mode is on both plans. On Free, each page view where the banner loads counts as a visit. Once the site passes the Free plan’s visit limit (see Pricing) for the current 30-day cycle, blocking stops and GTM is no longer held. If Consent Mode is on and signals are mapped, Consent Mode signals continue.

Was this article helpful?
YesNo