@igloonet/gatsby-plugin-cookiebot
Version:
Gatsby plugin for Cookiebot CMP
110 lines (84 loc) • 6.43 kB
Markdown
# /gatsby-plugin-cookiebot
[](https://www.npmjs.com/package/@igloonet/gatsby-plugin-cookiebot)
[](https://github.com/igloonet/gatsby-plugin-cookiebot/blob/main/LICENSE)
[](https://nitro.fi/en)
[](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 /gatsby-plugin-cookiebot
```
#### NPM
```zsh
npm i /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 /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](https://nitro.fi/en) :).