# @igloonet/gatsby-plugin-cookiebot

[![NPM](https://img.shields.io/npm/v/@igloonet/gatsby-plugin-cookiebot.svg?style=for-the-badge&labelColor=000000)](https://www.npmjs.com/package/@igloonet/gatsby-plugin-cookiebot)
[![MIT License](https://img.shields.io/npm/l/@igloonet/gatsby-plugin-cookiebot.svg?style=for-the-badge&labelColor=000000)](https://github.com/igloonet/gatsby-plugin-cookiebot/blob/main/LICENSE)
[![Forked from  Nitro](https://img.shields.io/badge/forked%20from%20NITRO-000000.svg?logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAZCAYAAAArK+5dAAAACXBIWXMAAAsSAAALEgHS3X78AAACKklEQVRIia2Uu24TQRSGv7OGFgNNhBDCgi5Cyr5BjHiBlHT4CRAgISIhcCigBHNpkCJhWqr0CHAkWiCmRUh2l4KL0xCI8fkpFl92dlagxKeZGc3u98/558yxvXXqADigbLSZ+WSc3c/GrcqqBvwjbG8d7QM+XndxNhCtyu24WHIAODhLiCZOb9S0tXgGT7MM9gHPfW/+NyNRT+5Ns0nmCAexhNPxG3Z0IjBH+EREzsbEouGT/CWP58liAztSQ4Me+tjGzjWwhRQW0uzbXge9a8O3Xk5QDpIh5+rh+96y4SMUO13lYgc7tZwdY6cP1dOxO0Sv7qCXayEcZDtyakmpLZqhlMAB7EITTqQhHDlVyVaSUs/LYrtbFFlcCeHj9UpSeqGhFdtd/O4x/HGK3j/Pb56px+DIqSel1RKKvF6DH4PM6xeNyAkKcCSrJqWlGP7/uVMuDjE4OCSldR5Cdge5UszT43DJ8r0oNw8jqPM8Pw6XQ4LoR19owYOgzkv2ZuFS1os60ecfWBTWeUE/ApdnFrVivUXfewXAbCmyu1OwMIRLkFRuaQtnM2xcetuCn1NIWOe/3zzMWxSByw2TxKhpqTkfQqtUrWFnz+Nfe+jTZqEU7WSKHa/hX/qM+t0CPHsCysz2m3YF8SDSFcseUaktY7hkUwEAX7U24tK84JrNYByj69aQ7Nk84FJEAGB4Lakha8tZPgh8csll8evyoVROQ04qWUrW4/8bLsEfF6zEXf9IM+YAAAAASUVORK5CYII=&style=for-the-badge&labelColor=000000)](https://nitro.fi/en)
[![Modified by igloonet](https://img.shields.io/badge/modified%20by%20igloonet-000000?style=for-the-badge&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCI%2BPHBhdGggZmlsbD0iI0U4NzcyMiIgZD0iTTQ4LjA1MiAzOC42MjVhNC45MSA0LjkxIDAgMCAwLTQuOTEgNC45MTIgNC45MSA0LjkxIDAgMSAwIDQuOTEtNC45MTJ6TTM1LjQzNCAwQzE1Ljg5NiAwIDAgMTYuODAxIDAgMzcuNDUzYzAgNC4wMjkgMS42MjIgNy41NDYgNC41NjggOS45MDggMi40NzMgMS45ODMgNS43OCAzLjA3NCA5LjMxNiAzLjA3NCA3LjEzOCAwIDE0LjcyMi00LjU5OCAxNC43MjItMTMuMTIxIDAtNy45NzEgMy4yMzEtOC42MzEgNi44MjctOC42MzEgNC4xMDkgMCA1LjQ0IDEuNDczIDYuMTggMy42ODhhNC4wOTcgNC4wOTcgMCAxIDAgNy43NzQtMi41ODljLTEuNDExLTQuMjQtNC45NzgtOS4yOTQtMTMuOTUzLTkuMjk0LTUuNjA5IDAtMTUuMDIxIDIuMTg1LTE1LjAyMSAxNi44MjYgMCAzLjYxMy0zLjkwNCA0LjkyNi02LjUyOCA0LjkyNi0xLjY1NSAwLTMuMTg0LS40NjQtNC4xOS0xLjI3MS0xLjAxLS44MDktMS41LTEuOTU5LTEuNS0zLjUxNiAwLTE2LjEzNCAxMi4yMjEtMjkuMjU5IDI3LjIzOS0yOS4yNTkgMTUuMDIxIDAgMjcuMjM5IDEzLjEyNSAyNy4yMzkgMjkuMjU5IDAgLjg0OCAwIDMuOTI4LTMuMzM4IDQuOTQ4YTQuMSA0LjEgMCAwIDAtMi43MjQgNS4xMTdjLjY2MyAyLjE2MyAyLjk2NyAzLjQwMSA1LjEzMSAyLjczOSA1LjcyMy0xLjc0NiA5LjEyNC02Ljg1OSA5LjEyNC0xMi44MDVDNzAuODY2IDE2LjgwMSA1NC45NzEgMCAzNS40MzQgMFoiIHN0eWxlPSJmaWxsOiNmZmY7ZmlsbC1vcGFjaXR5OjEiIHRyYW5zZm9ybT0ibWF0cml4KC43MDU1NiAwIDAgLjcwNTU2IDAgNy4yMDcpIi8%2BPC9zdmc%2B&labelColor=black&color=%23e8decf)](https://igloonet.cz)

Easily add [Cookiebot](https://www.cookiebot.com/en/) 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

```zsh
yarn add @igloonet/gatsby-plugin-cookiebot
```

#### NPM

```zsh
npm i @igloonet/gatsby-plugin-cookiebot
```

### Configure `gatsby-config.js`

```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`

## Adding Cookiebot's cookie declaration to a site

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.

```jsx
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 =
        "https://consent.cookiebot.com/00000000-0000-0000-0000-000000000000/cd.js";
      cookiebotCookieDeclaratioScript.type = "text/javascript";
      cookiebotCookieDeclaratioScript.async = true;

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

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

## Contributing to gatsby-plugin-cookiebot

```bash
# 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](https://nitro.fi/en) :).
