@igloonet/gatsby-plugin-cookiebot

1.0.2 • Public • Published

@igloonet/gatsby-plugin-cookiebot

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

yarn add @igloonet/gatsby-plugin-cookiebot

NPM

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

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.

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

# 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 :).

Package Sidebar

Install

npm i @igloonet/gatsby-plugin-cookiebot

Weekly Downloads

1

Version

1.0.2

License

MIT

Unpacked Size

12.5 kB

Total Files

7

Last publish

Collaborators

  • kepi.cz