Merge pull request #892 from CodeForAfrica/feat/engineeringblog_analy…

…tics

@/engineeringblog GA analytics

apps/engineeringblog/app/layout.tsx

@@ -1,13 +1,13 @@
 import { CssBaseline, ThemeProvider } from "@mui/material";
 import { AppRouterCacheProvider } from "@mui/material-nextjs/v13-appRouter";
+import { GoogleAnalytics } from "@next/third-parties/google";
 import type { Metadata } from "next";
 
+import logoLight from "@/engineeringblog/assets/images/logo-light.png";
 import Footer from "@/engineeringblog/components/Footer";
 import NavBar from "@/engineeringblog/components/NavBar";
-import theme from "@/engineeringblog/theme";
-
 import { getSettings } from "@/engineeringblog/lib/data";
-import logoLight from "@/engineeringblog/assets/images/logo-light.png";
+import theme from "@/engineeringblog/theme";
 
 export const metadata: Metadata = {
   title: "Technology | Code for Africa",
@@ -20,7 +20,7 @@ export default async function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const { connect, primaryNavigation, secondaryNavigation } =
+  const { analytics, connect, primaryNavigation, secondaryNavigation } =
     await getSettings();
   // TODO: blurWidth/blurHeight https://github.com/vercel/next.js/issues/56511
   const { blurWidth, blurHeight, ...logoProps } = logoLight;
@@ -46,6 +46,7 @@ export default async function RootLayout({
           </ThemeProvider>
         </AppRouterCacheProvider>
       </body>
+      <GoogleAnalytics gaId={analytics?.analyticsId} />
     </html>
   );
 }

apps/engineeringblog/content/site/settings.mdx

@@ -35,4 +35,6 @@ connect:
       url: https://www.instagram.com/code4africa__/
     - platform: Github
       url: https://github.com/CodeForAfrica
+analytics:
+  analyticsId: "G-TN1WGZVHLE"
 ---

apps/engineeringblog/lib/data/index.ts

@@ -107,17 +107,23 @@ interface SecondaryNavigationProps extends NavigationProps {
   copyright: string;
 }
 
+export type AnalyticsProps = {
+  analyticsId: string;
+};
+
 type SettingsProps = {
   title: string;
   primaryNavigation: PrimaryNavigationProps;
   secondaryNavigation: SecondaryNavigationProps;
   connect: ConnectProps;
+  analytics: AnalyticsProps;
 };
 
 async function readSettingsFile(filePath: string): Promise<SettingsProps> {
   const { data } = await readMdFile(filePath);
 
   return {
+    analytics: data.analytics,
     connect: data.connect,
     primaryNavigation: data.primaryNavigation,
     secondaryNavigation: data.secondaryNavigation,

apps/engineeringblog/package.json

@@ -22,6 +22,7 @@
     "@mui/material-nextjs": "catalog:",
     "@mui/utils": "catalog:",
     "@next/mdx": "catalog:",
+    "@next/third-parties": "catalog:",
     "date-fns": "catalog:",
     "gray-matter": "catalog:",
     "@types/mdx": "catalog:",