feat(third-parties): add gtmScriptUrl option for GTM server-side tagg…

…ing (#65907)  A new gtmScriptUrl option has been added to the third-parties GTM package. This allows you to replace the default https://www.googletagmanager.com/gtm.js URL with a custom gtm.js URL, such as "https://gtm.example.com/gtm.js". Closes: #63767 Closes: #68531 Closes: #67161 Closes: #61145 Closes: #58262 --------- Co-authored-by: JJ Kasper <jj@jjsweb.site>
vercel · Sep 24, 2024 · 6f64af6 · 6f64af6
1 parent aecc50e
commit 6f64af6
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
diff --git a/.../02-app/01-building-your-application/06-optimizing/12-third-party-libraries.mdx b/.../02-app/01-building-your-application/06-optimizing/12-third-party-libraries.mdx
@@ -163,6 +163,11 @@ Refer to the Tag Manager [developer
 documentation](https://developers.google.com/tag-platform/tag-manager/datalayer) to learn about the
 different variables and events that can be passed into the function.
 
+#### Server-side Tagging
+
+If you're using a server-side tag manager and serving `gtm.js` scripts from your tagging server you can
+use `gtmScriptUrl` option to specify the URL of the script.
+
 #### Options
 
 Options to pass to the Google Tag Manager. For a full list of options, read the [Google Tag Manager
@@ -171,6 +176,7 @@ docs](https://developers.google.com/tag-platform/tag-manager/datalayer).
 | Name            | Type     | Description                                                              |
 | --------------- | -------- | ------------------------------------------------------------------------ |
 | `gtmId`         | Required | Your GTM container ID. Usually starts with `GTM-`.                       |
+| `gtmScriptUrl`  | Optional | GTM script URL. Defaults to `https://www.googletagmanager.com/gtm.js`.   |
 | `dataLayer`     | Optional | Data layer object to instantiate the container with.                     |
 | `dataLayerName` | Optional | Name of the data layer. Defaults to `dataLayer`.                         |
 | `auth`          | Optional | Value of authentication parameter (`gtm_auth`) for environment snippets. |

diff --git a/packages/third-parties/src/google/gtm.tsx b/packages/third-parties/src/google/gtm.tsx
@@ -10,6 +10,7 @@ let currDataLayerName = 'dataLayer'
 export function GoogleTagManager(props: GTMParams) {
   const {
     gtmId,
+    gtmScriptUrl = 'https://www.googletagmanager.com/gtm.js',
     dataLayerName = 'dataLayer',
     auth,
     preview,
@@ -53,8 +54,7 @@ export function GoogleTagManager(props: GTMParams) {
       <Script
         id="_next-gtm"
         data-ntpc="GTM"
-        src={`https://www.googletagmanager.com/gtm.js?id=${gtmId}${gtmLayer}${gtmAuth}${gtmPreview}`}
-        nonce={nonce}
+        src={`${gtmScriptUrl}?id=${gtmId}${gtmLayer}${gtmAuth}${gtmPreview}`}
       />
     </>
   )

diff --git a/packages/third-parties/src/types/google.ts b/packages/third-parties/src/types/google.ts
@@ -14,6 +14,7 @@ type JSONValue =
 
 export type GTMParams = {
   gtmId: string
+  gtmScriptUrl?: string
   dataLayer?: { [key: string]: JSONValue }
   dataLayerName?: string
   auth?: string