Eleventy Cookie Consent: GDPR Banner for 11ty Sites

Why Eleventy sites need cookie consent

Eleventy builds fast static sites, but "static" doesn't mean "cookie-free." If you embed Google Analytics, use a third-party comment system, embed social media widgets, or include any external JavaScript, your site likely sets cookies that require consent under GDPR.

The Eleventy philosophy is simplicity. Adding consent should match that: one script tag, no build plugins, no config files.

Setup in 2 minutes

Add the CookieBeam script to your base layout. If you're using Nunjucks (Eleventy's default):

{# _includes/base.njk #}
<head>
  ...
  <script src="https://cdn.cookiebeam.com/banner/YOUR_BANNER_ID/default/loader.js" async></script>
</head>

For Liquid templates:

<!-- _includes/head.html -->
<script src="https://cdn.cookiebeam.com/banner/YOUR_BANNER_ID/default/loader.js" async></script>

That's it. Every page that extends your base layout now shows the consent banner.

Handling analytics scripts

If you're adding analytics via an Eleventy shortcode or template include, CookieBeam's auto-blocking will detect known tracking scripts (Google Analytics, Plausible, Fathom, etc.) and hold them until consent is given.

For scripts that auto-blocking doesn't recognize, you can use the type="text/plain" attribute with a data-category marker:

<script type="text/plain" data-category="analytics" src="/js/custom-tracker.js"></script>

CookieBeam will swap the type back to text/javascript once the visitor consents to analytics cookies.

Does this affect Eleventy's build time?

No. The consent script loads client-side in the browser. It doesn't touch Eleventy's build process. Your build stays as fast as it was.

Can I use this with Eleventy serverless or edge functions?

Yes. The consent script runs in the browser regardless of how the HTML was generated. Whether your page is static, serverless, or edge-rendered, the consent flow is the same.

What about Eleventy's built-in data cascade?

You can store your banner ID in _data/site.json and reference it in templates: src="https://cdn.cookiebeam.com/banner/{{ site.cookiebeamBannerId }}/default/loader.js". This keeps the ID in one place if you manage multiple sites.