22

My website gathers information for Google Analytics, so I need to include a Cookie consent banner for the users to opt in/out of.

I saw the plugin gatsby-plugin-gdpr-cookies and thought it looked perfect. I've followed the startup and have it inside my config file. However I'm not sure what to do next. Do I need to create a banner component and link it all up somehow? I've tried to look around for other examples but can't see any.

Any help appreciated, thanks.

James Brightman
  • 857
  • 2
  • 13
  • 23

3 Answers3

48

You have to combine a Gatsby plugin and build your own cookie consent banner or use a ready made component to achieve this.

First as AskaNor_29 suggested you need to install and configure the gatsby-plugin-gdpr-cookies plugin. You can get the plugin here.

Configure the plugin in gatsby-config.js

// In your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-gdpr-cookies`,
      options: {
        googleAnalytics: {
          trackingId: 'YOUR_GOOGLE_ANALYTICS_TRACKING_ID',
          // Setting this parameter is optional
          anonymize: true
        },
        facebookPixel: {
          pixelId: 'YOUR_FACEBOOK_PIXEL_ID'
        },
        // Defines the environments where the tracking should be available  - default is ["production"]
        environments: ['production', 'development']
      },
    },
  ],
}

The second part is showing a cookie consent banner or modal so the user can make his choice.

For this you can use the react-cookie-consent npm module. You can get the npm package here.

To make it work with the gatsby-plugin-gdpr-cookies, you need to set the cookieName="gatsby-gdpr-google-analytics" prop.

Then you put the CookieConsent component in your layout.js file so it's activated on any page the user visits first.

<CookieConsent
          location="bottom"
          buttonText="Accept"
          declineButtonText="Decline"
          cookieName="gatsby-gdpr-google-analytics">
This site uses cookies ...
</CookieConsent>

The component takes many props so you can tweak the behaviour and looks.

If you want both Google Analytics and Facebook Pixel cookies to be set, there are callbacks for accepting/declining cookies where you can add your custom code to set both cookies.

If you're interested I wrote a longer how-to describing the steps.

Bojan Bedrač
  • 846
  • 1
  • 7
  • 10
  • 2
    This works! Thanks for this detailed tutorial. I've been searching all over and this is the first time and article that covers for beginner. I wonder if it's possible for user to trigger Cookie Consent by choice? I've seen sites have Cookie Settings and upon clicking, triggering Cookie Consent modal. Tutorial v2 perhaps? :p – ajmalafif Jan 27 '20 at 06:30
  • You mean like the sort of modal that some sites are using where you can configure a bunch of cookies at once? Do you have a specific list of tracking services in mind? – Bojan Bedrač Jan 27 '20 at 08:20
  • @BojanBedrač Partly yes. So for example, this site [Framer](https://www.framer.com/) at the very bottom in the footer, there's this Cookie Settings link. Clicking it triggers back the Cookie Consent modal it asked the very first time. Use case I'm imagining is maybe user say `Yes` by accidental or at first, then decide to Decline. This seems like a great implementation of that. – ajmalafif Jan 28 '20 at 09:10
  • Has someone an idea for an optout on the privacy page after accepting the cookies? My quickfix is to place a link with onklick event and delete all cookies with pure js. But it would be better if all of this came from the same component. – freesh Apr 21 '20 at 19:37
  • Can you elaborate how to actually stop the tracking? I have set the cookie and set it to false but when I'm in my analytics account it still tracks me and shows my presence. Im not able to tell if it really prevents tracking. Also I see _ga in the cookies which are from my root page. And I have only installed the libraries you described above. – TheWeeezel Jun 18 '20 at 07:17
  • It should not even include analytics.js script if the cookie is not set or set to false. Works this way for me on https://www.improvebadcode.com/. Check your settings (cookie name). – Bojan Bedrač Jun 19 '20 at 09:28
  • Ok, sounds like there are simple solutions. But is it possible to even make other plugins like [leadfeeder][1] work with the cookie consent banner this way? Or is it kind of limited to google analytics and facebook pixel? [1]: https://www.gatsbyjs.org/packages/gatsby-plugin-leadfeeder/ – Slowwie Jun 26 '20 at 06:40
  • Cookie consent banner can control any cookie or multiple cookies. The `gatsby-plugin-gdpr-cookies` seems to only support [Facebook Pixel, Google Analytics and Google Tag Manager](https://www.gatsbyjs.com/plugins/gatsby-plugin-gdpr-cookies/) – Bojan Bedrač Nov 10 '20 at 16:13
  • You rock! Just set this up quick and easy... used your blog post... https://www.improvebadcode.com/gatsby-gdpr-cookie-consent/ – doublejosh May 21 '21 at 06:37
  • @doublejosh thanks. I'm glad you find it useful. – Bojan Bedrač May 21 '21 at 18:28
  • Worth pointing out that GTM works too... `googleTagManager: { trackingId: "MY_CODE", cookieName: "gdpr-agree" }` – doublejosh Jul 09 '21 at 04:00
  • @BojanBedrač Any idea why this doesn't work in production...? It starts tracking immediately and sets cookies before any Accept/Decline user action. Than even if declined, the tracking scripts remain... Others have the same issue: https://github.com/andrezimpel/gatsby-plugin-gdpr-cookies/issues/66 In Gatsby dev mode (with gatsby `develop`) it works as expected. – Rwzr Q Jul 02 '23 at 16:52
2

Attention, I had an issue with tracking via Google Analytics. After a lot of research I found the solution in the reactGaOptions which is used under the hood by gatsby-plugin-google-analytics-gdpr. Use the sampleRate option to enable 100% tracking so that also mobilephones will send the requests to Google. In normal mode it is set to 1% so in low bandwith you will loose a lot of user information. 

reactGaOptions: {
  debug: false,
  gaOptions: {
    sampleRate: 100,
    siteSpeedSampleRate: 100
  }
}
Mitch
  • 160
  • 10
1

From the plugin page

First of all the plugin checks in which environment your site is running. If it’s currently running in one of your defined environments it will add the Facebook Pixel javascript by default to the of your site. It will not be activated or initialized by this.

By default this plugin will not send any data to Google or Facebook to make it GDPR compliant. The user first needs to accept your cookie policy. By accepting that you need to set two cookies - gatsby-gdpr-google-analytics and gatsby-gdpr-facebook-pixel. Depending on the user input the value of each of the cookies should be true or false.

If the gatsby-gdpr-google-analytics cookie is set to true, Google Analytics will be initialized onClientEntry. Same is for the Facebook Pixel.

The page view will then be tracked on onRouteUpdate.

So you should build a banner component and set the cookies to true or false, it depends on the user choice.

AskaNor_29
  • 97
  • 1
  • 12
  • 2
    This is a good answer - it's important to set each of your cookies to have a `true` value otherwise the plugin won't know what to do (Thats if you're tracking with more than one cookie like analytics and facebook for example). If you're using a package like `react-cookie-consent` for your banner (as outlined in the popular answer above). Your `onAccept` method would look something like this: `onAccept={() => {Cookies.set("gatsby-gdpr-google-analytics", "true"); Cookies.set("gatsby-gdpr-facebook-pixel", "true"); initializeAndTrack(location); }}` – pr0tipZ Jul 10 '21 at 22:19