Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub


NPM MIT License Forked from  Nitro Modified by igloonet

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


yarn add @igloonet/gatsby-plugin-cookiebot


npm i @igloonet/gatsby-plugin-cookiebot

Configure gatsby-config.js

plugins: [
    resolve: "@igloonet/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. Disable Consent Mode. Default false.
      disableConsentMode: 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 @igloonet/gatsby-plugin-cookiebot
# Alternative way of attaching the published package with yalc
# yalc add @igloonet/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.