CODEWITHSUNDEEP
reactjscookiesgoogle-analyticsgatsby
Mrjoes
Mrjoes

Reputation: 25

Trying to figure out how to implement cookies in Gatsby.js and somehow manage them with the new GDPR law

I've tested implemented cookie hub, react-ga, gatsbu plugin-gdpr cookies. Nothing special happends when I configure them, I can't even see any cookies inside devtools. Has anyone come up with how to implement cookies for Gatsby and let the user choose which cookies he wants to use? Do i need to have a special script tag inside head or should gatsby.config replace that?

kind regards, Jonathan

Unfortunately P.S has no script to display ..

Upvotes: 1

Views: 4991

Answers (2)

EliteRaceElephant
EliteRaceElephant

Reputation: 8162

Many plugins only work in "production" mode such as those google analytic ones. Plugins get enabled based on the NODE_ENV variable that Gatsby automatically sets for you everytime your program runs. With gatsby develop NODE_ENV is set to development which disables certain plugins.

When you gatsby build and gatsby serve this environment variable is set to production and thus the plugins get enabled.

Regarding cookie consent:

You can use projects such as react-cookie-consent:

import CookieConsent from "react-cookie-consent";

<CookieConsent
    enableDeclineButton
    onAccept={() => {alert("yay!")}}
    onDecline={() => {alert("nay!")}}
>
This website uses cookies to enhance the user experience.
</CookieConsent>

Upvotes: 1

Mrjoes
Mrjoes

Reputation: 25

Thank you EliteRaceElephant! We got it to work. But now we have stumbled upon a new obstacle. when i try to execute Cookies.remove('_gid') etc the cookies gets deleted but appear again when changing the page. Our code looks like this ATM:

import CookieConsent, { Cookies } from "react-cookie-consent";

const App = props => {
  return (
    <div>
      <Global.MainContainer>
        <Global.flexContainer>
          <Header />
          <div className="contentWrapper">{props.children}</div>
          <CookieConsent
            enableDeclineButton
            location="bottom"
            buttonText="Sure man!!"
            cookieName="myAwesomeCookieName2"
            style={{ background: "#2B373B" }}
            buttonStyle={{ color: "#4e503b", fontSize: "13px" }}
            onDecline={() => { Cookies.remove('_ga')
            Cookies.remove('_gat')
            Cookies.remove('_gid')}}
            setDeclineCookie={false}
          >
            This website uses cookies to enhance the user experience.{" "}
            <span style={{ fontSize: "10px" }}>
              This bit of text is smaller :O
            </span>
          </CookieConsent>
        </Global.flexContainer>
        <Footer />
      </Global.MainContainer>
    </div>
  )
}

export default App

We want to save the state of the user input so the cookies wont re reappear

Upvotes: 0

Related Questions