Add Google Analytics

site/gatsby-config.js

@@ -6,5 +6,14 @@
 
 module.exports = {
   /* Your site config here */
-  plugins: ['gatsby-plugin-react-helmet']
+  plugins: [
+    'gatsby-plugin-react-helmet',
+    {
+      resolve: 'gatsby-plugin-gtag',
+      options: {
+        trackingId: 'UA-80557105-9',
+        head: false
+      }
+    }
+  ]
 };

site/package-lock.json

@@ -6526,6 +6526,11 @@
         "micromatch": "^3.1.10"
       }
     },
+    "gatsby-plugin-gtag": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-gtag/-/gatsby-plugin-gtag-1.0.13.tgz",
+      "integrity": "sha512-Oul6O67klajrEjkkF1diD228SmyUWsAwTq/1tYq41vBwmyNiPk4dhk8K93rrNQ5d5zesSv+awBeGBa503tQqGw=="
+    },
     "gatsby-plugin-page-creator": {
       "version": "2.3.12",
       "resolved": "https://registry.npmjs.org/gatsby-plugin-page-creator/-/gatsby-plugin-page-creator-2.3.12.tgz",

site/package.json

@@ -20,6 +20,7 @@
     "@fortawesome/react-fontawesome": "^0.1.11",
     "escape-html": "^1.0.3",
     "gatsby": "^2.23.12",
+    "gatsby-plugin-gtag": "^1.0.13",
     "gatsby-plugin-react-helmet": "^3.3.10",
     "prismjs": "^1.20.0",
     "react": "^16.12.0",

site/src/components/Header.js

@@ -5,6 +5,8 @@ import { Link } from 'gatsby';
 import { faGithub } from '@fortawesome/free-brands-svg-icons';
 import { faBook } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { OutboundLink } from 'gatsby-plugin-gtag';
+
 
 import logo from '../images/header.png';
 
@@ -18,17 +20,17 @@ export default function Header() {
       </div>
       <h2>Vanilla JavaScript Emoji Picker</h2>
       <div className={styles.badges}>
-        <a href="https://github.com/joeattardi/emoji-button">
+        <OutboundLink href="https://github.com/joeattardi/emoji-button">
           <img src="https://img.shields.io/github/stars/joeattardi/emoji-button?style=for-the-badge" />
-        </a>
-        <a href="https://www.npmjs.com/package/@joeattardi/emoji-button">
+        </OutboundLink>
+        <OutboundLink href="https://www.npmjs.com/package/@joeattardi/emoji-button">
           <img src="https://img.shields.io/npm/v/@joeattardi/emoji-button?style=for-the-badge" />
-        </a>
+        </OutboundLink>
       </div>
       <div className={styles.buttons}>
-        <a href="https://github.com/joeattardi/emoji-button">
+        <OutboundLink href="https://github.com/joeattardi/emoji-button">
           <FontAwesomeIcon icon={faGithub} /> GitHub Repository
-        </a>
+        </OutboundLink>
         <Link to="/docs">
           <FontAwesomeIcon icon={faBook} /> Documentation
         </Link>