[Gatsby] - How to implement properly the GDRP compliance bottom banner?

Site name: https://melodic-lime-copy-01-7bc65.netlify.app

[Description]

I am trying to make my site GDRP compliant with an opt-out/opt-in banned down to the bottom.

[Issue]

To achieve my need I did:

  1. Injected a google analytics JS script into the deployment process containing my UA analytics number.

  2. Follow the process from the following resources:

My current package.json config content:

    "@stackbit/gatsby-plugin-menus": "0.0.4",
    "classnames": "^2.2.6",
    "fs-extra": "^9.0.0",
    "gatsby": "2.21.21",
    "gatsby-plugin-react-helmet": "^3.3.1",
    "gatsby-source-filesystem": "2.3.1",
    "gatsby-transformer-remark": "2.8.7",
    "js-yaml": "^3.13.1",
    "lodash": "^4.17.15",
    "marked": "^1.0.0",
    "moment": "^2.25.3",
    "moment-strftime": "^0.5.0",
    "node-sass": "^4.14.1",
    "node-sass-utils": "^1.1.3",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-helmet": "^6.0.0",
    "react-html-parser": "^2.0.2",
    "react-script-tag": "^1.1.2",
    "rehype-react": "^5.0.1",
    "sprintf-js": "^1.1.2",
    "gatsby-plugin-manifest": "^2.4.3",
    "gatsby-plugin-offline": "^3.2.2",
    "netlify-plugin-gatsby-cache": "^0.2.1",
    "netlify-plugin-hashfiles": "^4.0.1",
    "netlify-plugin-checklinks": "^4.0.1",
    "gatsby-plugin-robots-txt": "^1.5.0",
    "@netlify/plugin-sitemap": "^0.3.3",
    "netlify-plugin-subfont": "^4.1.0",
    "gatsby-plugin-gdpr-cookies": "^1.0.7",
    "react-cookie-consent": "^4.1.0"

My current gatsby-config.js file contents:

Then I have injected the GDRP component in the /src/utils/html.js file:

a. at the top [just tried tho, to see what is happening, tho might be against the basic HTML rules :slight_smile: ]

export default function HTML(props) {
return (
<html {...props.htmlAttributes}>
<CookieConsent location="bottom" buttonText="Accept" declineButtonText="Decline" 
cookieName="gatsby-gdpr-google-analytics">This site uses cookies ...</CookieConsent>
  <head>
    {props.headComponents}
  </head>
  <body {...props.bodyAttributes}>

b. or in the body section

export default function HTML(props) {
return (
<html {...props.htmlAttributes}>
  <head>
    {props.headComponents}
  </head>
  <body {...props.bodyAttributes}>
  <CookieConsent location="bottom" buttonText="Accept" declineButtonText="Decline"
  cookieName="gatsby-gdpr-google-analytics">This site uses cookies ...</CookieConsent>
    {props.preBodyComponents}
    <noscript key="noscript" id="gatsby-noscript">
      This app works best with JavaScript enabled.
    </noscript>

I have no luck so far making this working, the build does not display any bottom GDRP banner cookie consent.

Please, could you provide some guidance here?

Thank you!

hi there, unless i am misunderstanding, this is mostly a gatsby/js configuration question, correct? Are you able to make the banner show up locally?

Hi @perry. Nope. The banner does not show. I can try again for the sake of triple check, but nope. Is the html.js the right place where this cookie consent bit has to be inserted or?

I am asking this because some writings are saying something about layouts
-> index.js [https://github.com/amrschmitz/incorpus/wiki/GDPR-compliance], and this location does not reflect under my current configuration.

Thanks!

hey Obitron, if it is not working locally (so it’s not a Netlify issue) debugging your local code with you is a little out of scope for the kinds of official support we can provide, i’m afraid! I am hoping though that someone from the wider community might weigh in.

You might also drop by the gatsby community and see if someone there can take the time to debug your code with you? https://www.gatsbyjs.org/contributing/community/

if you need assistance getting a working project deployed to netlify correctly, we’re happy to help.

Ohh, okay, this was a little unexpected. I am working hard now, locally, to see if I can make this problem yours first, liking your engagement, before moving into the void with the Gatsby community.

And thanks. I will come back with a resolution regardless.

Alina

1 Like

Okay, the issue was at the layout.js file level. I had to invalidate the cache, and then it was okay-ish. However, there is other issue now, unrelated to Netlify, but this has to be worked on.

Thanks!

1 Like