Tags and pixels with Cookie Compliance

Cookbook · guide · Last verified 12 November 2026 · View raw markdown (for agents)

In short: add each tag below the Cookie Compliance snippet in the same <head>, exactly as its vendor gives it to you. Tags the banner recognises wait for the visitor's choice, in regions whose rule requires consent first. For a tag it does not recognise, add your own pattern in Autoblocking, or mark the script.

You need #

• A Cookie Compliance AppID and the live snippet from MCP install.getSnippet or dashboard Integrations → Manual Integration (a new app uses /v2/hu-banner.min.js; an existing app keeps the URL in that snippet). A domain added in the dashboard is published automatically; if the status check still says the app is not published yet, or after later edits, click Publish Now, then copy the snippet. A snippet copied before publishing must be copied again. No account yet? Sign up (free plan, no card); with MCP, call help.startSignup.
• The Cookie Compliance snippet already installed as the first script in the page <head> (see plain-html or the guide for your platform).
• Edit access to the place your tags are added: the same template, theme or head field as the snippet.

How each tag is held #

Both banner engines recognise the tags below by the address of the script file. In regions whose rule requires consent first, a recognised tag waits until the visitor allows its category: 1 Basic Operations, 2 Content Personalisation, 3 Site Optimisation, 4 Ad Personalisation. The category shown is the built-in default. You can file any tag under a different category with your own Autoblocking pattern or a data-hu-category mark.

A tracker file with a different name (for example piwik.js, or a Matomo Tag Manager container) is yours to name: add its address as your own pattern in Autoblocking, or mark the script, as in the next section.

Marking a script yourself #

To choose the category of any script, inline or external, add class="hu-block" and data-hu-category with the category number:

<script class="hu-block" data-hu-category="3">
  /* the tag's own inline code */
</script>

data-hu-category on its own is enough to mark a script; hu-block on its own marks it as category 2. A script marked data-hu-category="1" is essential and runs straight away.

Where it goes #

1. Keep the Cookie Compliance snippet as the first script in <head>.

2. Put each tag below it, in the same <head> (or wherever the vendor places it, as long as it is below the banner snippet), as the vendor gives it to you:

   <head>
     <!-- Cookie Compliance: first script on the page -->
     <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>
   
     <!-- your tags stay below it -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXX"></script>
   </head>
   

3. Or fire the tags through Google Tag Manager and gate them with consent triggers (both engines). On the New engine, recognised tags that GTM fires are also held automatically. See gtm for placing the banner above the container.

What the order controls #

The banner holds recognised trackers that load after it until the visitor chooses, in regions whose rule requires consent first. A script placed above the snippet runs straight away, and a script you mark data-hu-category="1" is treated as essential. What runs before consent is your decision, so keep analytics and pixels below the snippet.

Confirm the result #

Use a private window. In the page source the banner snippet comes first in <head> and your tags come after it. Then open the browser's Application → Cookies panel before choosing anything: no tracking cookies (for example _ga, _gcl_au, _fbp) appear in a region whose rule requires consent first. After Allow, the tags start and their cookies appear. A held tag shows type="javascript/blocked" in the Elements panel until the visitor chooses.

Test from a region your strictest rule covers (for example the EU), or confirm region rules are off. The browser checks are in plain-html, and the full procedure is verify-install.

Gotchas #

• A tracker that is not on the list. Add your own pattern in Autoblocking, or mark the script with data-hu-category as above. Either way the banner then holds it like the tags in the table, in regions whose rule requires consent first.
• Tags added by a tag manager. Gate them with consent triggers in the tag manager (both engines). On the New engine, recognised tags that Google Tag Manager fires are also held automatically.
• Google, Meta or Microsoft Consent Mode on. Their loaders (googletagmanager.com, connect.facebook.net, and the Clarity tag when Microsoft Consent Mode is on) then load straight away and receive a "denied" consent signal until the visitor chooses. Judge the result by the cookies, as in verify-install.
• Essential is your choice. Marking a tag data-hu-category="1" lets it run before consent. Mark only tags your site needs to work, and decide each one on purpose.
• Held scripts may still download. The file can download while it is held; it does not run until the visitor chooses.

More help #

• Where to put the Cookie Compliance snippet: the placement rule, for the site owner.
• Google Consent Mode: how the banner signals consent to Google tags.