chore(docs): google plugin analytics - upgrade to gtag, fix code (#28918

)

Co-authored-by: LekoArts <[email protected]>

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,15 +188,17 @@ 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
       }}
     >
       Tap that!
     </button>
   </div>
-}
+)
+
+export default Component
 ```
 
 ### All Fields Options