Search code examples
reactjsgoogle-analyticsgatsby

react cookie consent not registering on first site visit

I have a react gatsby site and I'm using the gatsby-plugin-gdpr-cookies plugin.

This is in my gatsby-config:

{
  resolve: "gatsby-plugin-gdpr-cookies",
  options: {
    googleAnalytics: {
      trackingId: "", // Google Analytics Property ID
      cookieName: "", // Cookie name
      anonymize: true, // Anonymize IP addresses (required by German privacy law)
      allowAdFeatures: false, // Collect user information for ad reports (audience demographics, interests)
    },
    environments: ["production", "development"],
  },
},

The consent banner comes up properly and when I hit accept, it can register that through the onAcccept parameter which makes me feel I have the consent banner set up properly. However, no data is sent to google analytics until the user goes to a new page. Once the new user goes to a new page, then both the page of site entry and the new page is registered.

I have the latest version of the plugin (v2.0.8) and from gatsby's docs "Reloading the page after setting the cookies is not required anymore". I know that I can use the intializeAndTrack function on accept, but would love to not have to do that.

And here is my cookie consent component:

  <CookieConsent
    // debug
    // enableDeclineButton
    disableStyles
    location="bottom"
    buttonClasses="cc-button"
    buttonWrapperClasses="cc-button-wrap"
    declineButtonClasses="cc-button-no"
    containerClasses="cc-container"
    contentClasses="cc-content"
    buttonText="Accept"
    ariaAcceptLabel="Accept"
    declineButtonText="Reject"
    ariaDeclineLabel="Reject"
    cookieName="gil-gdpr-google-analytics"
  >
    We use cookies to enhance site navigation, analyze site usage, and
    support our marketing efforts. By accepting cookies, you are allowing
    them to be stored on your device.
  </CookieConsent>
Solution

  • Reloading the page after setting the cookies is not required anymore

    This means that you don't need to refresh (F5) to start the tracking because it's fired in the onClientUpdate event, so, when the user access a new page and Gatsby catches the event, within the scope of the React routing. However, to start tracking once the user accepts the GDPR, you need to initialize the initializeAndTrack as the name and the docs suggest:

    This gatsby plugin now supports initializing and tracking right after a user accepts the cookie consent.

    // in your cookie banner

import { useLocation } from "@reach/router" // this helps tracking the location
import { initializeAndTrack } from 'gatsby-plugin-gdpr-cookies'

    Then 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.

    What you were describing is the intended behavior, because, without the initializeAndTrack event, the first trigger of the GPRD tracking is on the first user navigation (onClientUpdate).