From 9bd03a6015524c1f821cb53284a3382b7d9c8234 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Fri, 24 Jan 2025 13:39:34 +0300 Subject: [PATCH 1/8] Unify Google Analytics Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> --- Dockerfile | 13 +----- apps/civicsignalblog/turbo.json | 1 - apps/climatemappedafrica/.env.template | 3 -- apps/climatemappedafrica/package.json | 1 + .../src/lib/data/common/index.js | 2 + apps/climatemappedafrica/src/lib/ga/index.js | 13 ------ apps/climatemappedafrica/src/pages/_app.js | 24 +++-------- .../src/pages/_document.js | 18 -------- apps/codeforafrica/env.template | 4 +- apps/codeforafrica/next-env.d.ts | 2 +- apps/codeforafrica/package.json | 1 + .../src/lib/data/common/index.js | 2 + apps/codeforafrica/src/pages/_app.page.js | 42 +++---------------- .../src/payload/globals/Site/EngagementTab.js | 23 ++++++++++ apps/pesayetu/.env | 3 +- apps/pesayetu/package.json | 1 + apps/pesayetu/src/lib/ga/index.js | 13 ------ apps/pesayetu/src/pages/_app.js | 22 ++-------- apps/pesayetu/src/pages/_document.js | 18 -------- apps/vpnmanager/.env.template | 2 + apps/vpnmanager/package.json | 1 + apps/vpnmanager/src/pages/_app.tsx | 28 ++++++++----- pnpm-lock.yaml | 12 ++++++ 23 files changed, 82 insertions(+), 167 deletions(-) delete mode 100644 apps/climatemappedafrica/src/lib/ga/index.js delete mode 100644 apps/pesayetu/src/lib/ga/index.js diff --git a/Dockerfile b/Dockerfile index de9deae4f..cc91b66d5 100644 --- a/Dockerfile +++ b/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 \ diff --git a/apps/civicsignalblog/turbo.json b/apps/civicsignalblog/turbo.json index 34492822c..581376afe 100644 --- a/apps/civicsignalblog/turbo.json +++ b/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", diff --git a/apps/climatemappedafrica/.env.template b/apps/climatemappedafrica/.env.template index 7df32e146..6d753a3ec 100644 --- a/apps/climatemappedafrica/.env.template +++ b/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 diff --git a/apps/climatemappedafrica/package.json b/apps/climatemappedafrica/package.json index 46ac7bfda..735abe1a3 100644 --- a/apps/climatemappedafrica/package.json +++ b/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:", diff --git a/apps/climatemappedafrica/src/lib/data/common/index.js b/apps/climatemappedafrica/src/lib/data/common/index.js index 95f13af51..d4cac67bb 100644 --- a/apps/climatemappedafrica/src/lib/data/common/index.js +++ b/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, diff --git a/apps/climatemappedafrica/src/lib/ga/index.js b/apps/climatemappedafrica/src/lib/ga/index.js deleted file mode 100644 index 441d00313..000000000 --- a/apps/climatemappedafrica/src/lib/ga/index.js +++ /dev/null @@ -1,13 +0,0 @@ -// log the pageview with their URL -export const pageview = (url) => { - /* eslint-env browser */ - window.gtag("config", process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID, { - page_path: url, - }); -}; - -// log specific events happening. -export const event = ({ action, params }) => { - /* eslint-env browser */ - window.gtag("event", action, params); -}; diff --git a/apps/climatemappedafrica/src/pages/_app.js b/apps/climatemappedafrica/src/pages/_app.js index 4bf3bf937..918c4b1d9 100644 --- a/apps/climatemappedafrica/src/pages/_app.js +++ b/apps/climatemappedafrica/src/pages/_app.js @@ -1,12 +1,11 @@ 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"; @@ -14,6 +13,9 @@ 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 ( <> @@ -52,6 +37,7 @@ export default function MyApp(props) { + ); } diff --git a/apps/climatemappedafrica/src/pages/_document.js b/apps/climatemappedafrica/src/pages/_document.js index 8b01ac564..da7688bef 100644 --- a/apps/climatemappedafrica/src/pages/_document.js +++ b/apps/climatemappedafrica/src/pages/_document.js @@ -26,24 +26,6 @@ export default class MyDocument extends Document { {/* PWA primary color */} - {/* Global Site Tag (gtag.js) - Google Analytics */} -