feat: 🎸 På sajten kan vi i alla fall köra analytics 😄

packages/site/components/Layout.js

@@ -2,6 +2,7 @@ import Head from 'next/head'
 import React from 'react'
 import { Link as ScrollLink } from 'react-scroll'
 import favImg from '../assets/img/favicon.png'
+import { GA_TRACKING_ID } from './gtag'
 
 const Layout = (props) => {
   const [scrollTop, setScrollTop] = React.useState(false)
@@ -31,6 +32,22 @@ const Layout = (props) => {
           href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700"
           rel="stylesheet"
         />
+        <script
+          async
+          src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
+        />
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+          gtag('config', '${GA_TRACKING_ID}', {
+            page_path: window.location.pathname,
+          });
+        `,
+          }}
+        />
       </Head>
       <div className="page-wrapper" id="wrapper">
         {props.children}

packages/site/components/Media.js

@@ -25,7 +25,7 @@ const Media = () => {
   return (
     <section className="border-top pt-120 pb-80">
       <Container>
-        <div class='section-title text-center'>
+        <div className="section-title text-center">
           <h1>Öppna Skolplattformen i media</h1>
         </div>
         <Row>

packages/site/components/NavLinks.js

@@ -1,6 +1,7 @@
 import NavLink from 'next/link'
 import { useRouter } from 'next/router'
 import { Link as ScrollLink } from 'react-scroll'
+import { pageview } from './gtag'
 
 const NavLinks = () => {
   const { pathname } = useRouter()
@@ -20,14 +21,15 @@ const NavLinks = () => {
         smooth={true}
         offset={-70}
         duration={500}
+        onClick={() => pageview(href)}
       >
-        <a>{children}</a>
+        {children}
       </ScrollLink>
     ) : (
-      <NavLink href={href}>
-        <a>{children}</a>
-      </NavLink>
-    )
+        <NavLink href={href}>
+          {children}
+        </NavLink>
+      )
 
   return (
     <ul className="main-nav__navigation-box">

packages/site/components/gtag.js

@@ -0,0 +1,17 @@
+export const GA_TRACKING_ID = 'G-KX6E6T6FXS'
+
+// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
+export const pageview = (url) => {
+  window.gtag('config', GA_TRACKING_ID, {
+    page_path: url.replace('#', ''),
+  })
+}
+
+// https://developers.google.com/analytics/devguides/collection/gtagjs/events
+export const event = ({ action, category, label, value }) => {
+  window.gtag('event', action, {
+    value,
+    event_category: category,
+    event_label: label,
+  })
+}

packages/site/pages/_app.js

@@ -9,9 +9,25 @@ import '../assets/css/custom.css'
 import Layout from '../components/Layout'
 import Footer from '../components/Footer'
 import Header from '../components/Header'
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+import { pageview } from '../components/gtag'
 
 // This default export is required in a new `pages/_app.js` file.
 export default function MyApp({ Component, pageProps }) {
+
+  // Google analytics
+  const router = useRouter()
+  useEffect(() => {
+    const handleRouteChange = (url) => {
+      pageview(url)
+    }
+    router.events.on('routeChangeComplete', handleRouteChange)
+    return () => {
+      router.events.off('routeChangeComplete', handleRouteChange)
+    }
+  }, [router.events])
+
   return (
     <Layout pageTitle="Skolplattformen">
       <Header />