Adding Google Tracking

2021-04-11

Why?

In my previous portfolio site, I had Google analytics added so I could see how the traffic flowed around. It gives an idea of if my landing page needs to be more interesting, or if the individual pages need more attention, as well as just how many people are hitting where. Plus it's nice to be a little nosy on what traffic you have.

I wanted to do it properly this time, with GDPR and all that, but didn't really want to spend too much time on writing it myself. A quick google led to using a mixture of a gatsby plugin for the tracking itself (gatsby-plugin-gdpr-cookies) and a react plugin for the popup (react-cookie-consent). Mixing the 2 together seems to be the easiest way of getting info back out.

Installation

Installing both packages is just a simple npm i, so really not much of a problem there. Both packages have pretty good documentation meaning I wasn't really worried about it too much.

gatsby-plugin-gdpr-cookies does however give a choice of either standard analytics or using google tags.

First I gave the tag manager a go - it seems like the route they want to take it in and makes more sense to me to parse it there. However after a quick basic config, checking in Google's tag manager test suite showed I wasn't really getting any data out at all, never mind additional data.

I threw that idea away and decided to just use what I needed in the standard analytics.

This plugin works by checking for the cookie to be set before it initialises on any new page, and there's a function call for when the page allows the cookie to mark that page too.

My config ended up pretty much as basic as the example:

{
  resolve: `gatsby-plugin-gdpr-cookies`,
  options: {
    googleAnalytics: {
      trackingId: 'G-XXXXXXXXXX',
      cookieName: 'gatsby-gdpr-google-analytics',
      anonymize: true,
      allowAdFeatures: false,
    },
    environments: ['production', 'development'],
  },
}

The plugin config went to the top of my plugins in gatsby-config as suggested by the readme.
Before building, I'll remove the development tag from the array, and I'll stick the tracking ID as a environment variable rather than checking it in.

This seemed to be the most used pre-built consent banner, and seeing as it's just for page hits I wasn't putting much more effort into it. I did want to style it a little and to allow people to opt out though.

With a bit of fiddling I had the banner set up to allow opt out, and to set the gatsby-gdpr-google-analytics cookie. There's also a small line in the readme about setting the useLocation from @reach/router to catch every page change, which I missed at first.

// Somewhere else in the function
const location = useLocation()

// In the return
<CookieConsent
  cookieName="gatsby-gdpr-google-analytics"
  onAccept={() => {
    initializeAndTrack(location)
  }}

  buttonText="Accept"
  enableDeclineButton
  declineButtonText="Decline"
  flipButtons
  
  location="top"
  disableStyles
  containerClasses="cookieConsentContainer"
  buttonClasses="cookieConsentButton cookieConsentAcceptButton"
  declineButtonClasses="cookieConsentButton cookieConsentDeclineButton"
  contentClasses="cookieConsentContent"
>

After that was just styling it.
My CSS is a little messy, but I think I did an alright job of containing it and getting the result I wanted, although there's 2 long named classes per button. Really I wanted to extend the accept and decline buttons from the base button style, but it works and I'm happy enough with it, I think it fits in pretty well.

Summary

It's not a huge amount of effort, taking a little time over the course of a few days, maybe a couple of hours total. For that effort I can see how people interact with my site and get a bit more experience with Google's tracking system, which is always interesting.

It's massive overkill for this, and I think they've made the new tracking ui harder to use unless you spend more time on it.

It will however now track file downloads and hopefully be easier to use in the long term.

Look!