Merge pull request #161 from dassiorleando/feat/googleAnalytics

Allowed Google Analytics tracking

Author: styxlab

README.md

@@ -93,6 +93,7 @@ Play with the [Demo](https://next.jamify.org/) to get a first impression.
   <li>Syntax highlighting with PrismJS</li>
   <li>Table Of Contents</li>
   <li>Contact Page with built-in notification service</li>
+  <li>Google Analytics</li> 
 </ul>
 </details>
 <details>

appConfig.ts

@@ -6,6 +6,9 @@
 // Cache control
 export const fileCache: boolean = true
 
+// Google analytics tracking ID (now called measurement ID in version 4)
+export const gaMeasurementId: string = 'UA-XXXXXXX_or_G-XXXXXXX'
+
 // Dark mode
 export type DarkMode = 'dark' | 'light' | null
 export const defaultMode: DarkMode = 'light'

lib/gtag.ts

@@ -0,0 +1,44 @@
+/**
+ * GA integration
+ * https://github.com/vercel/next.js/tree/canary/examples/with-google-analytics
+ */
+import { processEnv } from '@lib/processEnv'
+
+export const GA_TRACKING_ID = processEnv.gaMeasurementId
+
+/**
+ * Custom event type for Google Analytics.
+ * The action field is required.
+ */
+export interface EventType {
+  action: string,
+  category?: string,
+  label?: string,
+  value?: string
+}
+
+/**
+ * Triggers a GA page view event.
+ * @link https://developers.google.com/analytics/devguides/collection/gtagjs/pages
+ * 
+ * @param {string} url The URL to save the page view event with.
+ */
+export const pageview = (url: string): void => {
+  (window as any).gtag('config', GA_TRACKING_ID, {
+    page_path: url,
+  })
+}
+
+/**
+ * Pushes a custom GA event.
+ * @link https://developers.google.com/analytics/devguides/collection/gtagjs/events
+ * 
+ * @param {EventType} parameters The event parameters.
+ */
+export const event = ({ action, category, label, value }: EventType): void => {
+  (window as any).gtag('event', action, {
+    event_category: category,
+    event_label: label,
+    value: value,
+  })
+}

lib/processEnv.ts

@@ -35,6 +35,7 @@ function reolveJSON<T>(value: string | undefined, defaultValue: T) {
 export interface ProcessEnvProps {
   siteUrl: string
   platform: string
+  gaMeasurementId: string
   darkMode: {
     defaultMode: appConfig.DarkMode
     overrideOS: boolean
@@ -73,6 +74,7 @@ export interface ProcessEnvProps {
 export const processEnv: ProcessEnvProps = {
   siteUrl,
   platform,
+  gaMeasurementId: process.env.JAMIFY_GA_MEASUREMENT_ID || appConfig.gaMeasurementId,
   darkMode: {
     defaultMode: resolveDarkMode(process.env.JAMIFY_DARK_MODE_DEFAULT, appConfig.defaultMode),
     overrideOS: resolveBool(process.env.JAMIFY_DARK_MODE_OVERRIDE_OS, appConfig.overrideOS),

pages/_app.tsx

@@ -1,7 +1,11 @@
+import { useEffect } from 'react'
+import Script from 'next/script'
 import { AppProps } from 'next/app'
+import { useRouter } from 'next/router'
 import { OverlayProvider } from '@components/contexts/overlayProvider'
 import { ThemeProvider } from '@components/contexts/themeProvider'
 import { processEnv } from '@lib/processEnv'
+import * as gtag from '../lib/gtag'
 
 import '@styles/screen.css'
 import '@styles/screen-fixings.css'
@@ -10,9 +14,41 @@ import '@styles/prism.css'
 import '@styles/toc.css'
 
 function App({ Component, pageProps }: AppProps) {
+  const router = useRouter()
+
+  useEffect(() => {
+    const handleRouteChange = (url: string) => {
+      gtag.pageview(url)
+    }
+    router.events.on('routeChangeComplete', handleRouteChange)
+    return () => {
+      router.events.off('routeChangeComplete', handleRouteChange)
+    }
+  }, [router.events])
+
   return (
     <ThemeProvider {...processEnv.darkMode} >
       <OverlayProvider >
+          {/* Global site tag (gtag.js) - Google Analytics */}
+          <Script
+            strategy="afterInteractive"
+            src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}
+          />
+          <Script
+            id="gtag-init"
+            strategy="afterInteractive"
+            dangerouslySetInnerHTML={{
+              __html: `
+                window.dataLayer = window.dataLayer || [];
+                function gtag(){dataLayer.push(arguments);}
+                gtag('js', new Date());
+
+                gtag('config', '${gtag.GA_TRACKING_ID}', {
+                  page_path: window.location.pathname,
+                });
+              `,
+            }}
+          />
         <Component {...pageProps} />
       </OverlayProvider>
     </ThemeProvider>