Add OutboundLink component to gatsby-plugin-google-analytics + track links on gatsbyjs.org

.eslintrc

@@ -18,6 +18,7 @@
     }
   },
   "env": {
+    "browser": true,
     "es6": true,
     "node": true,
     "jest": true

docs/docs/seo.md

@@ -10,7 +10,7 @@ Because Gatsby pages are server-rendered, all the page content is available to G
 
 ### Speed boost
 
-Gatsby's many built-in performance optimizations, such as rendering to static files, progressive image loading, and the PRPL pattern—all help your site be lightning-fast by default. 
+Gatsby's many built-in performance optimizations, such as rendering to static files, progressive image loading, and the PRPL pattern—all help your site be lightning-fast by default.
 
 Starting in January 2018, Google [rewards faster sites with a bump in search rankings](https://searchengineland.com/google-speed-update-page-speed-will-become-ranking-factor-mobile-search-289904).
 
@@ -21,6 +21,6 @@ Add metadata to pages, such as page title and description, helps search engines
 A common way to add metadata to pages is to add [react-helmet](https://github.com/nfl/react-helmet) components (together with the [Gatsby React Helmet plugin](/packages/gatsby-plugin-react-helmet) for SSR support) to your page components.
 
 Some examples using react-helmet:
+
 * [Official GatsbyJS.org site](https://github.com/gatsbyjs/gatsby/blob/master/www/src/layouts/index.js)
 * [Jason Lengstorf's personal website](https://github.com/jlengstorf/lengstorf.com/blob/master/src/components/SEO.js)
-

packages/gatsby-plugin-google-analytics/.gitignore

@@ -1,2 +1 @@
-/gatsby-browser.js
-/gatsby-ssr.js
+/*.js

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

@@ -0,0 +1,49 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+function OutboundLink(props) {
+  return (
+    <a
+      {...props}
+      onClick={e => {
+        let redirect = true
+        if (
+          e.button !== 0 ||
+          e.altKey ||
+          e.ctrlKey ||
+          e.metaKey ||
+          e.shiftKey ||
+          e.defaultPrevented
+        ) {
+          redirect = false
+        }
+
+        if (window.ga) {
+          ga(`send`, `event`, {
+            eventCategory: `Outbound Link`,
+            eventAction: `click`,
+            eventLabel: props.href,
+            transport: `beacon`,
+            hitCallback: function() {
+              if (redirect) {
+                document.location = props.href
+              }
+            },
+          })
+        } else {
+          if (redirect) {
+            document.location = props.href
+          }
+        }
+
+        return false
+      }}
+    />
+  )
+}
+
+OutboundLink.propTypes = {
+  href: PropTypes.string,
+}
+
+export { OutboundLink }

www/src/components/discord.js

@@ -11,16 +11,20 @@ const DiscordIcon = ({ overrideCSS }) => (
     css={{ verticalAlign: `middle`, ...overrideCSS }}
   >
     <g>
-      <path d="M11.5,11.7c-0.8,0-1.4,0.7-1.4,1.6s0.6,1.6,1.4,1.6c0.8,0,1.4-0.7,1.4-1.6
+      <path
+        d="M11.5,11.7c-0.8,0-1.4,0.7-1.4,1.6s0.6,1.6,1.4,1.6c0.8,0,1.4-0.7,1.4-1.6
                 C12.9,12.4,12.3,11.7,11.5,11.7L11.5,11.7z M16.6,11.7c-0.8,0-1.4,0.7-1.4,1.6s0.6,1.6,1.4,1.6c0.8,0,1.4-0.7,1.4-1.6
-                S17.4,11.7,16.6,11.7L16.6,11.7z" />
-      <path d="M23.4,0H4.6C3,0,1.8,1.3,1.8,2.9v18.9c0,1.6,1.3,2.9,2.9,2.9h15.9l-0.7-2.6l1.8,1.7l1.7,1.6
+                S17.4,11.7,16.6,11.7L16.6,11.7z"
+      />
+      <path
+        d="M23.4,0H4.6C3,0,1.8,1.3,1.8,2.9v18.9c0,1.6,1.3,2.9,2.9,2.9h15.9l-0.7-2.6l1.8,1.7l1.7,1.6
                 l3,2.7V2.9C26.2,1.3,25,0,23.4,0L23.4,0z M18,18.3c0,0-0.5-0.6-0.9-1.1c1.8-0.5,2.5-1.7,2.5-1.7c-0.6,0.4-1.1,0.6-1.6,0.8
                 c-0.7,0.3-1.4,0.5-2,0.6c-1.3,0.3-2.6,0.2-3.6,0c-0.8-0.2-1.5-0.4-2.1-0.6c-0.3-0.1-0.7-0.3-1-0.5c0,0-0.1,0-0.1-0.1c0,0,0,0-0.1,0
                 c-0.3-0.1-0.4-0.2-0.4-0.2s0.7,1.1,2.4,1.7c-0.4,0.5-0.9,1.2-0.9,1.2c-3.1-0.1-4.3-2.1-4.3-2.1c0-4.5,2-8.2,2-8.2
                 c2-1.5,3.9-1.5,3.9-1.5L12,6.7C9.5,7.4,8.3,8.5,8.3,8.5s0.3-0.2,0.8-0.4c1.5-0.7,2.7-0.8,3.2-0.9c0.1,0,0.2,0,0.2,0
                 c0.9-0.1,1.8-0.1,2.8,0c1.3,0.2,2.8,0.5,4.2,1.3c0,0-1.1-1.1-3.5-1.8l0.2-0.2c0,0,1.9,0,3.9,1.5c0,0,2,3.7,2,8.2
-                C22.3,16.2,21.1,18.2,18,18.3L18,18.3z" />
+                C22.3,16.2,21.1,18.2,18,18.3L18,18.3z"
+      />
     </g>
   </svg>
 )

www/src/components/navigation.js

@@ -1,9 +1,11 @@
 import React from "react"
 import Link from "gatsby-link"
 import TwitterIcon from "react-icons/lib/fa/twitter"
-import DiscordIcon from "../components/discord"
 import GithubIcon from "react-icons/lib/go/mark-github"
+import { OutboundLink } from "gatsby-plugin-google-analytics"
+
 import SearchForm from "../components/search-form"
+import DiscordIcon from "../components/discord"
 import logo from "../logo.svg"
 import typography, { rhythm, scale } from "../utils/typography"
 import presets, { colors } from "../utils/presets"
@@ -167,7 +169,7 @@ export default ({ pathname }) => {
             iconStyles={{ ...socialIconsStyles }}
             isHomepage={isHomepage}
           />
-          <a
+          <OutboundLink
             href="https://github.com/gatsbyjs/gatsby"
             title="GitHub"
             css={{
@@ -176,7 +178,7 @@ export default ({ pathname }) => {
             }}
           >
             <GithubIcon style={{ verticalAlign: `text-top` }} />
-          </a>
+          </OutboundLink>
 
           <div
             css={{
@@ -185,7 +187,7 @@ export default ({ pathname }) => {
               [presets.Hd]: { display: `inline-block` },
             }}
           >
-            <a
+            <OutboundLink
               href="https://discord.gg/0ZcbPKXt5bVoxkfV"
               title="Discord"
               css={{
@@ -194,8 +196,8 @@ export default ({ pathname }) => {
               }}
             >
               <DiscordIcon overrideCSS={{ verticalAlign: `text-top` }} />
-            </a>
-            <a
+            </OutboundLink>
+            <OutboundLink
               href="https://twitter.com/gatsbyjs"
               title="@gatsbyjs"
               css={{
@@ -205,7 +207,7 @@ export default ({ pathname }) => {
               }}
             >
               <TwitterIcon style={{ verticalAlign: `text-top` }} />
-            </a>
+            </OutboundLink>
           </div>
         </div>
       </div>

www/src/pages/index.js

@@ -1,5 +1,6 @@
 import React from "react"
 import Link from "gatsby-link"
+import { OutboundLink } from "gatsby-plugin-google-analytics"
 
 import presets, { colors } from "../utils/presets"
 import { rhythm, scale, options } from "../utils/typography"
@@ -82,9 +83,11 @@ class IndexRoute extends React.Component {
                 <FuturaParagraph>
                   Don't build a website with last decade's tech. The future of
                   the web is mobile, JavaScript and APIs—the {` `}
-                  <a href="https://jamstack.org/">JAMstack</a>. Every website is
-                  a web app and every web app is a website. Gatsby.js is the
-                  universal JavaScript framework you’ve been waiting for.
+                  <OutboundLink href="https://jamstack.org/">
+                    JAMstack
+                  </OutboundLink>. Every website is a web app and every web app
+                  is a website. Gatsby.js is the universal JavaScript framework
+                  you’ve been waiting for.
                 </FuturaParagraph>
               </Card>
               <Card>

www/src/templates/template-blog-post.js

@@ -4,6 +4,7 @@ import Link from "gatsby-link"
 import ArrowForwardIcon from "react-icons/lib/md/arrow-forward"
 import ArrowBackIcon from "react-icons/lib/md/arrow-back"
 import Img from "gatsby-image"
+import { OutboundLink } from "gatsby-plugin-google-analytics"
 
 import presets, { colors } from "../utils/presets"
 import typography, { rhythm, scale, options } from "../utils/typography"
@@ -160,9 +161,9 @@ class BlogPostTemplate extends React.Component {
                   <span>
                     {` `}
                     (originally published at{` `}
-                    <a href={post.frontmatter.canonicalLink}>
+                    <OutboundLink href={post.frontmatter.canonicalLink}>
                       {post.frontmatter.publishedAt}
-                    </a>)
+                    </OutboundLink>)
                   </span>
                 )}
               </BioLine>
@@ -190,9 +191,9 @@ class BlogPostTemplate extends React.Component {
                   post.frontmatter.imageAuthorLink && (
                     <em>
                       Image by{` `}
-                      <a href={post.frontmatter.imageAuthorLink}>
+                      <OutboundLink href={post.frontmatter.imageAuthorLink}>
                         {post.frontmatter.imageAuthor}
-                      </a>
+                      </OutboundLink>
                     </em>
                   )}
               </div>

www/src/templates/template-contributor-page.js

@@ -1,10 +1,10 @@
 import React from "react"
 import Img from "gatsby-image"
+import { OutboundLink } from "gatsby-plugin-google-analytics"
 
 import Container from "../components/container"
 import BlogPostPreviewItem from "../components/blog-post-preview-item"
-import typography, { rhythm, scale, options } from "../utils/typography"
-import presets from "../utils/presets"
+import typography, { rhythm, options } from "../utils/typography"
 
 class ContributorPageTemplate extends React.Component {
   render() {
@@ -46,9 +46,10 @@ class ContributorPageTemplate extends React.Component {
             >
               {contributor.bio}
             </p>
-            <a href={`https://twitter.com/${contributor.twitter}`}>
+            <OutboundLink href={`https://twitter.com/${contributor.twitter}`}>
+              {` `}
               {contributor.twitter}
-            </a>
+            </OutboundLink>
           </div>
         </div>
         <div