Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub


npm GitHub Made by Nitro

Easily add Cookiebot on a Gatsby site. Especially useful when using Cookiebot’s manual mode and gatsby-plugin-google-tagmanager.

Main features

  • Adds Cookiebot script to the page <head>
  • Blocks Google Tag Manager’s <script> and <noscript> tags created by gatsby-plugin-google-tagmanager when using Cookiebot’s manual mode by setting data-cookieconsent="statistics" and type="text/plain" to the tags

How to use

Install package

npm i gatsby-plugin-cookiebot

Configure gatsby-config.js

plugins: [
    resolve: "gatsby-plugin-cookiebot",
    options: {
      // Required. Site's Cookiebot ID.
      cookiebotId: "00000000-0000-0000-0000-000000000000",
      // Optional. Turns on Cookiebot's manual mode. Defaults to false.
      manualMode: true,
      //  Optional. Skip blocking of GTM. Defaults to true if manualMode is set to true.
      blockGtm: false,
      // Optional. Enables plugin in development. Will cause gatsby-plugin-google-tagmanager to thrown an error when pushing to dataLayer. Defaults to false.
      includeInDevelopment: true,
      // Optional. Debug mode for plugin development. Defaults to false.
      pluginDebug: true,

Make sure gatsby-plugin-google-tagmanager is listed before gatsby-plugin-cookiebot

This plugin doesn’t provide a way to inject the cookie declaration to your site because there’s multiple ways to achieve the same thing. Here’s a useful snippet you can copy that ensures the declaration is loaded on internal site navigation events.

import React from "react";

isBrowser = () => typeof window !== "undefined";

const COOKIEBOT_DECLARATION_WRAPPER_ID = "cookiebot-declaration-wrapper";

export function CookieDeclaration() {
  React.useEffect(() => {
    // Inject Cookiebot declaration
    if (isBrowser()) {
      const cookiebotCookieDeclaratioScript = document.createElement("script");
      cookiebotCookieDeclaratioScript.src =
      cookiebotCookieDeclaratioScript.type = "text/javascript";
      cookiebotCookieDeclaratioScript.async = true;

      const cookiebotWrapperEl = document.getElementById(
      if (cookiebotWrapperEl) {
  }, []);

  return <div id={COOKIEBOT_DECLARATION_WRAPPER_ID}></div>;

Contributing to gatsby-plugin-cookiebot

# You will need yalc in the destination project so better to install yalc globally
npm i -g yalc
# Watch for changes and publish locally with yalc
npm run develop
cd ../destination-gatsby-project
# Link local package to a project
yalc link gatsby-plugin-cookiebot
# Alternative way of attaching the published package with yalc
# yalc add gatsby-plugin-cookiebot
# Run gatsby clean and restart development server on plugin changes
gatsby clean && gatsby develop
## When changes are ready. Build and publish to NPM
npm run npm:publish

Made with passion by Nitro

We are a hybrid marketing agency ready to set your business on fire by bringing together marketing communication and digital services in a unique way. We love Gatsby and we hope this plugin makes your day. If you’re ever in need of Gatsby expertise why not consider us at nitro.fi :).

© 2023 Gatsby, Inc.