Cookies are not loading first time in Gatsby with gatsby-plugin-gdpr-cookies and react-cookie-consent

Question

explanation:

This code works (with gatsby develop or gatsby build && gatsby serve), but if I do my code without onAccept={() => window.location.reload()} is not working properly because just load my cookie -> (gatsby-gdpr-google-analytics = true) but are not loading ga cookies at the same time, and I have to refresh with onAccept. Any idea how to load all cookies same time without forcing a refresh?

my code:

// gatsby-config.js

 {
      resolve: `gatsby-plugin-gdpr-cookies`,
      options: {
        googleAnalytics: {
          trackingId: 'my_tracking_id', // leave empty if you want to disable the tracker
          cookieName: 'gatsby-gdpr-google-analytics', // default
          includeInDevelopment: true,
          head: true
        },
        // defines the environments where the tracking should be available  - default is ["production"]
        environments: ['production', 'development']
      },
    },

// index.js

import CookieConsent from "react-cookie-consent";

 <CookieConsent
        overlay
        id="#consentModal"
        location="bottom"
        buttonText="ACCEPT"
        declineButtonText="DECLINE"
        cookieName="gatsby-gdpr-google-analytics"
        expires={150}
        enableDeclineButton
        style={{
          background: "black",
          display: "flex",
          padding: "10px"
        }}
        buttonStyle={{
          display: "inline-flex",
          background: "#fff",
          color: "red",
          borderRadius: "4px",
          justifyContent: "middle",
          width: "85px",
        }}
        declineButtonStyle={{
          display: "inline-flex",
          background: "#ff5f56",
          borderRadius: "4px",
          color: "#fff",
          cursor: "pointer",
          width: "85px"
        }}
        onAccept={() => window.location.reload()} //I would like to remove this refresh
      >
        <p style={{ float: "left", }}> my text </p>
        <p style={{ float: "left", }}>my text</p>
      </CookieConsent>

Ferran Buireu Ferran Buireu · Accepted Answer · 2021-01-15T11:19:16

Use:

import CookieConsent from "react-cookie-consent";
import { useLocation } from "@reach/router" 
import { initializeAndTrack } from 'gatsby-plugin-gdpr-cookies'
    
<CookieConsent
        overlay
        id="#consentModal"
        location="bottom"
        buttonText="ACCEPT"
        declineButtonText="DECLINE"
        cookieName="gatsby-gdpr-google-analytics"
        expires={150}
        enableDeclineButton
        style={{
          background: "black",
          display: "flex",
          padding: "10px"
        }}
        buttonStyle={{
          display: "inline-flex",
          background: "#fff",
          color: "red",
          borderRadius: "4px",
          justifyContent: "middle",
          width: "85px",
        }}
        declineButtonStyle={{
          display: "inline-flex",
          background: "#ff5f56",
          borderRadius: "4px",
          color: "#fff",
          cursor: "pointer",
          width: "85px"
        }}
        onAccept={() => {
          initializeAndTrack(location) 
        }}
      >
        <p style={{ float: "left", }}> my text </p>
        <p style={{ float: "left", }}>my text</p>
      </CookieConsent>

gatsby-plugin-gdpr-cookies supports tracking without refreshing the page using some built-in consumers.

Once the helpers are imported, you can execute initializeAndTrack(location) in your cookie banner callback. This will initialize the plugin with your options from the gatsby-config.js and then starts tracking the user based on the cookies/services are accepted.

Cookies are not loading first time in Gatsby with gatsby-plugin-gdpr-cookies and react-cookie-consent

1 Answers