Book a free setup call

Talk to the team. We will help you set up and get the most out of AssertionHub.

Schedule free setup call →

Prefer email instead? Send us an email at [email protected]

AH Cookie Banner Tracking is now in open beta.Try it at app.assertionhub.com →

AH Cookie Banner Tracking - Setup Guide

Table of Contents

This guide walks you through installing the AH Cookie Banner Tracking script on your website. It watches your cookie banner and records what visitors do with it - accept, deny, open settings - and sends those events to your AssertionHub account. No cookies are written, no user IDs are stored.


Step 1 - Get your Account ID

Log in to AssertionHub and copy your Account ID from the dashboard.


Step 2 - Find your banner element

Open your website in a browser, right-click the cookie banner → Inspect. Find the outermost element of the banner - usually a <div> with an id like #cookie-banner or a class like .consent-wrapper. Copy that selector - you’ll use it as bannerId in the next step.

Do it with AI

If you’re not sure which element to pick, let an AI do the work:

  1. Open your website and wait for the cookie banner to appear.
  2. Open DevTools (F12) and click the element picker icon (top-left of the DevTools panel - it looks like a cursor over a box).
  3. Click on the cookie consent banner container on the page. The corresponding HTML element will be highlighted in the Elements panel.
  4. Right-click that highlighted element → Copy → Copy element to copy its HTML.
  5. Paste it into an AI chat and ask: “What is a unique CSS selector I can use to identify this element for a tracking script?”

The AI will suggest an id or class-based selector you can paste directly as bannerId.

Heads up: if you can’t target just the banner element, you can right-click the <html> line in the Elements panel and choose Copy element to copy the entire page HTML - but this often includes a large amount of content that can eat into your AI usage. Prefer copying just the banner element when possible.


Step 3 - Configure the script

Add this block to your website before the script tag in Step 4. Fill in your Account ID and the banner selector you found above.

<script>
  window.AhConsentConfig = {
    accountId: 'YOUR_ACCOUNT_ID',   // ← paste your Account ID here
    bannerId:  '#cookie-banner',    // ← CSS selector or ID of your banner element

    acceptTarget:  'Accept All',    // button text or CSS selector
    denyTarget:    'Reject',
    optionsTarget: 'Settings',      // omit if your banner has no settings button
    saveTarget:    '.save-prefs',   // omit if your banner has no save/confirm button
  };
</script>

Button text vs CSS selector - any target starting with ., #, or [ is treated as a CSS selector; everything else is matched case-insensitively against visible button labels. If your button text varies by language, use a CSS selector instead.


Step 4 - Load the script

Add this tag immediately after the config block:

<script src="https://load.assertionhub.com/ah-cbt.js"></script>

That’s it for a basic install.


Step 5 - Verify it works

Add debug: true to your config temporarily, then open the browser console (F12 → Console) and reload. You should see:

[AH Consent] Config: { ... }
[AH Consent] session_start fired
[AH Consent] page_loaded fired
[AH Consent] Banner visible
[AH Consent] ↑ queued banner_shown { ... }

Remove debug: true before going live.


Setting up in Google Tag Manager

  1. Tag 1 - config: Create a Custom HTML tag, paste the config block. Trigger: All Pages.
  2. Tag 2 - script: Create a second Custom HTML tag, paste the script tag. Trigger: All Pages.
  3. In Tag 2’s Advanced Settings → Tag Sequencing, set it to fire after Tag 1.

This guarantees the config is on the window before the script loads.


Tracking extra buttons (optional)

For buttons beyond the standard four - a close icon, a “Learn more” link - use customTargets:

customTargets: [
  {
    label: 'close_icon',         // name shown in your dashboard
    target: '.banner-close-btn', // CSS selector or button text
    willCloseTheBanner: true,    // true = this click is a final decision
  },
  {
    label: 'learn_more',
    target: 'Learn more',
    willCloseTheBanner: false,
  },
],

willCloseTheBanner: true marks the interaction as final - the script stops tracking banner events on subsequent pages, the same as Accept or Deny.


Controlling data collection

Use trackingLevel to control what gets collected. When set, it overrides all individual collection knobs.

trackingLevel: 'standard',   // 'minimal' | 'standard' (default) | 'full'
LevelWhat’s collected
minimalSession, banner, and consent events only. No UTM, no country, no browser string.
standard (default)Adds UTM attribution, ad click IDs, referrer, and country (resolved server-side - IP not stored).
fullAdds browser string (navigator.userAgent) on top of standard.

Custom mode - if you omit trackingLevel, you can configure collection manually:

captureUtm: true,       // include UTM params, ad click IDs, and referrer in events
restoreUtm: true,       // persist UTM data in sessionStorage across page navigations
allowedMetrics: {
  country:     true,    // GeoIP country - server-side, IP not stored
  attribution: true,    // UTM/click-ID fields - requires captureUtm: true
  userAgent:   false,   // browser string - off by default
},

Ephemeral storage reference

The script uses sessionStorage (tab-scoped, auto-cleared on tab close) only - no cookies, no localStorage. These keys are set internally; you don’t configure them.

KeyPurpose
_ah_sidTab-scoped session ID sent on every event. Groups all events from this tab into one session.
ah_sSession-start guard. Prevents duplicate session_start events when the user navigates between pages.
ah_iInteraction flag. Set when the user makes a final consent decision (accept, deny, or save). Once set, the script goes silent for the rest of the tab session.
ah_utmUTM snapshot. Captures UTM params, ad click IDs, and referrer on the first page so attribution is preserved if the user moves to another page before interacting. Available at standard and full levels only.

Common questions

The banner is detected but a button isn’t found. Use a CSS selector instead of text - right-click the button → Copy → Copy selector. Text matching can fail when the label is rendered via CSS pseudo-elements or inside a shadow root.

Nothing appears in the console. Make sure the config block loads before the script tag. In GTM, verify tag sequencing (Step 4 must fire after Tag 1).

The script runs on pages with no banner. Expected. page_loaded fires on every page until the user makes a choice. Once they act, the script goes silent for the rest of their tab session.

Buttons inside the preferences panel aren’t detected. Make sure bannerId points to a container that wraps the full banner including the preferences panel, not just the initial bar. The script re-checks buttons automatically when the panel opens.

My banner is inside a shadow root. Use the >> separator in bannerId:

bannerId: '#shadow-host >> .banner-inner'

The left side is queried on the flat DOM; the right side is queried inside its shadow root. Only open shadow roots are supported.


Full config reference

<script>
  window.AhConsentConfig = {

    // ── Required ──────────────────────────────────────────
    accountId: 'YOUR_ACCOUNT_ID',
    bannerId:  '#cookie-banner',      // CSS selector or plain element ID

    // ── Button targeting ──────────────────────────────────
    acceptTarget:  'Accept All',      // text or CSS selector
    denyTarget:    'Reject All',
    optionsTarget: 'Settings',
    saveTarget:    '.save-prefs-btn', // button inside the preferences panel

    // ── Extra buttons ─────────────────────────────────────
    customTargets: [
      { label: 'close_icon', target: '.banner-close', willCloseTheBanner: true  },
      { label: 'learn_more', target: '#learn-more',   willCloseTheBanner: false },
    ],

    // ── Data collection - level preset (recommended) ──────
    trackingLevel: 'standard',        // 'minimal' | 'standard' | 'full'

    // ── Data collection - manual knobs ────────────────────
    // Only used when trackingLevel is absent.
    captureUtm: true,
    restoreUtm: true,
    allowedMetrics: {
      country:     true,              // server-side GeoIP
      attribution: true,              // requires captureUtm: true
      userAgent:   false,             // browser string - off by default
    },

    // ── Debug ─────────────────────────────────────────────
    debug: false,
  };
</script>
Powered by beluacode Logo