Jessica Valencia

Posted on Oct 25, 2020

Upgrade to the next generation of Google Analytics in Gatsby project

#gatsby #react #seo #webmaster

Cover image produced by Google

Background

Did you know that Google has released new Google Analytics a couple of weeks ago?

It's perfectly OK if you didn't. Until a few hours ago, I myself didn't know about it. Although I use Google Analytics everyday for my website(카지노사이트) SEO. Somehow Google Analytics haven't shown me any update alerts or messages. I heard about it from some of my colleagues.

What's new in updated version?

Google Analytics can now detect device switching (like when a user changes from mobile to desktop) and will show you unified and integrated web & app reporting.
And much more that I don't understand right now
Most importantly: It is now default experience for all Google Analytics properties and where Google is investing for future improvements.

Problem

As I wrote in the follwing DEV post

How I got perfect Google Lighthouse score with Gatsby

Jessica Valencia ・ Sep 28 ・ 4 min read

#showdev #webdev #webperf #gatsby

my website(카지노사이트) is built with Gatsby.

In Gatsby.js, you install legacy (well, not yet but if you know what I mean) Google Analytics with gatsby-plugin-google-analytics. Like this way:

gatsby-config.js

plugins: [
    {
      resolve: 'gatsby-plugin-google-analytics',
      options: {
        trackingId: 'UA-1*******0-2',
        head: true,
        defer: true,
      },
    },
    ...
]

The problem is, you cannot install newer version of Google Analytics in this way. And as far as I know, there is not a gatsby plugin for newer version yet. :(

Goal

For updated version, you need to add measurement ID that looks like G-********** and need to

Copy and paste this code as the first item into the
of every webpage you want to measure.

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-**********"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-**********');
</script>

How to

1. Get GA4 stream measurement ID

First, log in to your Google Analytics account and click "Admin" button.

Next, click "Create Property" button.

Just ignore "Upgrade to GA4" here. It will take you to create property screen anyway.

Configure your property. Do as you like.

Then, select created property and click "Data Stream" tab, then click "Add stream" -> Web.

If you already have a Web stream, just click to see its details.

In detail page, you can get your measurement ID and gtag script:

2. Install acquired gtag in Gatsby project

My approach is a workaround but it will do its work before gatsby plugin update. I customized html.js as described in this article. FYI, html.js is what Gatsby uses to server render head tag and other components that React cannot touch.

First, copy `.cache/default-html.js` to `html.js`.

If you already have html.js, you can skip this step.

$ cp .cache/default-html.js src/html.js

html.js will look like the following:

 <html {...props.htmlAttributes}>
    <head>
        <meta charSet="utf-8" />
        <meta httpEquiv="x-ua-compatible" content="ie=edge" />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />
        {props.headComponents}
    </head>
    <body {...props.bodyAttributes}>
...

Edit `head` tag like the following:

<head>
    <script
        async
        src="https://www.googletagmanager.com/gtag/js?id=G-**********"
    />
    <script
        dangerouslySetInnerHTML={{
            __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', 'G-**********');
        `,
        }}
    />
    <meta charSet="utf-8" />
    <meta httpEquiv="x-ua-compatible" content="ie=edge" />
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
        {props.headComponents}
</head>

Deploy your project.

Go to your Google Analytics and check if it works.

You can uninstall legacy tracking code and gatsby plugin after successful upgrade.

Conclusion

That's all folks!

If you find anything wrong in my post or have a better idea, please leave a comment to let me know.

If you're good at Gatsby.js, please come visit my website and share your idea. Any suggestion is welcome!

Top comments (7)

José Cadena • Nov 19 '20 • Edited

Thanks for your article, reading comments i tried to use the suggested plugin before implementing your solution(quiet interesting by the way) gatsbyjs.com/plugins/gatsby-plugin... and it works, just by adding it with npm install and also adding the plugin node values inside gatsby-config.js gatsbyjs.com/plugins/gatsby-plugin...
I copied my measurement id in "GA-TRACKING_ID" and it works. I expect more updates from official gatsby plugin, but for now seems to be ok