Gatsbyjs google analytics gdpr

Question

I want to use google analytics in my website, but be gdpr compliant, so only fire it, when the user consents.

I am using gatsby and followed this tutorial: https://www.improvebadcode.com/gatsby-gdpr-cookie-consent/, which makes total sense in my unterstanding.

So I'am using gatsby-plugin-gdpr-cookies and react-cookie-consent.

My gatsby-config looks like this:

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

and my cookie consent in my App.js file like this:

<CookieConsent
        enableDeclineButton
        flipButtons
        location="bottom"
        buttonText="Zustimmen"
        declineButtonStyle={{ background: '#5f7063', border: 'solid grey 1px', color: 'grey' }}
        style={{ background: '#5f7063' }}
        declineButtonText="Ablehnen"
        buttonStyle={{
          backgroundColor: '#fff',
          color: '#000',
          fontSize: '13px',
        }}
        cookieName="gatsby-gdpr-google-analytics"
      >
        Diese Website speichert Cookies auf Ihrem Computer. ...
      </CookieConsent>

After gatsby build my cookie banner ist showing perfectly fine, but I don't receive any data on my google analytics.

I first thought the problem was that I was using the GA4 version of GA, but I generated an "old" Universal Analytics tag and it is still not working.

Can anybody tell me, what I'm doing wrong?

This ist the output on my website when I look for google analytics on my website:

 var options = (0, _merge.default)(_defaultOptions.default, pluginOptions);

  if (isEnvironmentValid(options.environments)) {
    // google analytics
    initGoogleAnalytics(options); // facebook pixel

    initFacebookPixel(options);
  }
}; // initializing helpers


exports.onClientEntry = onClientEntry;

var initGoogleAnalytics = function initGoogleAnalytics(options) {
  if (cookies.get(options.googleAnalytics.cookieName) === "true" && (0, _validTrackingId.validGATrackingId)(options)) {
    _reactGa.default.initialize(options.googleAnalytics.trackingId);

    window.GoogleAnalyticsIntialized = true;
  }
};

var initFacebookPixel = function initFacebookPixel(options) {
  if (cookies.get(options.facebookPixel.cookieName) === "true" && (0, _validTrackingId.validFbPixelId)(options) && typeof window.fbq === "function") {
    window.fbq("init", options.facebookPixel.pixelId);
    window.FacebookPixelInitialized = true;
  }
};

var checkIfGoogleAnalyticsIsInitilized = function checkIfGoogleAnalyticsIsInitilized() {
  return !!window.GoogleAnalyticsIntialized;
};

var checkIfFacebookPixelIsInitilized = function checkIfFacebookPixelIsInitilized() {
  return !!window.FacebookPixelInitialized;
}; // track


var onRouteUpdate = function onRouteUpdate(_ref, pluginOptions) {
  var location = _ref.location;

  if (pluginOptions === void 0) {
    pluginOptions = {};
  }

  var options = (0, _merge.default)(_defaultOptions.default, pluginOptions);

  if (isEnvironmentValid(options.environments)) {
    // google analytics
    if (!checkIfGoogleAnalyticsIsInitilized()) initGoogleAnalytics(options);

    if (cookies.get(options.googleAnalytics.cookieName) === "true" && (0, _validTrackingId.validGATrackingId)(options) && _reactGa.default.ga) {
      var gaAnonymize = options.googleAnalytics.anonymize;
      var gaAllowAdFeatures = options.googleAnalytics.allowAdFeatures;
      gaAnonymize = gaAnonymize !== undefined ? gaAnonymize : true;
      gaAllowAdFeatures = gaAllowAdFeatures !== undefined ? gaAllowAdFeatures : true;

      _reactGa.default.set({
        page: location.pathname,
        anonymizeIp: gaAnonymize,
        allowAdFeatures: gaAllowAdFeatures
      });

      _reactGa.default.pageview(location.pathname);
    } // google tag manager


    if (cookies.get(options.googleTagManager.cookieName) === "true" && (0, _validTrackingId.validGTMTrackingId)(options)) {
      setTimeout(function () {
        var data = options.googleTagManager.dataLayerName ? window[options.googleTagManager.dataLayerName] : window.dataLayer;

        if (typeof data === "object") {
          var eventName = options.googleTagManager.routeChangeEvent || "gatsbyRouteChange";
          data.push({
            event: eventName
          });
        }
      }, 50);
    } // facebook pixel


    if (!checkIfFacebookPixelIsInitilized()) initFacebookPixel(options);

    if (cookies.get(options.facebookPixel.cookieName) === "true" && (0, _validTrackingId.validFbPixelId)(options) && typeof window.fbq === "function") {
      window.fbq("track", "PageView");
    }
  }
};

exports.onRouteUpdate = onRouteUpdate;

Answer 1

I've faced recently the same issue, some Google Analytics plugins (gatsby-plugin-gdpr-cookies and gatsby-plugin-google-analytics). It seems that both are actually using an old version of the tracker. The script was perfectly inserted in the page but it doesn't show any results in Google's dashboard.

Reading some official documentation I've ended using gatsby-plugin-google-gtag (recommended by Gatsby) and it worked, maybe it works for you too:

// In your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-google-gtag`,
      options: {
        // You can add multiple tracking ids and a pageview event will be fired for all of them.
        trackingIds: [
          "GA-TRACKING_ID", // Google Analytics / GA
          "AW-CONVERSION_ID", // Google Ads / Adwords / AW 
          "DC-FLOODIGHT_ID", // Marketing Platform advertising products (Display & Video 360, Search Ads 360, and Campaign Manager)
        ],
        // This object gets passed directly to the gtag config command
        // This config will be shared across all trackingIds
        gtagConfig: {
          optimize_id: "OPT_CONTAINER_ID",
          anonymize_ip: true,
          cookie_expires: 0,
        },
        // This object is used for configuration specific to this plugin
        pluginConfig: {
          // Puts tracking script in the head instead of the body
          head: false,
          // Setting this parameter is also optional
          respectDNT: true,
          // Avoids sending pageview hits from custom paths
          exclude: ["/preview/**", "/do-not-track/me/too/"],
        },
      },
    },
  ],
}

You can omit/remove all the optional parameters and replace the GA-TRACKING_ID by yours.