Recently, I published my first website using the Gatsbyjs Framework (and using the GC): Site: https://www.humital.be/
However, since the founders want to use analytics and cookies, I came to the 'React-cookie-consent
' package. When first installed, it seemed to work perfectly fine. However, after a week, it suddenly disappeared. When I try to fix it, it still works on Build in Gatsbyjs. You can find my [latest build here][1] In my package.json
I can see the following:
"
dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1",
"@fortawesome/react-fontawesome": "^0.2.0",
"ansi-html": "^0.0.9",
"gatsby": "^4.18.0",
"gatsby-plugin-csp": "^1.1.3",
"gatsby-plugin-gatsby-cloud": "^4.18.0",
"gatsby-plugin-google-gtag": "^4.18.0",
"gatsby-plugin-image": "^2.18.0",
"gatsby-plugin-manifest": "^4.18.0",
"gatsby-plugin-offline": "^5.18.0",
"gatsby-plugin-react-helmet": "^5.18.0",
"gatsby-plugin-robots-txt": "^1.7.1",
"gatsby-plugin-sharp": "^4.18.0",
"gatsby-plugin-sitemap": "^5.18.0",
"gatsby-source-filesystem": "^4.18.0",
"gatsby-transformer-sharp": "^4.18.0",
"jpeg-js": "^0.4.4",
"node-fetch": "^2.6.7",
"nth-check": "^2.1.1",
"parse-path": "^5.0.0",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-cookie-consent": "^7.5.0",
"react-dom": "^18.2.0",
"react-helmet": "^6.1.0"
},
"devDependencies": {
"gh-pages": "^4.0.0",
"prettier": "^2.7.1"
In my Layout Component
I implemented the package:
import * as React from "react"
import NavBar from "../navigation/navbar"
import "../../styles/global.css"
import * as styles from "./layout.module.css"
import Footer from "../footer/footer"
import CookieConsent from "react-cookie-consent"
import { Link } from "gatsby"
const Layout = ({ children }) => {
return (
<>
<div className={styles.flex}>
<NavBar />
<main>{children}</main>
</div>
<CookieConsent
buttonStyle={{
background: "#78c0a8",
cursor: "pointer",
color: "white",
}}
declineButtonClasses={{
background: "#f07818",
cursor: "pointer",
color: "white",
}}
location="bottom"
buttonText="Accepteer de koekjes"
enableDeclineButton
declineButtonText="ik wil geen koekjes"
cookieName="gatsby-gdpr-google-analytics"
onAccept={() => {
alert("je hebt de koekjes geaccepteerd!")
}}
onDecline={() => alert("je weigerde de koekjes")}
overlay={true}
flipButtons={true}
>
Omnom Omnom! Wij gebruiken koekjes om jouw ervaring beter te maken. Wil
je meer weten welke gegevens we verzamelen? Klik{" "}
<Link to="/privacy">hier.</Link>
</CookieConsent>
<Footer />
</>
)
}
export default Layout
I am not sure why the banner is not showing up anymore.
Any help is welcomed :)
Thank you! [1]: https://build-31c09012-9025-4d4b-b3a9-c969d86fc86d.gtsb.io/
When accessing your website the background is grayed out, as if the cookie banner was there, unless this is on purpose. Have you tried giving the banner a z-index of 99 or so?