diff --git a/.github/workflows/charterafrica-deploy-prod.yml b/.github/workflows/charterafrica-deploy-prod.yml index 03fa6cb15..638822a0e 100644 --- a/.github/workflows/charterafrica-deploy-prod.yml +++ b/.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 }} diff --git a/Dockerfile b/Dockerfile index ad0b60e9c..9661dc56b 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 \ @@ -943,7 +932,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 \ # Sentry (build time) SENTRY_AUTH_TOKEN \ SENTRY_ENVIRONMENT \ @@ -988,4 +977,4 @@ USER nextjs # server.js is created by next build from the standalone output # https://nextjs.org/docs/pages/api-reference/next-config-js/output -CMD ["node", "apps/promisetracker/server.js"] \ No newline at end of file +CMD ["node", "apps/promisetracker/server.js"] diff --git a/apps/charterafrica/package.json b/apps/charterafrica/package.json index b2234b0ee..bc7f2e913 100644 --- a/apps/charterafrica/package.json +++ b/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:", diff --git a/apps/charterafrica/src/lib/data/common/index.js b/apps/charterafrica/src/lib/data/common/index.js index 01d2afbb1..c53088857 100644 --- a/apps/charterafrica/src/lib/data/common/index.js +++ b/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, }; } diff --git a/apps/charterafrica/src/lib/gtag.js b/apps/charterafrica/src/lib/gtag.js deleted file mode 100644 index 32c4ea5eb..000000000 --- a/apps/charterafrica/src/lib/gtag.js +++ /dev/null @@ -1,25 +0,0 @@ -/* eslint-env browser */ - -export const GA_MEASUREMENT_ID = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID; - -export const isSet = GA_MEASUREMENT_ID?.length > 0; - -// https://developers.google.com/analytics/devguides/collection/gtagjs/pages -export function pageview(url) { - if (isSet && typeof window !== "undefined") { - window.gtag("config", GA_MEASUREMENT_ID, { - page_path: url, - }); - } -} - -// https://developers.google.com/analytics/devguides/collection/gtagjs/events -export function event({ action, category, label, value }) { - if (isSet && typeof window !== "undefined") { - window.gtag("event", action, { - event_category: category, - event_label: label, - value, - }); - } -} diff --git a/apps/charterafrica/src/pages/_app.page.js b/apps/charterafrica/src/pages/_app.page.js index aa9ef5852..4f33deb1d 100644 --- a/apps/charterafrica/src/pages/_app.page.js +++ b/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,43 +20,13 @@ 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 ( <> -