Adding <GoogleTagManager> component to @next/third-parties

packages/next/src/client/script.tsx

@@ -68,7 +68,7 @@ const insertStylesheets = (stylesheets: string[]) => {
   }
 }
 
-const loadScript = (props: ScriptProps): void => {
+export const loadScript = (props: ScriptProps): void => {
   const {
     src,
     id,

packages/third-parties/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@next/third-parties",
   "version": "13.5.4-canary.3",
-  "private": true,
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/third-parties"

packages/third-parties/src/google/index.tsx

@@ -1,2 +1,3 @@
 export { default as GoogleMapsEmbed } from './GoogleMapsEmbed'
 export { default as YouTubeEmbed } from './YouTubeEmbed'
+export { default as useGoogleTagManager } from './useGoogleTagManager'

packages/third-parties/src/google/useGoogleTagManager.tsx

@@ -0,0 +1,81 @@
+import { useState, useEffect, useCallback } from 'react'
+import { loadScript } from 'next/script'
+
+declare global {
+  interface Window {
+    dataLayer: Object[] | undefined
+  }
+}
+
+type GTMParams = {
+  id: string
+  dataLayer: string[]
+  dataLayerName: string
+  auth: string
+  preview: string
+}
+
+export default function useGoogleTagManager() {
+  const [initParams, setInitParams] = useState<GTMParams>()
+  const init = useCallback(
+    (params: GTMParams) => {
+      if (initParams === undefined) {
+        setInitParams(params)
+      }
+    },
+    [initParams]
+  )
+
+  const sendData = useCallback(
+    (data: Object) => {
+      if (initParams === undefined) {
+        console.warn('GTM has not been initialized yet.')
+        return
+      }
+
+      const { dataLayerName = 'dataLayer' } = initParams
+      if (window[dataLayerName]) {
+        window[dataLayerName].push(data)
+      } else {
+        console.warn(`dataLayer ${dataLayerName} does not exist`)
+      }
+    },
+    [initParams]
+  )
+
+  useEffect(() => {
+    if (initParams !== undefined) {
+      const {
+        id,
+        dataLayerName = 'dataLayer',
+        auth,
+        preview,
+        dataLayer,
+      } = initParams
+
+      const gtmLayer =
+        dataLayerName !== 'dataLayer' ? `$l=${dataLayerName}` : ''
+      const gtmAuth = auth ? `&gtm_auth=${auth}` : ''
+      const gtmPreview = preview
+        ? `&gtm_preview=${preview}&gtm_cookies_win=x`
+        : ''
+
+      loadScript({
+        id: '_next-gtm',
+        dangerouslySetInnerHTML: {
+          __html: `
+        (function(w,l){
+          w[l]=w[l]||[];
+          w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});
+          ${dataLayer ? `w[l].push(${JSON.stringify(dataLayer)})` : ''}
+        })(window,'${dataLayerName}');`,
+        },
+      })
+      loadScript({
+        src: `https://www.googletagmanager.com/gtm.js?id=${id}${gtmLayer}${gtmAuth}${gtmPreview}`,
+      })
+    }
+  }, [initParams])
+
+  return { init, sendData }
+}

test/e2e/app-dir/third-parties/app/gtm/page.js

@@ -0,0 +1,27 @@
+'use client'
+
+import { useEffect } from 'react'
+import { useGoogleTagManager } from '@next/third-parties/google'
+
+const Page = () => {
+  const { init, sendData } = useGoogleTagManager()
+
+  useEffect(() => {
+    init({ id: 'GTM-XYZ' })
+  }, [init])
+
+  const onClick = () => {
+    sendData({ event: 'buttonClicked', value: 'xyz' })
+  }
+
+  return (
+    <div class="container">
+      <h1>GTM</h1>
+      <button id="gtm-send" onClick={onClick}>
+        Click
+      </button>
+    </div>
+  )
+}
+
+export default Page

test/e2e/app-dir/third-parties/basic.test.ts

@@ -1,4 +1,5 @@
 import { createNextDescribe } from 'e2e-utils'
+import { waitFor } from 'next-test-utils'
 
 createNextDescribe(
   '@next/third-parties basic usage',
@@ -29,5 +30,26 @@ createNextDescribe(
       expect(baseContainer.length).toBe(1)
       expect(mapContainer.length).toBe(1)
     })
+
+    it('renders GTM', async () => {
+      const browser = await next.browser('/gtm')
+
+      await browser.waitForElementByCss('#_next-gtm')
+      await waitFor(1000)
+
+      const gtmScript = await browser.elementsByCss(
+        '[src^="https://www.googletagmanager.com/gtm.js?id=GTM-XYZ"]'
+      )
+
+      expect(gtmScript.length).toBe(1)
+
+      const dataLayer = await browser.eval('window.dataLayer')
+      expect(dataLayer.length).toBe(1)
+
+      await browser.elementByCss('#gtm-send').click()
+
+      const dataLayer2 = await browser.eval('window.dataLayer')
+      expect(dataLayer2.length).toBe(2)
+    })
   }
 )

test/e2e/third-parties/index.test.ts

@@ -1,4 +1,5 @@
 import { createNextDescribe } from 'e2e-utils'
+import { waitFor } from 'next-test-utils'
 
 createNextDescribe(
   '@next/third-parties basic usage',
@@ -28,5 +29,26 @@ createNextDescribe(
       expect(baseContainer.length).toBe(1)
       expect(mapContainer.length).toBe(1)
     })
+
+    it('renders GTM', async () => {
+      const browser = await next.browser('/gtm')
+
+      await browser.waitForElementByCss('#_next-gtm')
+      await waitFor(1000)
+
+      const gtmScript = await browser.elementsByCss(
+        '[src^="https://www.googletagmanager.com/gtm.js?id=GTM-XYZ"]'
+      )
+
+      expect(gtmScript.length).toBe(1)
+
+      const dataLayer = await browser.eval('window.dataLayer')
+      expect(dataLayer.length).toBe(1)
+
+      await browser.elementByCss('#gtm-send').click()
+
+      const dataLayer2 = await browser.eval('window.dataLayer')
+      expect(dataLayer2.length).toBe(2)
+    })
   }
 )

test/e2e/third-parties/pages/gtm.js

@@ -0,0 +1,25 @@
+import { useEffect } from 'react'
+import { useGoogleTagManager } from '@next/third-parties/google'
+
+const Page = () => {
+  const { init, sendData } = useGoogleTagManager()
+
+  useEffect(() => {
+    init({ id: 'GTM-XYZ' })
+  }, [init])
+
+  const onClick = () => {
+    sendData({ event: 'buttonClicked', value: 'xyz' })
+  }
+
+  return (
+    <div class="container">
+      <h1>GTM</h1>
+      <button id="gtm-send" onClick={onClick}>
+        Click
+      </button>
+    </div>
+  )
+}
+
+export default Page