Unify Google Analytics

.github/workflows/charterafrica-deploy-prod.yml

@@ -82,7 +82,6 @@ jobs:
           build-args: |
             MONGO_URL=${{ secrets.CHARTERAFRICA_MONGO_URL }}
             NEXT_PUBLIC_APP_URL=${{ env.NEXT_PUBLIC_APP_URL }}
-            NEXT_PUBLIC_GA_MEASUREMENT_ID=${{ secrets.CHARTERAFRICA_GA_MEASUREMENT_ID }}
             NEXT_PUBLIC_SENTRY_DSN=${{ secrets.CHARTERAFRICA_SENTRY_DSN }}
             NEXT_PUBLIC_SEO_DISABLED=${{ env.NEXT_PUBLIC_SEO_DISABLED }}
             PAYLOAD_SECRET_KEY=${{ secrets.CHARTERAFRICA_PAYLOAD_SECRET_KEY }}

Dockerfile

@@ -99,7 +99,7 @@ ARG NEXT_TELEMETRY_DISABLED \
   NEXT_PUBLIC_APP_URL \
   NEXT_PUBLIC_SENTRY_DSN \
   NEXT_PUBLIC_SEO_DISABLED \
-  NEXT_PUBLIC_GOOGLE_ANALYTICS \
+  NEXT_PUBLIC_GOOGLE_ANALYTICS_ID \
   PORT \
   SENTRY_ENVIRONMENT
 
@@ -298,13 +298,6 @@ ARG NEXT_PUBLIC_APP_LOGO_URL \
   PAYLOAD_CONFIG_PATH="dist/payload.config.js" \
   PAYLOAD_PUBLIC_APP_URL
 
-# TODO(koech): Standadise naming of GA MEASUREMENT ID. Our options:
-#              - GA_MEASUREMENT_ID (charterafrica)
-#              - GOOGLE_ANALYTICS_ID (pesayetu, vpnmanager)
-#              This is only needed at runtime
-# TODO(koech): Completely remove the use of ENV vars for Google Analytics
-#              for those app that have CMS. Measurement id should be set
-#              in the Settings part of a site.
 ENV NEXT_PUBLIC_APP_LOGO_URL=${NEXT_PUBLIC_APP_LOGO_URL} \
   PAYLOAD_PUBLIC_APP_URL=${PAYLOAD_PUBLIC_APP_URL} \
   PAYLOAD_CONFIG_PATH=${PAYLOAD_CONFIG_PATH}
@@ -379,7 +372,6 @@ ARG NEXT_TELEMETRY_DISABLED \
   NEXT_PUBLIC_SEO_DISABLED \
   NEXT_PUBLIC_IMAGE_DOMAINS="cms.dev.codeforafrica.org,hurumap-v2.s3.amazonaws.com" \
   NEXT_PUBLIC_IMAGE_SCALE_FACTOR=2 \
-  NEXT_PUBLIC_GOOGLE_ANALYTICS \
   # Payload (runtime)
   MONGO_URL \
   PAYLOAD_SECRET \
@@ -599,7 +591,6 @@ ARG NEXT_TELEMETRY_DISABLED \
   NEXT_PUBLIC_IMAGE_SCALE_FACTOR=2 \
   NEXT_PUBLIC_OPENAFRICA_DOMAINS="open.africa,openafrica.net,africaopendata.org" \
   NEXT_PUBLIC_SOURCEAFRICA_DOMAINS="dc.sourceafrica.net" \
-  NEXT_PUBLIC_GOOGLE_ANALYTICS \
   # Sentry (build time)
   SENTRY_AUTH_TOKEN \
   SENTRY_ENVIRONMENT \
@@ -791,7 +782,6 @@ ARG NEXT_TELEMETRY_DISABLED \
   NEXT_PUBLIC_APP_URL \
   NEXT_PUBLIC_SENTRY_DSN \
   NEXT_PUBLIC_SEO_DISABLED \
-  NEXT_PUBLIC_GOOGLE_ANALYTICS \
   # Sentry (build time)
   SENTRY_AUTH_TOKEN \
   SENTRY_ENVIRONMENT \
@@ -866,7 +856,6 @@ ARG NEXT_TELEMETRY_DISABLED \
   NEXT_PUBLIC_APP_URL \
   NEXT_PUBLIC_SENTRY_DSN \
   NEXT_PUBLIC_SEO_DISABLED \
-  NEXT_PUBLIC_GOOGLE_ANALYTICS \
   # Sentry (build time)
   SENTRY_AUTH_TOKEN \
   SENTRY_ENVIRONMENT \

apps/charterafrica/.env

@@ -6,3 +6,4 @@ PAYLOAD_PUBLIC_LOCALES="en, fr, pt"
 SENTRY_ENVIRONMENT=local
 SENTRY_ORG=code-for-africa
 SENTRY_PROJECT=charterafrica
+NEXT_PUBLIC_GOOGLE_ANALYTICS_ID="G-5ZPEFLT0NJ"

apps/charterafrica/package.json

@@ -47,6 +47,7 @@
     "@mui/material": "catalog:",
     "@mui/utils": "catalog:",
     "@next/env": "catalog:",
+    "@next/third-parties": "catalog:",
     "@nivo/core": "catalog:",
     "@nivo/pie": "catalog:",
     "@nivo/tooltip": "catalog:",

apps/charterafrica/src/lib/data/common/index.js

@@ -180,6 +180,9 @@ export async function getPageProps(api, context) {
     { defaultLocale, locale },
     api,
   );
+
+  const { analytics } = settings;
+
   const seo = getPageSeoFromMeta(processedPage, settings, {
     defaultLocale,
     locale,
@@ -189,6 +192,7 @@ export async function getPageProps(api, context) {
   return {
     ...globalProps,
     ...processedPage,
+    analytics,
     seo,
   };
 }

apps/charterafrica/src/pages/_app.page.js

@@ -1,15 +1,13 @@
 import { CacheProvider } from "@emotion/react";
 import { ThemeProvider, CssBaseline } from "@mui/material";
 import { deepmerge } from "@mui/utils";
+import { GoogleAnalytics } from "@next/third-parties/google";
 import App from "next/app";
-import { useRouter } from "next/router";
-import Script from "next/script";
 import { DefaultSeo } from "next-seo";
 import PropTypes from "prop-types";
-import React, { useEffect } from "react";
+import React from "react";
 
 import Layout from "@/charterafrica/components/Layout";
-import * as gtag from "@/charterafrica/lib/gtag";
 import SEO from "@/charterafrica/next-seo.config";
 import "@/charterafrica/theme/fonts.css";
 import theme from "@/charterafrica/theme";
@@ -22,50 +20,21 @@ function getDefaultLayout(page, pageProps) {
 }
 
 function MyApp(props) {
-  const router = useRouter();
   const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
+  const { analytics } = pageProps;
+  const { analyticsId: gaId } = analytics || {};
   const getLayout = Component.getLayout || getDefaultLayout;
-  useEffect(() => {
-    const handleRouteChange = (url) => {
-      gtag.pageview(url);
-    };
-    router.events.on("routeChangeComplete", handleRouteChange);
-    router.events.on("hashChangeComplete", handleRouteChange);
-
-    return () => {
-      router.events.off("routeChangeComplete", handleRouteChange);
-      router.events.off("hashChangeComplete", handleRouteChange);
-    };
-  }, [router.events]);
 
   return (
     <>
-      <Script
-        strategy="afterInteractive"
-        src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_MEASUREMENT_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_MEASUREMENT_ID}', {
-              page_path: window.location.pathname,
-            });
-          `,
-        }}
-      />
       <DefaultSeo {...SEO} />
       <CacheProvider value={emotionCache}>
         <ThemeProvider theme={theme}>
           <CssBaseline />
           {getLayout(<Component {...pageProps} />, pageProps)}
         </ThemeProvider>
       </CacheProvider>
+      <GoogleAnalytics gaId={gaId} />
     </>
   );
 }

apps/charterafrica/src/pages/_document.page.js

@@ -2,7 +2,6 @@ import createEmotionServer from "@emotion/server/create-instance";
 import Document, { Head, Html, Main, NextScript } from "next/document";
 import React from "react";
 
-import * as gtag from "@/charterafrica/lib/gtag";
 import createEmotionCache from "@/charterafrica/utils/createEmotionCache";
 
 export default class MyDocument extends Document {
@@ -55,18 +54,6 @@ export default class MyDocument extends Document {
           <meta name="theme-color" content="#ffffff" />
           <meta name="emotion-insertion-point" content="" />
           {this.props.emotionStyleTags}
-          {gtag.isSet ? (
-            <script
-              // eslint-disable-next-line react/no-danger
-              dangerouslySetInnerHTML={{
-                __html: `
-            window.dataLayer = window.dataLayer || [];
-            function gtag(){dataLayer.push(arguments);}
-            gtag('js', new Date());
-          `,
-              }}
-            />
-          ) : null}
         </Head>
         <body>
           <Main />

apps/charterafrica/src/payload/globals/Settings.js

@@ -108,6 +108,29 @@ const Settings = {
         initCollapsed: true,
       },
     },
+    {
+      name: "analytics",
+      type: "group",
+      label: "Site Analytics",
+      localized: true,
+      fields: [
+        {
+          type: "collapsible",
+          label: "Google Analytics",
+          fields: [
+            {
+              name: "analyticsId",
+              type: "text",
+              defaultValue: "G-5ZPEFLT0NJ", // From .env
+            },
+          ],
+          admin: {
+            description:
+              "Measurement ID: https://support.google.com/analytics/answer/12270356",
+          },
+        },
+      ],
+    },
   ],
 };
 

apps/charterafrica/turbo.json

@@ -14,7 +14,7 @@
         "NEXT_MANUAL_SIG_HANDLE",
         "NEXT_PUBLIC_APP_URL",
         "NEXT_PUBLIC_DEFAULT_LOCALE",
-        "NEXT_PUBLIC_GA_MEASUREMENT_ID",
+        "NEXT_PUBLIC_GOOGLE_ANALYTICS_ID",
         "NEXT_PUBLIC_IMAGE_DOMAINS",
         "NEXT_PUBLIC_LOCALES",
         "NEXT_PUBLIC_SENTRY_DSN",

apps/civicsignalblog/turbo.json

@@ -10,7 +10,6 @@
         "NEXT_PUBLIC_APP_LOGO_URL",
         "NEXT_PUBLIC_APP_NAME",
         "NEXT_PUBLIC_APP_URL",
-        "NEXT_PUBLIC_GOOGLE_ANALYTICS_ID",
         "NEXT_PUBLIC_IMAGE_DOMAINS",
         "NEXT_PUBLIC_IMAGE_UNOPTIMIZED",
         "NEXT_PUBLIC_SENTRY_DSN",

apps/climatemappedafrica/.env.template

@@ -17,9 +17,6 @@ NEXT_PUBLIC_OPENAFRICA_DOMAINS=
 # based site domain)
 NEXT_PUBLIC_SOURCEAFRICA_DOMAINS=
 
-# Google Analytics
-NEXT_PUBLIC_GOOGLE_ANALYTICS_ID = "G-xxxxxxxx"
-
 # AWS S3 bucket for storing images
 S3_ACCESS_KEY_ID=AAAAAAAAAAAAAAAAAAAA
 S3_SECRET_ACCESS_KEY=AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

apps/climatemappedafrica/package.json

@@ -46,6 +46,7 @@
     "@mui/utils": "catalog:mui-styles",
     "@mui/x-tree-view": "catalog:",
     "@next/env": "catalog:",
+    "@next/third-parties": "catalog:",
     "@payloadcms/bundler-webpack": "catalog:",
     "@payloadcms/db-mongodb": "catalog:",
     "@payloadcms/plugin-cloud-storage": "catalog:",

apps/climatemappedafrica/src/lib/data/common/index.js

@@ -119,6 +119,7 @@ export async function getPageProps(api, context) {
   let variant = "default";
   const settings = {};
   settings.site = (await api.findGlobal("settings-site")) || null;
+  const { analytics } = settings.site;
   const hurumapSettings = await api.findGlobal("settings-hurumap");
   if (hurumapSettings?.enabled) {
     // TODO(koech): Handle cases when fetching profile fails?
@@ -156,6 +157,7 @@ export async function getPageProps(api, context) {
   const menus = await getNavBar(variant, settings);
 
   return {
+    analytics,
     blocks,
     footer,
     menus,

apps/climatemappedafrica/src/pages/_app.js

@@ -1,19 +1,21 @@
 import { CssBaseline } from "@mui/material";
 import { ThemeProvider, StyledEngineProvider } from "@mui/material/styles";
 import { ThemeProvider as StyledThemeProvider } from "@mui/styles";
-import { useRouter } from "next/router";
+import { GoogleAnalytics } from "@next/third-parties/google";
 import { DefaultSeo } from "next-seo";
 import PropTypes from "prop-types";
 import React from "react";
 
-import * as ga from "@/climatemappedafrica/lib/ga";
 import "@/climatemappedafrica/theme/fonts.css";
 import SEO from "@/climatemappedafrica/next-seo.config";
 import theme from "@/climatemappedafrica/theme";
 
 export default function MyApp(props) {
   const { Component, pageProps } = props;
 
+  const { analytics } = pageProps;
+  const { analyticsId: gaId } = analytics || {};
+
   React.useEffect(() => {
     // Remove the server-side injected CSS.
     /* eslint-env browser */
@@ -23,23 +25,6 @@ export default function MyApp(props) {
     }
   }, []);
 
-  const router = useRouter();
-
-  React.useEffect(() => {
-    const handleRouteChange = (url) => {
-      ga.pageview(url);
-    };
-    // When the component is mounted, subscribe to router changes
-    // and log those page views
-    router.events.on("routeChangeComplete", handleRouteChange);
-
-    // If the component is unmounted, unsubscribe
-    // from the event with the `off` method
-    return () => {
-      router.events.off("routeChangeComplete", handleRouteChange);
-    };
-  }, [router.events]);
-
   return (
     <>
       <DefaultSeo {...SEO} />
@@ -52,6 +37,7 @@ export default function MyApp(props) {
           </StyledThemeProvider>
         </ThemeProvider>
       </StyledEngineProvider>
+      <GoogleAnalytics gaId={gaId} />
     </>
   );
 }

apps/climatemappedafrica/src/pages/_document.js

@@ -26,24 +26,6 @@ export default class MyDocument extends Document {
           <link rel="manifest" href="/site.webmanifest" />
           {/* PWA primary color */}
           <meta name="theme-color" content={theme.palette.primary.main} />
-          {/* Global Site Tag (gtag.js) - Google Analytics */}
-          <script
-            async
-            src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID}`}
-          />
-          <script
-            // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML={{
-              __html: `
-            window.dataLayer = window.dataLayer || [];
-            function gtag(){dataLayer.push(arguments);}
-            gtag('js', new Date());
-            gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID}', {
-              page_path: window.location.pathname,
-            });
-          `,
-            }}
-          />
         </Head>
         <body>
           <Main />