Gatsbyjs + Google analytics - tracking custom events?

Question

Is it somehow possible to track custom events with gatsby and google analytics?

Rabbitfish

Can you go into a little more detail on what you're trying to achieve? – Comprehensive

A simple example would be - I have a list of entries, each one has some "algorithm" attached. When user selects an entry I want to track the algorithm to understand which one is the most used – Rabbitfish

Answer 1

I've used ReactGA in conjunction with Gatsby and had good success.

For basic event tracking - like logging a clicked link - it's very easy to use. You create a logging function in your component that accesses ReactGA.event and then invoke it in your render function using onClick.

Example component logging a PDF download:

import React from 'react'
import Link from 'gatsby-link'
import ReactGA from 'react-ga'

import logo from './logo.png'
import financials from './Annual_Report_Financials_2017_FINAL.pdf'

class LoggingDownload extends React.Component {
  logger() {
    // Detect each click of the financial PDF
    ReactGA.event({
      category: 'Financial Download',
      action: 'User clicked link to view financials'
    })
  }

  render() {
    return (
      <div>
        <nav className="nav-container">
          <Link to="/locations">
            <img className="logo" src={logo} alt="Logo" />
          </Link>
          <ul className="nav-item-container">
            <li className="nav-item">
              <a href="/shortsignup/" target="_blank">Join Us</a>
            </li>
            <li className="nav-item">
              <a href={financials} onClick={this.logger} target="_blank" id="financials-pdf">Financials</a>
            </li>
          </ul>
        </nav>
      </div>
    )
  }
}
export default LoggingDownload

There are tons more use cases - check out ReactGA docs.

Also: don't forget to include ggatsby-plugin-google-analytics in your gatsby-config.js file as a dependency to getting the above to work correctly:

{
  resolve: `gatsby-plugin-google-analytics`,
  options: {
    trackingId: "UA-#########-##",
    // Puts tracking script in the head instead of the body
    head: false,
    // Setting this parameter is optional
    respectDNT: true,
  }
}

Egwan

Nice, thanks. So basically gatsby plugin takes over analytics setup and then ReactGA just works without any setup? – Rabbitfish

gatsby-plugin-google-analytics inserts GA into the end of the body of your site automatically, so basic pageviews are easily tracked that way. And if you need event tracking, outbound links, that's where I've used react-ga. I think you could setup pageview tracking without gatsby-plugin-google-analytics if you wanted a very slightly cleaner dependency chain. – Egwan

Answer 2

For anyone who is still wondering, gatsby-plugin-google-analytics is not the approach I would take for google analytics. What you are looking for is gatsby-plugin-google-gtag. This plugin automatically sends pageviews, as well as makes the gtag event available on the window.

window.gtag("event", "click", { ...data })

Google also gives us migration docs for anyone who is still using gatsby-plugin-google-analytics you can find here (link also in the gatsby docs).

Bond

This one looks better, I spend15 minutes every time I need to add analytics to ensure that gatsby-plugin-google-analytics is not what I am looking for. It does not even states that analytics only works in production, while gtag clearly defines that with big NOTE wording. Love it so far – Kalgan

Answer 3

You can use the provided OutboundLink for simple link tracking:

import React from "react"
import { OutboundLink } from "gatsby-plugin-google-gtag"

export default () => (
  <div>
    <OutboundLink href="https://www.gatsbyjs.org/packages/gatsby-plugin-google-gtag/">
      Visit the Google Global Site Tag plugin page!
    </OutboundLink>
  </div>
)

Warmblooded

Where to look for this OutboundLink in the Analytics Dashboard? I mean I can see page-views in the dashboard but click events or link clicks are not defined there, where can i check those? – Quinonez

Had the same issue. Perhaps default GA4 only allows for seeing outbound events in real-time or the last 30 min. Might need to manually do a gtag push and do a custom event. – Smtih