From 7b77e7e8a2aac53c5fa6f161830efc72d2aa82c5 Mon Sep 17 00:00:00 2001
From: "Jason R. Stevens, CFA" <jason@thinkjrs.dev>
Date: Thu, 11 Apr 2024 10:04:13 -0600
Subject: [PATCH 1/3] :label: add url type to GTMParams

---
 packages/third-parties/src/types/google.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/third-parties/src/types/google.ts b/packages/third-parties/src/types/google.ts
index 30a4e9f28a464..8216ef3c664e0 100644
--- a/packages/third-parties/src/types/google.ts
+++ b/packages/third-parties/src/types/google.ts
@@ -11,6 +11,7 @@ export type GTMParams = {
   dataLayerName?: string
   auth?: string
   preview?: string
+  url?: string
 }
 
 export type GAParams = {

From bbf69eb3b9efd6d69b978cb7cba54fb7c82376a2 Mon Sep 17 00:00:00 2001
From: "Jason R. Stevens, CFA" <jason@thinkjrs.dev>
Date: Thu, 11 Apr 2024 10:08:02 -0600
Subject: [PATCH 2/3] :sparkles: add url parameter to GTMParams to enable
 server-side GTM

---
 packages/third-parties/src/google/gtm.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/third-parties/src/google/gtm.tsx b/packages/third-parties/src/google/gtm.tsx
index 1203525cc1e34..6296a7356a489 100644
--- a/packages/third-parties/src/google/gtm.tsx
+++ b/packages/third-parties/src/google/gtm.tsx
@@ -8,7 +8,7 @@ import type { GTMParams } from '../types/google'
 let currDataLayerName: string | undefined = undefined
 
 export function GoogleTagManager(props: GTMParams) {
-  const { gtmId, dataLayerName = 'dataLayer', auth, preview, dataLayer } = props
+  const { gtmId, dataLayerName = 'dataLayer', auth, preview, dataLayer, url } = props
 
   if (currDataLayerName === undefined) {
     currDataLayerName = dataLayerName
@@ -17,7 +17,7 @@ export function GoogleTagManager(props: GTMParams) {
   const gtmLayer = dataLayerName !== 'dataLayer' ? `&l=${dataLayerName}` : ''
   const gtmAuth = auth ? `&gtm_auth=${auth}` : ''
   const gtmPreview = preview ? `&gtm_preview=${preview}&gtm_cookies_win=x` : ''
-
+  const gtmUrl = url ? url : 'https://www.googletagmanager.com'
   useEffect(() => {
     // performance.mark is being used as a feature use signal. While it is traditionally used for performance
     // benchmarking it is low overhead and thus considered safe to use in production and it is a widely available
@@ -47,7 +47,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}`}
+        src={`${gtmUrl}/gtm.js?id=${gtmId}${gtmLayer}${gtmAuth}${gtmPreview}`}
       />
     </>
   )

From de553735fc59d185dd60a64bac9d00b141a0936c Mon Sep 17 00:00:00 2001
From: "Jason R. Stevens, CFA" <jason@thinkjrs.dev>
Date: Thu, 11 Apr 2024 10:31:32 -0600
Subject: [PATCH 3/3] :notebook: update docs to include custom gtm url server
 usage

---
 .../06-optimizing/12-third-party-libraries.mdx         | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/docs/02-app/01-building-your-application/06-optimizing/12-third-party-libraries.mdx b/docs/02-app/01-building-your-application/06-optimizing/12-third-party-libraries.mdx
index ab7f5b9ef589e..7188b386fb436 100644
--- a/docs/02-app/01-building-your-application/06-optimizing/12-third-party-libraries.mdx
+++ b/docs/02-app/01-building-your-application/06-optimizing/12-third-party-libraries.mdx
@@ -116,6 +116,16 @@ export default function Page() {
 ```
 
 </PagesOnly>
+#### Using a custom server URL
+
+If you have a server-side tag manager deployment, you can customize the URL by passing in a `url` parameter. The component uses `https://www.googletagamanager.com` by default.
+
+```jsx
+import { GoogleTagManager } from '@next/third-parties/google'
+
+  <GoogleTagManager gtmId="GTM-XYZ" url="https://tag-manager-server.xyz" />
+}
+```
 
 #### Sending Events