feat: add google analytics

Author: Cezar Sampaio

gatsby-browser.js

@@ -1,2 +1,9 @@
 import 'normalize.css';
 import './src/global.css';
+
+export const onRouteUpdate = () => {
+  // For Google Analytics page views
+  if (window.ga) {
+    window.ga('send', 'pageview');
+  }
+};

src/pages/index.js

@@ -67,11 +67,12 @@ export default function Home(props) {
         </SearchContainer>
 
         <WhiteContainer>
-          {categories.map((category) => (
+          {categories.map((category, index) => (
             <CategoryCard
               title={category.name}
               url={`/${category.slug}/`}
               description={category.description.description}
+              key={index}
             />
           ))}
         </WhiteContainer>

src/templates/layout.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
+import { Helmet } from 'react-helmet';
 import Header from '../components/header';
 import Footer from '../components/footer';
 import Wrap from '../components/wrap';
@@ -53,6 +54,25 @@ export default function Layout(props) {
         logoUrl={settings.logo.fixed.src}
         logoDescription={settings.logo.title}
       />
+
+      <Helmet>
+        {settings.googleAnalyticsId && (
+          <script>
+            {`
+              window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
+              
+              ga('create', '${settings.googleAnalyticsId}', 'auto');
+              ga('send', 'pageview');
+          `}
+          </script>
+        )}
+        {settings.googleAnalyticsId && (
+          <script
+            async
+            src="https://www.google-analytics.com/analytics.js"
+          ></script>
+        )}
+      </Helmet>
     </>
   );
 }