Extend gtag <OutboundLink> component to accept custom Event Action, Category, Label and Value

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

@@ -94,6 +94,8 @@ export default () => (
 )
 ```
 
+If you want to provide custom Event Category, Event Action, Event Label or Event Value you can do that by using the corresponding `<OutboundLink>` props - `eventCategory`, `eventAction`, `eventLabel`, `eventValue`.
+
 ## The "gtagConfig.anonymize_ip" option
 
 Some countries (such as Germany) require you to use the

packages/gatsby-plugin-google-gtag/src/__tests__/__snapshots__/index.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<OutboundLink /> matches basic snapshot 1`] = `
+<div>
+  <a>
+    link
+  </a>
+</div>
+`;

packages/gatsby-plugin-google-gtag/src/__tests__/index.js

@@ -0,0 +1,62 @@
+import React from "react"
+import { cleanup, fireEvent, render } from "@testing-library/react"
+import { OutboundLink } from "../"
+
+describe(`<OutboundLink />`, () => {
+  afterEach(() => {
+    cleanup()
+    jest.resetAllMocks()
+  })
+
+  const setup = props => {
+    const utils = render(<OutboundLink {...props}>link</OutboundLink>)
+
+    return Object.assign({}, utils, {
+      link: utils.getByText(`link`),
+    })
+  }
+
+  it(`matches basic snapshot`, () => {
+    const { container } = setup()
+
+    expect(container).toMatchSnapshot()
+  })
+
+  describe(`tracking`, () => {
+    beforeEach(() => {
+      window.gtag = jest.fn()
+    })
+    it(`sends tracking event when clicked`, () => {
+      const { link } = setup()
+
+      fireEvent.click(link)
+
+      expect(window.gtag).toHaveBeenCalledTimes(1)
+    })
+    it(`sends custom tracking event when clicked`, () => {
+      const eventCategory = `eventcategory`
+      const eventAction = `eventaction`
+      const eventLabel = `eventlabel`
+      const eventValue = 55
+      const { link } = setup({
+        eventCategory,
+        eventAction,
+        eventLabel,
+        eventValue,
+      })
+
+      fireEvent.click(link)
+
+      expect(window.gtag).toHaveBeenCalledTimes(1)
+      expect(window.gtag).toHaveBeenCalledWith(
+        `event`,
+        eventAction,
+        expect.objectContaining({
+          event_category: eventCategory,
+          event_label: eventLabel,
+          event_value: eventValue,
+        })
+      )
+    })
+  })
+})

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

@@ -1,53 +1,63 @@
 import React from "react"
 import PropTypes from "prop-types"
 
-const OutboundLink = React.forwardRef(({ children, ...props }, ref) => (
-  <a
-    ref={ref}
-    {...props}
-    onClick={e => {
-      if (typeof props.onClick === `function`) {
-        props.onClick(e)
-      }
-      let redirect = true
-      if (
-        e.button !== 0 ||
-        e.altKey ||
-        e.ctrlKey ||
-        e.metaKey ||
-        e.shiftKey ||
-        e.defaultPrevented
-      ) {
-        redirect = false
-      }
-      if (props.target && props.target.toLowerCase() !== `_self`) {
-        redirect = false
-      }
-      if (window.gtag) {
-        window.gtag(`event`, `click`, {
-          event_category: `outbound`,
-          event_label: props.href,
-          transport_type: redirect ? `beacon` : ``,
-          event_callback: function () {
-            if (redirect) {
-              document.location = props.href
-            }
-          },
-        })
-      } else {
-        if (redirect) {
-          document.location = props.href
+const OutboundLink = React.forwardRef(
+  (
+    { children, eventCategory, eventAction, eventLabel, eventValue, ...rest },
+    ref
+  ) => (
+    <a
+      ref={ref}
+      {...rest}
+      onClick={e => {
+        if (typeof rest.onClick === `function`) {
+          rest.onClick(e)
+        }
+        let redirect = true
+        if (
+          e.button !== 0 ||
+          e.altKey ||
+          e.ctrlKey ||
+          e.metaKey ||
+          e.shiftKey ||
+          e.defaultPrevented
+        ) {
+          redirect = false
+        }
+        if (rest.target && rest.target.toLowerCase() !== `_self`) {
+          redirect = false
+        }
+        if (window.gtag) {
+          window.gtag(`event`, eventAction || `click`, {
+            event_category: eventCategory || `outbound`,
+            event_label: eventLabel || rest.href,
+            event_value: eventValue,
+            transport_type: redirect ? `beacon` : ``,
+            event_callback: function () {
+              if (redirect) {
+                document.location = rest.href
+              }
+            },
+          })
+        } else {
+          if (redirect) {
+            document.location = rest.href
+          }
         }
-      }
 
-      return false
-    }}
-  >
-    {children}
-  </a>
-))
+        return false
+      }}
+    >
+      {children}
+    </a>
+  )
+)
 
 OutboundLink.propTypes = {
+  eventAction: PropTypes.string,
+  eventCategory: PropTypes.string,
+  eventLabel: PropTypes.string,
+  eventValue: PropTypes.number,
   href: PropTypes.string,
   target: PropTypes.string,
   onClick: PropTypes.func,