|
Applies to: Anyone installing the Cookie Compliance banner with a snippet (including via an AI assistant) WordPress sites should install the plugin instead of pasting. The rule below is why blocking works — or does not. |
The banner can only block scripts that have not run yet. Placement is not cosmetic. A snippet that loads after analytics, a pixel, or a tag-manager container leaves those tags free to fire before the visitor chooses.
The rule
- Put the snippet in
<head>. - It must be the first script on the page — before Google Analytics / gtag, before Meta or Microsoft pixels, and before any tag-manager container.
- Put it on every page, not only the homepage. Use a layout or theme file that wraps the whole site.
- Leave both tags as classic synchronous scripts. Do not add
defer,async, ortype="module". Do not let a bundler or a “combine JavaScript” optimiser move or inline them.
The live install is two tags in this order: an inline var huOptions = { … } block, then <script src="https://cdn.hu-manity.co/hu-banner.min.js" type="text/javascript" charset="utf-8"></script>.
WordPress
Install Cookie Compliance for WordPress rather than pasting a snippet. The plugin handles placement and script order. An AI assistant can still preview the look via the MCP server.
Layouts (usual files)
These are typical document-head files. Confirm the path in your framework version before treating it as exact.
- Next.js App Router —
app/layout.tsx, in the document<head>, not a client component that hydrates later. - Next.js Pages Router —
pages/_document.tsx<Head>. - Nuxt —
app.vuehead, ornuxt.configapp.head. - Astro — the base layout
<head>. - Static HTML — the first tags inside
<head>on every page.
Do not wrap the CDN script in a helper that adds async/defer or injects it after hydration.
Google Tag Manager
Do not put this snippet inside a GTM container as another tag. Consent defaults have to exist before the container’s own gtm.js start event is processed. Leave GTM where it is, below the Cookie Compliance snippet in the page <head>. Do not delete the existing tags — the widget blocks them until the visitor chooses.
Shopify and anything else
The rule does not change. Find the theme or layout file that emits <head> on every page and put the snippet first. If you cannot put a synchronous script there, say so rather than loading it from a tag manager.
Colours that flash then revert
A live banner loads the app’s published configuration and overwrites design set only on the page. Change appearance in the Cookie Compliance dashboard (Design), then publish. To try a look with no account, use a preview snippet from the MCP server — that preview records no consent and expires after 24 hours.