Fix link errors + handle other types of clicks

Author: KyleAMathews

.eslintrc

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

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

@@ -1,18 +1,46 @@
 import React from "react"
+import PropTypes from "prop-types"
 
-export function OutBoundLink(props) {
+function OutboundLink(props) {
   return (
     <a
       {...props}
       onClick={e => {
-        ga("send", "event", "outbound", "click", props.href, {
-          transport: "beacon",
-          hitCallback: function() {
+        let redirect = true
+        if (
+          e.button !== 0 ||
+          e.altKey ||
+          e.ctrlKey ||
+          e.metaKey ||
+          e.shiftKey ||
+          e.defaultPrevented
+        ) {
+          redirect = false
+        }
+
+        if (window.ga) {
+          window.ga(`send`, `event`, `outbound`, `click`, 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/navigation.js

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

www/src/pages/index.js

@@ -1,6 +1,6 @@
 import React from "react"
 import Link from "gatsby-link"
-import { OutBoundLink } from "gatsby-plugin-google-analytics"
+import { OutboundLink } from "gatsby-plugin-google-analytics"
 
 import presets, { colors } from "../utils/presets"
 import { rhythm, scale, options } from "../utils/typography"
@@ -83,9 +83,9 @@ 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 {` `}
-                  <OutBoundLink href="https://jamstack.org/">
+                  <OutboundLink href="https://jamstack.org/">
                     JAMstack
-                  </OutBoundLink>. Every website is a web app and every web app
+                  </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>

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

@@ -4,7 +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 { OutboundLink } from "gatsby-plugin-google-analytics"
 
 import presets, { colors } from "../utils/presets"
 import typography, { rhythm, scale, options } from "../utils/typography"
@@ -161,9 +161,9 @@ class BlogPostTemplate extends React.Component {
                   <span>
                     {` `}
                     (originally published at{` `}
-                    <OutBoundLink href={post.frontmatter.canonicalLink}>
+                    <OutboundLink href={post.frontmatter.canonicalLink}>
                       {post.frontmatter.publishedAt}
-                    </OutBoundLink>)
+                    </OutboundLink>)
                   </span>
                 )}
               </BioLine>
@@ -191,9 +191,9 @@ class BlogPostTemplate extends React.Component {
                   post.frontmatter.imageAuthorLink && (
                     <em>
                       Image by{` `}
-                      <OutBoundLink href={post.frontmatter.imageAuthorLink}>
+                      <OutboundLink href={post.frontmatter.imageAuthorLink}>
                         {post.frontmatter.imageAuthor}
-                      </OutBoundLink>
+                      </OutboundLink>
                     </em>
                   )}
               </div>

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

@@ -1,6 +1,6 @@
 import React from "react"
 import Img from "gatsby-image"
-import { OutBoundLink } from "gatsby-plugin-google-analytics"
+import { OutboundLink } from "gatsby-plugin-google-analytics"
 
 import Container from "../components/container"
 import BlogPostPreviewItem from "../components/blog-post-preview-item"
@@ -46,10 +46,10 @@ class ContributorPageTemplate extends React.Component {
             >
               {contributor.bio}
             </p>
-            <OutBoundLink href={`https://twitter.com/${contributor.twitter}`}>
+            <OutboundLink href={`https://twitter.com/${contributor.twitter}`}>
               {` `}
               {contributor.twitter}
-            </OutBoundLink>
+            </OutboundLink>
           </div>
         </div>
         <div