demo: add Google Analytics app to site configs

site.config.build.tsx

@@ -3,6 +3,8 @@ import { authnApp } from '@openedx/frontend-app-authn';
 import { instructorDashboardApp } from '@openedx/frontend-app-instructor-dashboard';
 import { learnerDashboardApp } from '@openedx/frontend-app-learner-dashboard';
 
+import { googleAnalyticsApp } from './src/googleAnalytics';
+
 import './src/site.scss';
 
 const siteConfig: SiteConfig = {
@@ -21,6 +23,12 @@ const siteConfig: SiteConfig = {
     authnApp,
     learnerDashboardApp,
     instructorDashboardApp,
+    {
+      ...googleAnalyticsApp,
+      config: {
+        GOOGLE_ANALYTICS_4_ID: 'G-TEST123',
+      },
+    },
   ],
   externalRoutes: [
     {

site.config.dev.tsx

@@ -3,6 +3,8 @@ import { authnApp } from '@openedx/frontend-app-authn';
 import { instructorDashboardApp } from '@openedx/frontend-app-instructor-dashboard';
 import { learnerDashboardApp } from '@openedx/frontend-app-learner-dashboard';
 
+import { googleAnalyticsApp } from './src/googleAnalytics';
+
 import './src/site.scss';
 
 const siteConfig: SiteConfig = {
@@ -21,6 +23,12 @@ const siteConfig: SiteConfig = {
     authnApp,
     learnerDashboardApp,
     instructorDashboardApp,
+    {
+      ...googleAnalyticsApp,
+      config: {
+        GOOGLE_ANALYTICS_4_ID: 'G-TEST123',
+      },
+    },
   ],
   externalRoutes: [
     {

src/googleAnalytics/GoogleAnalyticsLoader.ts

@@ -0,0 +1,50 @@
+import { AppConfig, ExternalScriptLoader } from '@openedx/frontend-base';
+
+export default class GoogleAnalyticsLoader implements ExternalScriptLoader {
+  analyticsId: string;
+
+  constructor({ config }: { config: AppConfig }) {
+    this.analyticsId = config.GOOGLE_ANALYTICS_4_ID as string;
+  }
+
+  loadScript() {
+    if (!this.analyticsId) {
+      return;
+    }
+
+    global.googleAnalytics = global.googleAnalytics || [];
+    // @ts-expect-error We just added googleAnalytics to global, it's there.
+    const { googleAnalytics } = global;
+
+    if (googleAnalytics.invoked) {
+      return;
+    }
+
+    googleAnalytics.invoked = true;
+
+    googleAnalytics.load = (key, options) => {
+      const scriptSrc = document.createElement('script');
+      scriptSrc.type = 'text/javascript';
+      scriptSrc.async = true;
+      scriptSrc.src = `https://www.googletagmanager.com/gtag/js?id=${key}`;
+
+      const scriptGtag = document.createElement('script');
+      scriptGtag.innerHTML = `
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', '${key}');
+      `;
+
+      const first = document.getElementsByTagName('script')[0];
+      if (first?.parentNode === null) {
+        throw new Error('No script to insert Google analytics script before.');
+      }
+      first.parentNode.insertBefore(scriptSrc, first);
+      first.parentNode.insertBefore(scriptGtag, first);
+      googleAnalytics._loadOptions = options;
+    };
+
+    googleAnalytics.load(this.analyticsId);
+  }
+}

src/googleAnalytics/app.ts

@@ -0,0 +1,9 @@
+import { App } from '@openedx/frontend-base';
+import GoogleAnalyticsLoader from './GoogleAnalyticsLoader';
+
+const app: App = {
+  appId: 'org.openedx.frontend.app.googleAnalytics',
+  externalScripts: [GoogleAnalyticsLoader],
+};
+
+export default app;

src/googleAnalytics/index.ts

@@ -0,0 +1,2 @@
+export { default as GoogleAnalyticsLoader } from './GoogleAnalyticsLoader';
+export { default as googleAnalyticsApp } from './app';