Gatsby: Add Google Global Site Tag Plugin

[tylerbuchea]

Prerequisite

The way I understand it is that Google now has 3 properties for tracking visitors on a website. These 3 are similarly named and sort of do the same thing so I want to define them up front so no one gets confused.

1. Google Analytics/GA/analytics.js - This is the legacy code snippet that is used to send data to Google Universal Analytics

2. Global Site Tag/GST/gtag.js - This is the new code snippet that is also used to send data to Google Universal Analytics. It is an improved library taking into consideration modern standards and it has the added benefit of integrating with other Google Services such as Adwords.

3. Google Tag Manager or GTM - This is different from the other two in that once it is enabled on a site the events can be updated via the GTM dashboard and doesn't require a developer. This is a cool technology but isn't what I'll be talking about today.

There are already Gatsby plugins for 1 and 3 but not for 2.

https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-google-analytics
https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-google-tagmanager

Proposal

Given the fact that more of Google's services are converging on the gtag.js snippet I think it makes sense to add an official Gatsby plugin packages/gatsby-plugin-google-gtag.

Is this something the community has already been thinking about or something we'd be interested in adding?

Resources

• https://developers.google.com/adwords-remarketing-tag/
• https://developers.google.com/analytics/devguides/collection/gtagjs/migration
• https://github.com/gatsbyjs/gatsby/issues/new?template=question.md
• https://github.com/h5bp/html5-boilerplate/issues/2014
• https://github.com/gatsbyjs/gatsby/issues/3174
• https://spectrum.chat/thread/48cbe4c2-61e5-4b11-868b-3d5477e003a0
• https://github.com/gatsbyjs/gatsby/issues/4976

[KyleAMathews]

Seems like a great plan! Would love an official plugin added here for it.

[kakadiadarpan]

@tylerbuchea would you like to create this plugin for Gatsby?

[tylerbuchea]

It'd be an honor 🙂

[kmjennison]

I wrote a quick version of this here, in case it helps:

// gatsby-ssr.js
import React from 'react'
import { oneLine } from 'common-tags'

exports.onRenderBody = ({ setHeadComponents }) => {
  const GST_ID = 'SOME_ID'
  if (process.env.NODE_ENV === `production`) {
    setHeadComponents([
      <script
        key="google-gst-js"
        async
        src={`https://www.googletagmanager.com/gtag/js?id=${GST_ID}`}
      />,
      <script
        key="google-gst-init"
        dangerouslySetInnerHTML={{
          __html: oneLine`
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${GST_ID}');`,
        }}
      />,
    ])
  }
}

Happy to publish a plugin, too, though it'll be a week or two before I get around to it.

[tylerbuchea]

Yeah kmjennison that is essentially it. There are some other pieces revolving around gtag options, multiple trackingIds, DNT, and pageview events. I'm done building the plugin and in the testing phase with my brother now. Would love some help though if you're interested?

[kmjennison]

@tylerbuchea Sure, happy to help, though mostly offline this week. LMK how I can be helpful.

[AmilKey]

@tylerbuchea any updates here?

[tylerbuchea]

Been busy moving but my goal is to open the PR before this weekend.