fix: google tag manager script

packages/visual-editor/src/components/GTMBody.tsx

@@ -0,0 +1,52 @@
+import React, { useMemo } from "react";
+import { useDocument } from "@yext/visual-editor";
+
+const GTM_ID_REGEX = /^GTM-[A-Z0-9]+$/;
+
+/**
+ * Adds the Google Tag Manager (noscript) iframe to the body.
+ * This is required for GTM to function properly when JavaScript is disabled.
+ */
+export const GTMBody: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const streamDocument = useDocument();
+
+  const visualEditorConfig: Record<string, any> | null = useMemo(() => {
+    if (!streamDocument?.__?.visualEditorConfig) {
+      return null;
+    }
+
+    try {
+      return JSON.parse(streamDocument.__.visualEditorConfig);
+    } catch (_) {
+      console.warn(
+        "Failed to parse visualEditorConfig for GTM. Skipping adding GTM iframe."
+      );
+      return null;
+    }
+  }, [streamDocument]);
+
+  const googleTagManagerId = visualEditorConfig?.googleTagManagerId;
+
+  if (!googleTagManagerId || !GTM_ID_REGEX.test(googleTagManagerId)) {
+    return <>{children}</>;
+  }
+
+  return (
+    <>
+      {/* Google Tag Manager (noscript) */}
+      <noscript>
+        <iframe
+          src={`https://www.googletagmanager.com/ns.html?id=${googleTagManagerId}`}
+          height="0"
+          width="0"
+          style={{ display: "none", visibility: "hidden" }}
+        />
+      </noscript>
+      {/* End Google Tag Manager (noscript) */}
+
+      {children}
+    </>
+  );
+};

packages/visual-editor/src/components/index.ts

@@ -25,3 +25,4 @@ export {
   defaultThemeConfig,
   createDefaultThemeConfig,
 } from "./DefaultThemeConfig.ts";
+export { GTMBody } from "./GTMBody.tsx";

packages/visual-editor/src/docs/hybrid-development.md

@@ -104,20 +104,24 @@ const Location: Template<TemplateRenderProps> = (props) => {
       currency="USD"
     >
       <VisualEditorProvider templateProps={props}>
-        <Render
-          config={mainConfig}
-          data={migrate(
-            JSON.parse(document.__.layout),
-            migrationRegistry,
-            mainConfig
-          )}
-        />
+        <GTMBody>
+          <Render
+            config={mainConfig}
+            data={migrate(
+              JSON.parse(document.__.layout),
+              migrationRegistry,
+              mainConfig
+            )}
+          />
+        </GTMBody>
       </VisualEditorProvider>
     </AnalyticsProvider>
   );
 };
 ```
 
+`<GTMBody>` applies the Google Tag Manager noscript tag if the GTM ID is set in the platform's Site Configuration setting.
+
 `<Render>` converts the saved layout data from the editor into the rendered page.
 
 `migrate` handles updates to the components exported from `@yext/visual-editor`. If you are not using `@yext/visual-editor` components, you do not need to use `migrate`.

packages/visual-editor/src/utils/applyAnalytics.ts

@@ -1,21 +1,47 @@
+const GTM_ID_REGEX = /^GTM-[A-Z0-9]+$/;
+const GA4_ID_REGEX = /^G(T)?-[A-Z0-9]+$/;
+
 export const applyAnalytics = (document: Record<string, any>) => {
   if (!document?.__?.visualEditorConfig) {
     return;
   }
 
-  const googleTagManagerId: string = JSON.parse(
-    document.__.visualEditorConfig
-  )?.googleTagManagerId;
+  let visualEditorConfig: Record<string, any>;
+  try {
+    visualEditorConfig = JSON.parse(document.__.visualEditorConfig);
+  } catch (_) {
+    console.warn(
+      "Failed to parse visualEditorConfig for analytics. Skipping analytics script injection."
+    );
+    return;
+  }
+
+  // Google Tag Manager (GTM)
+  const googleTagManagerId = visualEditorConfig?.googleTagManagerId;
+
+  if (googleTagManagerId && GTM_ID_REGEX.test(googleTagManagerId)) {
+    return `<!-- Google Tag Manager -->
+    <script>(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','${googleTagManagerId}');</script>
+    <!-- End Google Tag Manager -->`;
+  }
+
+  // Google Analytics 4 (GA4)
+  // Note that this does not yet exist in platform. Adding for future support.
+  const googleAnalyticsId = visualEditorConfig?.googleAnalyticsId;
 
-  if (googleTagManagerId) {
+  if (googleAnalyticsId && GA4_ID_REGEX.test(googleAnalyticsId)) {
     return `<!-- Google tag (gtag.js) -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=${googleTagManagerId}"></script>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=${googleAnalyticsId}"></script>
     <script>
       window.dataLayer = window.dataLayer || [];
       function gtag(){dataLayer.push(arguments);}
       gtag('js', new Date());
 
-      gtag('config', '${googleTagManagerId}');
+      gtag('config', '${googleAnalyticsId}');
     </script>`;
   }
 };

packages/visual-editor/src/vite-plugin/templates/directory.tsx

@@ -25,6 +25,7 @@ import {
   directoryConfig,
   getSchema,
   getCanonicalUrl,
+  GTMBody,
 } from "@yext/visual-editor";
 import { AnalyticsProvider, SchemaWrapper } from "@yext/pages-components";
 
@@ -128,11 +129,13 @@ const Directory: Template<TemplateRenderProps> = (props) => {
       currency="USD"
     >
       <VisualEditorProvider templateProps={props}>
-        <Render
-          config={directoryConfig}
-          data={data}
-          metadata={{ streamDocument: document }}
-        />
+        <GTMBody>
+          <Render
+            config={directoryConfig}
+            data={data}
+            metadata={{ streamDocument: document }}
+          />
+        </GTMBody>
       </VisualEditorProvider>
     </AnalyticsProvider>
   );

packages/visual-editor/src/vite-plugin/templates/locator.tsx

@@ -25,6 +25,7 @@ import {
   getCanonicalUrl,
   migrate,
   migrationRegistry,
+  GTMBody,
 } from "@yext/visual-editor";
 import { AnalyticsProvider, SchemaWrapper } from "@yext/pages-components";
 import mapboxPackageJson from "mapbox-gl/package.json";
@@ -139,11 +140,13 @@ const Locator: Template<TemplateRenderProps> = (props) => {
         currency="USD"
       >
         <VisualEditorProvider templateProps={props}>
-          <Render
-            config={locatorConfig}
-            data={data}
-            metadata={{ streamDocument: document }}
-          />
+          <GTMBody>
+            <Render
+              config={locatorConfig}
+              data={data}
+              metadata={{ streamDocument: document }}
+            />
+          </GTMBody>
         </VisualEditorProvider>
       </AnalyticsProvider>
     </>

packages/visual-editor/src/vite-plugin/templates/main.tsx

@@ -26,6 +26,7 @@ import {
   mainConfig,
   getSchema,
   getCanonicalUrl,
+  GTMBody,
 } from "@yext/visual-editor";
 import { AnalyticsProvider, SchemaWrapper } from "@yext/pages-components";
 
@@ -130,11 +131,13 @@ const Location: Template<TemplateRenderProps> = (props) => {
       currency="USD"
     >
       <VisualEditorProvider templateProps={props}>
-        <Render
-          config={filteredConfig}
-          data={data}
-          metadata={{ streamDocument: document }}
-        />
+        <GTMBody>
+          <Render
+            config={filteredConfig}
+            data={data}
+            metadata={{ streamDocument: document }}
+          />
+        </GTMBody>
       </VisualEditorProvider>
     </AnalyticsProvider>
   );