From f012c33af5ed41ba2e796c04ff81f671767feea1 Mon Sep 17 00:00:00 2001 From: Duval Kilpatrick Date: Thu, 18 Dec 2025 17:48:07 -0500 Subject: [PATCH 01/10] fix: google tag manager script --- .../visual-editor/src/components/GTMBody.tsx | 39 +++++++++++++++++++ .../visual-editor/src/components/index.ts | 1 + .../visual-editor/src/utils/applyAnalytics.ts | 21 +++++++++- .../src/vite-plugin/templates/directory.tsx | 13 ++++--- .../src/vite-plugin/templates/locator.tsx | 13 ++++--- .../src/vite-plugin/templates/main.tsx | 13 ++++--- 6 files changed, 83 insertions(+), 17 deletions(-) create mode 100644 packages/visual-editor/src/components/GTMBody.tsx diff --git a/packages/visual-editor/src/components/GTMBody.tsx b/packages/visual-editor/src/components/GTMBody.tsx new file mode 100644 index 000000000..13bb56b62 --- /dev/null +++ b/packages/visual-editor/src/components/GTMBody.tsx @@ -0,0 +1,39 @@ +import React from "react"; +import { useDocument } from "@yext/visual-editor"; + +/** + * 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(); + + if (!streamDocument?.__?.visualEditorConfig) { + return <>{children}; + } + + const googleTagManagerId: string = JSON.parse( + streamDocument.__.visualEditorConfig + )?.googleTagManagerId; + + if (!googleTagManagerId) { + return <>{children}; + } + + return ( + <> + {/* Google Tag Manager (noscript) */} + + {/* End Google Tag Manager (noscript) */} + + {children} + + ); +}; diff --git a/packages/visual-editor/src/components/index.ts b/packages/visual-editor/src/components/index.ts index ca30e6553..65aee1699 100644 --- a/packages/visual-editor/src/components/index.ts +++ b/packages/visual-editor/src/components/index.ts @@ -25,3 +25,4 @@ export { defaultThemeConfig, createDefaultThemeConfig, } from "./DefaultThemeConfig.ts"; +export { GTMBody } from "./GTMBody.tsx"; diff --git a/packages/visual-editor/src/utils/applyAnalytics.ts b/packages/visual-editor/src/utils/applyAnalytics.ts index 5bb8e5b6d..a129933fb 100644 --- a/packages/visual-editor/src/utils/applyAnalytics.ts +++ b/packages/visual-editor/src/utils/applyAnalytics.ts @@ -3,19 +3,36 @@ export const applyAnalytics = (document: Record) => { return; } + // Google Tag Manager (GTM) const googleTagManagerId: string = JSON.parse( document.__.visualEditorConfig )?.googleTagManagerId; if (googleTagManagerId) { + return ` + + `; + } + + // Google Analytics 4 (GA4) + // Note that this does not yet exist in platform. Adding for future support. + const googleAnalyticsId: string = JSON.parse( + document.__.visualEditorConfig + )?.googleAnalyticsId; + + if (googleAnalyticsId) { return ` - + `; } }; diff --git a/packages/visual-editor/src/vite-plugin/templates/directory.tsx b/packages/visual-editor/src/vite-plugin/templates/directory.tsx index 5ec204c9d..14e18a3dd 100644 --- a/packages/visual-editor/src/vite-plugin/templates/directory.tsx +++ b/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 = (props) => { currency="USD" > - + + + ); diff --git a/packages/visual-editor/src/vite-plugin/templates/locator.tsx b/packages/visual-editor/src/vite-plugin/templates/locator.tsx index 6799d3f1c..751d9f60a 100644 --- a/packages/visual-editor/src/vite-plugin/templates/locator.tsx +++ b/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 = (props) => { currency="USD" > - + + + diff --git a/packages/visual-editor/src/vite-plugin/templates/main.tsx b/packages/visual-editor/src/vite-plugin/templates/main.tsx index e474d9ae0..cb640c23a 100644 --- a/packages/visual-editor/src/vite-plugin/templates/main.tsx +++ b/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 = (props) => { currency="USD" > - + + + ); From c03d4b4325ba584e8ac59a54c59e3b12f1a178b5 Mon Sep 17 00:00:00 2001 From: Duval Kilpatrick Date: Thu, 18 Dec 2025 18:18:06 -0500 Subject: [PATCH 02/10] robot comments --- .../visual-editor/src/components/GTMBody.tsx | 16 ++++++++++++---- .../visual-editor/src/utils/applyAnalytics.ts | 18 ++++++++++++------ 2 files changed, 24 insertions(+), 10 deletions(-) diff --git a/packages/visual-editor/src/components/GTMBody.tsx b/packages/visual-editor/src/components/GTMBody.tsx index 13bb56b62..076314159 100644 --- a/packages/visual-editor/src/components/GTMBody.tsx +++ b/packages/visual-editor/src/components/GTMBody.tsx @@ -14,11 +14,19 @@ export const GTMBody: React.FC<{ children: React.ReactNode }> = ({ return <>{children}; } - const googleTagManagerId: string = JSON.parse( - streamDocument.__.visualEditorConfig - )?.googleTagManagerId; + let visualEditorConfig: Record; + try { + visualEditorConfig = JSON.parse(streamDocument.__.visualEditorConfig); + } catch (_) { + console.warn( + "Failed to parse visualEditorConfig for GTM. Skipping adding GTM iframe." + ); + return; + } + + const googleTagManagerId: string = visualEditorConfig?.googleTagManagerId; - if (!googleTagManagerId) { + if (!googleTagManagerId || !/^GTM-[A-Z0-9]+$/.test(googleTagManagerId)) { return <>{children}; } diff --git a/packages/visual-editor/src/utils/applyAnalytics.ts b/packages/visual-editor/src/utils/applyAnalytics.ts index a129933fb..8a1ec39a7 100644 --- a/packages/visual-editor/src/utils/applyAnalytics.ts +++ b/packages/visual-editor/src/utils/applyAnalytics.ts @@ -3,10 +3,18 @@ export const applyAnalytics = (document: Record) => { return; } + let visualEditorConfig: Record; + 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: string = JSON.parse( - document.__.visualEditorConfig - )?.googleTagManagerId; + const googleTagManagerId: string = visualEditorConfig?.googleTagManagerId; if (googleTagManagerId) { return ` @@ -20,9 +28,7 @@ export const applyAnalytics = (document: Record) => { // Google Analytics 4 (GA4) // Note that this does not yet exist in platform. Adding for future support. - const googleAnalyticsId: string = JSON.parse( - document.__.visualEditorConfig - )?.googleAnalyticsId; + const googleAnalyticsId: string = visualEditorConfig?.googleAnalyticsId; if (googleAnalyticsId) { return ` From b7c6223a3f72d48f20515d707047989be21d5b95 Mon Sep 17 00:00:00 2001 From: Duval Kilpatrick Date: Thu, 18 Dec 2025 18:27:53 -0500 Subject: [PATCH 03/10] more bots --- packages/visual-editor/src/components/GTMBody.tsx | 2 +- packages/visual-editor/src/utils/applyAnalytics.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/visual-editor/src/components/GTMBody.tsx b/packages/visual-editor/src/components/GTMBody.tsx index 076314159..f795e1bc9 100644 --- a/packages/visual-editor/src/components/GTMBody.tsx +++ b/packages/visual-editor/src/components/GTMBody.tsx @@ -21,7 +21,7 @@ export const GTMBody: React.FC<{ children: React.ReactNode }> = ({ console.warn( "Failed to parse visualEditorConfig for GTM. Skipping adding GTM iframe." ); - return; + return <>{children}; } const googleTagManagerId: string = visualEditorConfig?.googleTagManagerId; diff --git a/packages/visual-editor/src/utils/applyAnalytics.ts b/packages/visual-editor/src/utils/applyAnalytics.ts index 8a1ec39a7..cd687ca14 100644 --- a/packages/visual-editor/src/utils/applyAnalytics.ts +++ b/packages/visual-editor/src/utils/applyAnalytics.ts @@ -16,7 +16,7 @@ export const applyAnalytics = (document: Record) => { // Google Tag Manager (GTM) const googleTagManagerId: string = visualEditorConfig?.googleTagManagerId; - if (googleTagManagerId) { + if (googleTagManagerId && /^GTM-[A-Z0-9]+$/.test(googleTagManagerId)) { return `