What You’ll Have After This Guide
This guide takes you through creating, configuring, publishing, installing, and testing a CookieBeam banner. You need access to your site’s HTML or tag manager. Setup time depends on your site and integrations; installing a banner alone does not establish legal compliance.
CookieBeam Setup Steps
Create your CookieBeam account
Create an account at cookiebeam.com/sign-up. Open Banners, create a banner for your website, and save the initial setup.
Configure your banner appearance
In the banner designer, choose a layout: Box, stacked; Box, horizontal; Box wide; Cloud; Cloud, horizontal; Bar, stacked; or Bar, horizontal. Set the position, colors, and text, then preview accept, reject, and preference choices.
Review and customize cookie categories
Review detected cookies and services, assign categories, and add any missing entries. Check category descriptions and regional rules against your site’s requirements. A scan does not prove that every tracker is blocked.
Publish the banner
Save your configuration and publish it to production before installation. Open Install to obtain its public Banner ID and loader URL. Republish after later configuration changes. See the canonical quickstart.
Copy and install the embed code
Choose one method. For direct installation, open Install and copy the production loader. Place it once near the start of <head>, before Google tags, Google config or event commands, and other managed scripts. Do not add async or defer. Deploy the site change. Follow the canonical script-tag instructions. For GTM, use the gallery-template flow below instead of adding a direct loader.
Verify your installation
Use a private window with storage cleared. Inspect the console, cookies, and network requests before consent, after acceptance, and after rejection in a fresh session. Reopen preferences and withdraw consent, then confirm the stored choice and integration signals change. Test on desktop and mobile.
<!-- Direct installation only: place before Google tags and other managed scripts. -->
<!-- Replace PUBLIC_BANNER_ID with the public Banner ID from Install. No async or defer. -->
<script id="CookieBeam" src="https://cdn.cookiebeam.com/banner/PUBLIC_BANNER_ID/default/loader.js" type="text/javascript"></script>Placement Matters: First Script in Head
Place the direct loader near the start of <head>, before managed tags. Do not add async or defer. Keep hardcoded non-essential scripts inert until consent with type="text/plain", data-category, and data-src for external files. See Script blocking. Consent signals cannot undo an earlier request.
Platform-Specific Installation
For direct installation, use a shared head template that preserves the loader’s position before managed tags:
- WordPress: use a child theme’s header.php before wp_head(), or an early head hook. Follow the WordPress installation guide.
- Shopify: review the theme’s theme.liquid head placement.
- Squarespace: use the site’s Header Code Injection area where available.
- Webflow: use the site’s Head Code settings.
Check the resulting HTML on every relevant template; a header field alone does not prove ordering.
Google Tag Manager: an alternative installation
Use the CookieBeam Consent Mode template from the Community Template Gallery:
- In your GTM web container, open Templates → Tag Templates → Search Gallery and search for CookieBeam.
- Select CookieBeam Consent Mode, review its permissions, and click Add to workspace.
- Open Tags → New → Tag Configuration, select that template, and enter the public Banner ID from your published banner’s Install page.
- Choose Consent Initialization – All Pages as the trigger and save.
- Configure consent settings for downstream tags. Use GTM Preview to test a fresh session, acceptance, rejection, and withdrawal, then submit and publish the container.
Use one CookieBeam installation per page. Do not add the direct loader alongside this GTM tag. Follow the canonical GTM instructions.
Post-Setup Verification Checklist
Banner appears on first visit in private browsing
Open an incognito/private window. The banner should show immediately before any page content interaction.
Only necessary cookies set before consent
Before clicking anything, inspect cookies and requests against your site’s inventory; confirm optional services that require consent have not started.
Analytics cookies set after accepting
Accept the analytics category and verify the expected analytics requests and cookies, then repeat with rejection in a fresh session.
Preference centre accessible
A floating icon or link should allow users to return to the preference centre and change their choices.
Google Consent Mode signals firing
Use Tag Assistant to inspect the default consent state and its updates after acceptance, rejection, and withdrawal.
Mobile banner tested on real device
Test on an actual mobile device. The banner should be fully usable without pinching or zooming.
Before You Call the Setup Complete
Complete the accept, reject, and withdrawal checks on your own pages. Review Google Consent Mode settings, Meta CAPI if used, and your consent analytics. Installation alone does not guarantee compliance or correct behavior for every service.
Understanding Your CookieBeam Dashboard
Once your banner is live, the CookieBeam dashboard becomes your central hub for managing consent across your website. The dashboard is designed to give both non-technical website owners and developers at-a-glance insight into compliance status and consent performance. Here is a quick tour of the key sections you will use regularly.
Consent Rate
See what percentage of your visitors accept, reject, or partially accept cookies. Drill down by day, country, device type, and banner variant to understand what is driving consent decisions.
Cookie Scanner
Use cookie scans to help discover services, then review and categorize the results. A scan is not a guarantee of complete detection or consent enforcement.
Banner Preview
Preview your consent banner exactly as it will appear on desktop and mobile before publishing changes. Test different languages, colour schemes, and button layouts without affecting live visitors.
Integrations
Configure the integrations you use, then verify their behavior with the destination platform’s debugging tools. Dashboard configuration and installation checks do not prove downstream signal delivery.
Analytics
Review recorded consent decisions and the date-range and regional breakdowns available in Analytics. These summaries describe recorded interactions, not every page visit.
Consent Logs
Review and export stored consent records. Signed proof-of-consent receipts are available for eligible records when receipt signing is available; the detail view shows receipt status. A signed receipt does not prove that every site interaction was captured.
Configuring Consent Categories
Review categories such as Strictly Necessary, Functional, Analytics, and Marketing. You can customise the name, description, and cookie list for each category to match the terminology your audience understands, and to accurately reflect the cookies your site actually sets.
Customising Consent Categories in CookieBeam
Navigate to Consent Categories in your dashboard
Select your banner under All banners, then open Regional settings and the Categories grid. Edit the category name and description there; use its edit drawer for translations. Review cookie classifications under Inventory → Cookies.
Edit the category name and description
Click Edit on any category. You can rename it (e.g. 'Performance & Analytics' instead of 'Analytics') and update the user-facing description. Write your descriptions in plain language, explain what these cookies do in terms a non-technical user understands, and why a visitor might choose to enable or decline them.
Add cookies to the category
Under Cookies in this category, click Add Cookie. Enter the cookie name, provider, purpose, and retention period. If CookieBeam's scanner has already detected the cookie, it will suggest a pre-filled entry from the cookie database. You can edit any field before saving.
Set retention information
For each cookie, enter the exact expiry period (e.g. '13 months', 'Session', '30 days'). This information is displayed in your auto-generated cookie policy and is required for GDPR transparency. CookieBeam flags any cookies where the retention period field is blank.
Translate category descriptions
If your site serves multiple languages, open the category’s edit drawer to enter translations. CookieBeam serves the banner in the user's browser language automatically, but your custom descriptions need to be translated manually or with your preferred translation tool. Use the category translation fields for the languages you support; save and republish before testing the live banner.
Publish changes
Save and republish the banner to production after reviewing category changes. Test the updated configuration with fresh storage and a returning visitor’s stored choice; do not assume every change triggers re-consent.
Setting Up Google Consent Mode v2
Enable Google Consent Mode in your banner settings and publish the configuration. Review the consent defaults, category mapping, and regional behavior described in the integration documentation.
For direct installation, place the synchronous loader before Google tags and their config or event commands:
<script id="CookieBeam" src="https://cdn.cookiebeam.com/banner/PUBLIC_BANNER_ID/default/loader.js" type="text/javascript"></script>
<!-- Google tags and commands follow the CookieBeam loader. -->For GTM installation, use the gallery template on Consent Initialization – All Pages instead; do not add this direct snippet as well. Configure downstream tags and test their consent states and network requests in Preview. Consent Mode may allow cookieless requests while consent is denied, and does not automatically block every third-party tag. Use script blocking where non-essential scripts must wait.
Troubleshooting: Banner Not Showing
If the banner does not appear, work through the checks below. A successful loader response alone does not verify consent behavior.
Banner Not Showing, Diagnosis Checklist
Open DevTools → Console. Check for JavaScript errors referencing CookieBeam or loader.js.
Open DevTools → Network and reload. Filter for loader.js and compare its URL with the published banner’s Install snippet. Investigate failed requests; a 404 may indicate an incorrect ID or an unpublished banner. Check response details for access errors.
Check the Content Security Policy header or meta element. Confirm script-src permits https://cdn.cookiebeam.com and inspect the console for blocked resources.
Verify the public Banner ID in https://cdn.cookiebeam.com/banner/PUBLIC_BANNER_ID/default/loader.js matches the published banner. Use the dashboard’s copied URL.
Inspect the final HTML for duplicate installations or optimizer changes. The direct loader must precede managed tags without async or defer; a GTM installation must use the Consent Initialization – All Pages trigger.
Review the banner’s published regional rules against the location you are testing. Do not assume every configured region shows the same experience.
Clear cookies and local storage in a private test session. A stored choice can explain why the banner is not shown again; also test reopening preferences.
Monitoring Your Consent Rates
Your consent rate, the percentage of banner impressions that result in an 'Accept All' click, directly affects how much data your analytics and marketing tools can collect. A low consent rate is not inherently a compliance problem (users have the right to decline), but it can signal that your banner design or copy is creating friction or confusion.
CookieBeam's analytics dashboard lets you monitor consent rates broken down by date range, country, device, language, and page URL. Review the collection settings and your site’s privacy requirements when using this reporting.
What a Healthy Consent Rate Looks Like
Use your own measured baseline rather than a promised industry accept rate. Compare equivalent periods and visitor groups. Review unclear copy, button contrast, and the ease of rejecting or changing a choice; a higher accept rate alone does not establish valid consent.
What’s Next: Advanced CookieBeam Configuration
These topics cover server-side integrations and more complex consent scenarios. Verify each integration separately after the basic installation works.
Server-Side GTM (sGTM) with CookieBeam
Configure a server-side container and verify consent handling from the browser through to each destination.
Meta Conversions API (CAPI) + CookieBeam
Send Meta Pixel events server-side using the Conversions API, with CookieBeam consent status passed as a signal to Meta so only consented events are used for ad personalisation.
Enhanced Conversions for Google Ads
Use CookieBeam's first-party consent data to power Google Ads Enhanced Conversions, hashing and sending consented customer data to improve conversion match rates.
Consent Rate Optimisation Guide
A/B test banner designs, copy, and button placements with CookieBeam's built-in experimentation features. Learn which changes improve consent rates without compromising GDPR validity.
Frequently Asked Questions
Does CookieBeam work with WordPress?
Yes. CookieBeam works on any website platform, WordPress, Shopify, Webflow, Squarespace, custom-built Next.js apps, and more. For WordPress, choose one method: the official CookieBeam WordPress plugin or the manual installation guide. A direct loader must run early in the head before managed tags, without async or defer.
Is CookieBeam compliant with GDPR, ePrivacy, and CCPA?
CookieBeam provides consent configuration, preference controls, and integration signals. Your categories, disclosures, regional rules, and actual tag behavior still need review. Installing a banner does not guarantee legal compliance. IAB TCF is not yet available in CookieBeam production; activating it requires a registered IAB CMP ID, which CookieBeam does not have yet. Sites requiring a TC String need a registered TCF CMP. See the GPP and TCF compatibility reference.
How long does installation actually take?
Timing depends on your site. Create and configure the banner, publish it, choose one installation method, deploy the site or container change, and complete the consent checks. Integrations and translations need additional review.
Will the CookieBeam script slow down my website?
The small synchronous loader is served from a CDN and must run before trackers. The banner UI and configuration load afterward. Measure LCP, INP, and CLS on your pages; do not add async or defer to hide the loader cost.
What happens to my consent records if I cancel my CookieBeam subscription?
Review your export options and retention terms before cancelling. Export the records you need from Consent Logs and contact support if you need help retrieving them.
Does CookieBeam support multi-domain and subdomain setups?
Yes. CookieBeam supports multiple domains under a single account. You can configure separate banners for each domain with independent consent categories, analytics, and branding. For subdomain setups (e.g. shop.example.com and blog.example.com), CookieBeam can share consent records across the root domain so users only see the banner once, this is configurable under your banner’s Settings → Consent → Consent cookie → Domain.