feat: add GTM and GA support (#211)

* feat: add GTM and GA support

* chore: format

* chore: remove noscript version of GTM

* chore: remove unused import

Author: cabljac

packages/server/src/types.ts

@@ -31,6 +31,8 @@ export interface ConfigWithoutLocales {
   // Adds Google Tag Manager to your documentation pages.
   googleTagManager: string;
   // Whether zoomable images are enabled by default
+  googleAnalytics: string;
+  // Whether zoomable images are enabled by default
   zoomImages: boolean;
   // Whether CodeHike is enabled
   experimentalCodehike: boolean;
@@ -71,6 +73,8 @@ export interface ConfigWithLocales {
   variables: Record<string, string>;
   // Adds Google Tag Manager to your documentation pages.
   googleTagManager: string;
+  // Adds Google Analytics to your documentation pages.
+  googleAnalytics: string;
   // Whether zoomable images are enabled by default
   zoomImages: boolean;
   // Whether CodeHike is enabled
@@ -119,6 +123,8 @@ export interface OutputConfig {
   variables: Record<string, string>;
   // Adds Google Tag Manager to your documentation pages.
   googleTagManager: string;
+  // Adds Google Analytics to your documentation pages.
+  googleAnalytics: string;
   // Whether zoomable images are enabled by default
   zoomImages: boolean;
   // Whether CodeHike is enabled
@@ -141,6 +147,7 @@ export const defaultConfig: OutputConfig = {
   headerDepth: 3,
   variables: {},
   googleTagManager: '',
+  googleAnalytics: '',
   zoomImages: false,
   experimentalCodehike: false,
   experimentalMath: false,

website/app/components/Head.tsx

@@ -4,8 +4,37 @@ import codeHikeStyles from '@code-hike/mdx/dist/index.css';
 
 export const Head = ({ data }: { data: DocumentationLoader }) => {
   const favicon = getFavicon({ data });
+
   return (
     <Helmet>
+      {data.config.googleAnalytics && (
+        <script
+          async
+          src={`https://www.googletagmanager.com/gtag/js?id=${data.config.googleAnalytics}`}
+        ></script>
+      )}
+      {data.config.googleAnalytics && (
+        <script type="text/javascript">
+          {`
+              window.dataLayer = window.dataLayer || [];
+              function gtag(){dataLayer.push(arguments);}
+              gtag('js', new Date());
+            
+              gtag('config', '${data.config.googleAnalytics}');
+            `}
+        </script>
+      )}
+      {data.config.googleTagManager && (
+        <script type="text/javascript">
+          {`
+          (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+          new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+          j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+          'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+          })(window,document,'script','dataLayer','${data.config.googleTagManager}');
+          `}
+        </script>
+      )}
       <link rel="icon" href={favicon} />
       {data.config.experimentalMath && (
         <link

website/app/utils/config.ts

@@ -92,6 +92,8 @@ export interface ProjectConfig {
   variables: Record<string, string>;
   // Adds Google Tag Manager to your documentation pages.
   googleTagManager: string;
+  // Adds Google Analytics to your documentation pages.
+  googleAnalytics: string;
   // Whether zoomable images are enabled by default
   zoomImages: boolean;
   // Whether CodeHike is enabled
@@ -114,6 +116,7 @@ export const defaultConfig: ProjectConfig = {
   headerDepth: 3,
   variables: {},
   googleTagManager: '',
+  googleAnalytics: '',
   zoomImages: false,
   experimentalCodehike: false,
   experimentalMath: false,
@@ -142,6 +145,7 @@ export function mergeConfig(json: Record<string, unknown>): ProjectConfig {
     headerDepth: getNumber(json, 'headerDepth', defaultConfig.headerDepth),
     variables: getValue(json, 'variables', defaultConfig.variables) as Record<string, string>,
     googleTagManager: getString(json, 'googleTagManager', defaultConfig.googleTagManager),
+    googleAnalytics: getString(json, 'googleAnalytics', defaultConfig.googleAnalytics),
     zoomImages: getBoolean(json, 'zoomImages', defaultConfig.zoomImages),
     // TODO: tidy the following:
     locales: (json.locales as Record<string, string>) ?? undefined,