Add gatsby-plugin-google-gtag #9032

tylerthebuildor · 2018-10-11T17:25:09Z

This PR adds support for Google's Global Site Tag (gtag) and closes #8341 you can view that issue for a detailed breakdown.

DSchau

Looking great! Left a number of comments, thanks for the PR!

DSchau · 2018-10-11T17:33:19Z

packages/gatsby-plugin-google-gtag/README.md

+To use it, simply import it and use it like you would the `<a>` element e.g.
+
+```jsx
+import React


import React from 'react'

DSchau · 2018-10-11T17:33:56Z

packages/gatsby-plugin-google-gtag/README.md

@@ -0,0 +1,116 @@
+# gatsby-plugin-google-gtag
+
+Easily add Google Global Site Tag to your Gatsby site.


Sorta tangential to this PR, but could be helpful to document/link to why here, e.g. why this over gatsby-plugin-google-analytics

DSchau · 2018-10-11T17:55:57Z

packages/gatsby-plugin-google-gtag/src/gatsby-ssr.js

+      }
+      if(${
+        typeof pluginOptions.respectDNT !== `undefined` &&
+        pluginOptions.respectDNT == true


Can we use strict equality here? ===

DSchau · 2018-10-11T17:59:06Z

packages/gatsby-plugin-google-gtag/src/gatsby-ssr.js

+    : setPostBodyComponents
+
+  const renderHtml = () => {
+    return `


Merely a suggestion, but when I have a few conditions like this, I like to use an array, e.g.

const condOne = true; const condTwo = false; const condThree = true; const html = [] .concat(condOne && `condition one is true`) .concat(condTwo && `condition two is true`) .concat(condThree && `condition three is true`) .filter(condition => typeof condition === `string`) .join("\n");

something to consider!

DSchau · 2018-10-11T18:02:35Z

packages/gatsby-plugin-google-gtag/src/gatsby-ssr.js

+
+  const excludeGtagPaths = []
+  if (typeof pluginOptions.pluginConfig.exclude !== `undefined`) {
+    const Minimatch = require(`minimatch`).Minimatch


Maybe hoist this to the top for clarity? (even if we lose the benefit of requiring only when it's needed)

import { Minimatch } from 'minimatch'

DSchau · 2018-10-11T18:04:16Z

packages/gatsby-plugin-google-gtag/README.md

+
+If you want to call a custom event you have access to `window.gtag` where you can call an event for all products:
+
+```bash


js | javascript

DSchau · 2018-10-11T18:04:58Z

packages/gatsby-plugin-google-gtag/README.md

+If you want to call a custom event you have access to `window.gtag` where you can call an event for all products:
+
+```bash
+window.gtag('event', 'click', { ...data });


Might want to reference that this needs to be guarded against for SSR, e.g.

typeof window !== 'undefined' && window.gtag('event', 'click', {...data})

DSchau · 2018-10-11T18:08:40Z

packages/gatsby-plugin-google-gtag/README.md

+          anonymize_ip: true,
+        },
+        // This object is used for configuration specific to this plugin
+        pluginConfig: {


@pieh do we have a standard for this? i.e. plugin specific options that are separate from the service you're configuring?

AFAIK there is no convention for that, it's totally up to plugins.

In this instance I'm not sure if there is value in grouping those settings in pluginConfig object - whole options is basically pluginConfig, but I don't mind having it this way as long as it's documented.

DSchau · 2018-10-11T18:09:19Z

packages/gatsby-plugin-google-gtag/README.md

+
+## `<OutboundLink>` component
+
+To make it easy to track clicks on outbound links the plugin provides a component.


Not sure if it's worth calling this ExternalLink, instead of OutboundLink? Is Outbound a term used by gtag?

I agree with you, but it is already a gtag term https://support.google.com/analytics/answer/7478520?hl=en

DSchau · 2018-10-11T18:09:54Z

packages/gatsby-plugin-google-gtag/src/gatsby-ssr.js

@@ -0,0 +1,73 @@
+import React from 'react'


Few unit tests on this would be great!

pieh · 2018-10-11T18:18:57Z

packages/gatsby-plugin-google-gtag/package.json

+    "url": "https://github.com/gatsbyjs/gatsby/issues"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.0.0"


need to add deps used here: minimatch is at least one of those

tylerthebuildor · 2018-10-11T22:46:37Z

Thanks, @DSchau and @pieh for the feedback I really appreciate it. I'll work on fixing up this PR after work today 😄

lipis · 2018-10-11T23:06:46Z

packages/gatsby-plugin-google-gtag/.npmignore

+build/Release
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git


What about removing all the comments and sort the directories..?

This comes from package template - https://github.com/gatsbyjs/gatsby/blob/master/plop-templates/package/.npmignore.hbs it doesn't hurt to have comments here as this is mostly setup once and forget

tylerthebuildor · 2018-10-15T15:53:03Z

I think all the outstanding things have been addressed. I'm not sure what I have to do to make the 4 failing checks pass. All the local tests are passing for me.

DSchau · 2018-10-15T16:23:53Z

@tylerbuchea I think the CI tests are failing because this branch isn't up to date with (specifically) the latest CI scripts/config. If you merge upstream into this branch, the tests should pass.

pieh · 2018-10-15T16:31:41Z

packages/gatsby-plugin-google-gtag/CHANGELOG.md

+
+# 1.0.0-beta.0 (2018-06-17)
+
+**Note:** Version bump only for package gatsby-plugin-google-gtag


Where did that changelog came from?

Forgot about that, I copied it from one of the other plugins. Should I just update the date?

@tylerbuchea let's just go ahead and remove it if that's OK! lerna should handle the generation for us when we're ready to release!

Got you, yep sounds good 👍

DSchau · 2018-10-16T20:24:57Z

@tylerbuchea looks good to me. All good to merge?

tylerthebuildor · 2018-10-16T20:56:17Z

Yessir 🎉

DSchau

👍 Thanks for the PR; we appreciate it!

gatsbot · 2018-10-16T20:58:52Z

Holy buckets, @tylerbuchea — we just merged your PR to Gatsby! 💪💜

Gatsby is built by awesome people like you. Let us say “thanks” in two ways:

We’d like to send you some Gatsby swag. As a token of our appreciation, you can go to the Gatsby Swag Store and log in with your GitHub account to get a coupon code good for one free piece of swag. (Currently we’ve got a couple t-shirts available, plus some socks that are really razzing our berries right now.)
We just invited you to join the Gatsby organization on GitHub. This will add you to our team of maintainers. Accept the invite by visiting https://github.com/orgs/gatsbyjs/invitation. By joining the team, you’ll be able to label issues, review pull requests, and merge approved pull requests.

If there’s anything we can do to help, please don’t hesitate to reach out to us: tweet at @gatsbyjs and we’ll come a-runnin’.

Thanks again!

extesy · 2018-10-17T18:39:05Z

I'm trying to use this plugin and get this build error:

- The plugin "gatsby-plugin-google-gtag@1.0.0" is exporting a variable named "__esModule" which isn't an API.
error
Your plugins must export known APIs from their gatsby-ssr.js.
The following exports aren't APIs. Perhaps you made a typo or your plugin is outdated?

Does anyone else see this? This is the only plugin that produces this error and it started after I replaced the previous google-analytics plugin with it.

Add gatsby-plugin-google-gtag

85b3c52

DSchau reviewed Oct 11, 2018

View reviewed changes

pieh reviewed Oct 11, 2018

View reviewed changes

lipis reviewed Oct 11, 2018

View reviewed changes

Amend PR to add gatsby-plugin-google-gtag

2863c18

Merge branch 'master' of github.com:gatsbyjs/gatsby

7273b5f

pieh reviewed Oct 15, 2018

View reviewed changes

Remove CHANGELOG

2288332

DSchau approved these changes Oct 16, 2018

View reviewed changes

DSchau merged commit eadb0f3 into gatsbyjs:master Oct 16, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add gatsby-plugin-google-gtag #9032

Add gatsby-plugin-google-gtag #9032

tylerthebuildor commented Oct 11, 2018

DSchau left a comment

DSchau Oct 11, 2018

DSchau Oct 11, 2018

DSchau Oct 11, 2018

DSchau Oct 11, 2018

DSchau Oct 11, 2018

DSchau Oct 11, 2018

DSchau Oct 11, 2018

DSchau Oct 11, 2018

pieh Oct 11, 2018

DSchau Oct 11, 2018

tylerthebuildor Oct 13, 2018

DSchau Oct 11, 2018

pieh Oct 11, 2018

tylerthebuildor commented Oct 11, 2018

lipis Oct 11, 2018

pieh Oct 15, 2018

tylerthebuildor commented Oct 15, 2018

DSchau commented Oct 15, 2018

pieh Oct 15, 2018

tylerthebuildor Oct 15, 2018

DSchau Oct 16, 2018

tylerthebuildor Oct 16, 2018

DSchau commented Oct 16, 2018

tylerthebuildor commented Oct 16, 2018

DSchau left a comment

gatsbot bot commented Oct 16, 2018

extesy commented Oct 17, 2018

		@@ -0,0 +1,116 @@
		# gatsby-plugin-google-gtag

		Easily add Google Global Site Tag to your Gatsby site.


		If you want to call a custom event you have access to `window.gtag` where you can call an event for all products:

		```bash


		## `<OutboundLink>` component

		To make it easy to track clicks on outbound links the plugin provides a component.


		# 1.0.0-beta.0 (2018-06-17)

		Note: Version bump only for package gatsby-plugin-google-gtag

Add gatsby-plugin-google-gtag #9032

Add gatsby-plugin-google-gtag #9032

Conversation

tylerthebuildor commented Oct 11, 2018

DSchau left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tylerthebuildor commented Oct 11, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tylerthebuildor commented Oct 15, 2018

DSchau commented Oct 15, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DSchau commented Oct 16, 2018

tylerthebuildor commented Oct 16, 2018

DSchau left a comment

Choose a reason for hiding this comment

gatsbot bot commented Oct 16, 2018

extesy commented Oct 17, 2018