From c3624631894772f9583998e61bebde0a1f012ef0 Mon Sep 17 00:00:00 2001
From: Muescha <184316+muescha@users.noreply.github.com>
Date: Fri, 8 Jan 2021 09:41:40 +0100
Subject: [PATCH] chore(docs): google plugin analytics - upgrade to gtag, fix
 code (#28918)

Co-authored-by: LekoArts <lekoarts@gmail.com>
---
 .../gatsby-plugin-google-analytics/README.md  | 22 +++++++++++++------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/packages/gatsby-plugin-google-analytics/README.md b/packages/gatsby-plugin-google-analytics/README.md
index fb2f832e66ed6..6c2d36ea8ea45 100644
--- a/packages/gatsby-plugin-google-analytics/README.md
+++ b/packages/gatsby-plugin-google-analytics/README.md
@@ -2,6 +2,10 @@
 
 Easily add Google Analytics to your Gatsby site.
 
+## Upgrade note
+
+This plugin uses Google's `analytics.js` file under the hood. Google has a [guide recommending users upgrade to `gtag.js` instead](https://developers.google.com/analytics/devguides/collection/upgrade/analyticsjs). There is another plugin [`gatsby-plugin-gtag`](https://gatsbyjs.com/plugins/gatsby-plugin-google-gtag/) which uses `gtag.js`.
+
 ## Install
 
 `npm install gatsby-plugin-google-analytics`
@@ -60,13 +64,15 @@ To use it, simply import it and use it like you would the `<a>` element e.g.
 import React from "react"
 import { OutboundLink } from "gatsby-plugin-google-analytics"
 
-export default () => (
+const Component = () => (
   <div>
-    <OutboundLink href="https://www.gatsbyjs.org/packages/gatsby-plugin-google-analytics/">
+    <OutboundLink href="https://www.gatsbyjs.com/plugins/gatsby-plugin-google-analytics/">
       Visit the Google Analytics plugin page!
     </OutboundLink>
   </div>
 )
+
+export default Component
 ```
 
 ## Options
@@ -164,10 +170,10 @@ To allow custom events to be tracked, the plugin exposes a function to include i
 To use it, import the package and call the event within your components and business logic.
 
 ```jsx
-import React
-import { trackCustomEvent } from 'gatsby-plugin-google-analytics'
+import React from "react"
+import { trackCustomEvent } from "gatsby-plugin-google-analytics"
 
-export default () => {
+const Component = () => (
   <div>
     <button
       onClick={e => {
@@ -182,7 +188,7 @@ export default () => {
           // string - optional - Useful for categorizing events (e.g. 'Spring Campaign')
           label: "Gatsby Plugin Example Campaign",
           // number - optional - Numeric value associated with the event. (e.g. A product ID)
-          value: 43
+          value: 43,
         })
         //... Other logic here
       }}
@@ -190,7 +196,9 @@ export default () => {
       Tap that!
     </button>
   </div>
-}
+)
+
+export default Component
 ```
 
 ### All Fields Options