Adding Google analytics to next/third-parties (#58418)

Co-authored-by: Jiachi Liu <[email protected]>

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

@@ -0,0 +1,70 @@
+'use client'
+// TODO: Evaluate import 'client only'
+import React, { useEffect } from 'react'
+import Script from 'next/script'
+
+import type { GAParams } from '../types/google'
+
+declare global {
+  interface Window {
+    dataLayer?: Object[]
+  }
+}
+
+let currDataLayerName: string | undefined = undefined
+
+export function GoogleAnalytics(props: GAParams) {
+  const { gaId, dataLayerName = 'dataLayer' } = props
+
+  if (currDataLayerName === undefined) {
+    currDataLayerName = dataLayerName
+  }
+
+  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
+    // existing API.
+    // The performance measurement will be handled by Chrome Aurora
+
+    performance.mark('mark_feature_usage', {
+      detail: {
+        feature: 'next-third-parties-ga',
+      },
+    })
+  }, [])
+
+  return (
+    <>
+      <Script
+        id="_next-ga-init"
+        dangerouslySetInnerHTML={{
+          __html: `
+          window['${dataLayerName}'] = window['${dataLayerName}'] || [];
+          function gtag(){window['${dataLayerName}'].push(arguments);}
+          gtag('js', new Date());
+
+          gtag('config', '${gaId}');`,
+        }}
+      />
+      <Script
+        id="_next-ga"
+        src={`https://www.googletagmanager.com/gtag/js?id=${gaId}`}
+      />
+    </>
+  )
+}
+
+export const sendGAEvent = (...args: Object[]) => {
+  if (currDataLayerName === undefined) {
+    console.warn(`@next/third-parties: GA has not been initialized`)
+    return
+  }
+
+  if (window[currDataLayerName]) {
+    window[currDataLayerName].push(...args)
+  } else {
+    console.warn(
+      `@next/third-parties: GA dataLayer ${currDataLayerName} does not exist`
+    )
+  }
+}

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

@@ -22,6 +22,7 @@ export function GoogleTagManager(props: GTMParams) {
     // 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
     // existing API.
+    // The performance measurement will be handled by Chrome Aurora
 
     performance.mark('mark_feature_usage', {
       detail: {

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

@@ -1,3 +1,4 @@
 export { default as GoogleMapsEmbed } from './google-maps-embed'
 export { default as YouTubeEmbed } from './youtube-embed'
 export { GoogleTagManager, sendGTMEvent } from './gtm'
+export { GoogleAnalytics, sendGAEvent } from './ga'

packages/third-parties/src/types/google.ts

@@ -13,6 +13,11 @@ export type GTMParams = {
   preview?: string
 }
 
+export type GAParams = {
+  gaId: string
+  dataLayerName?: string
+}
+
 export type GoogleMapsEmbed = {
   height?: number
   width?: number

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

@@ -0,0 +1,23 @@
+'use client'
+
+import React from 'react'
+import { GoogleAnalytics, sendGAEvent } from '@next/third-parties/google'
+
+const Page = () => {
+  const onClick = () => {
+    sendGAEvent({ event: 'buttonClicked', value: 'xyz' })
+  }
+
+  return (
+    <div class="container">
+      <GoogleAnalytics gaId="GA-XYZ" />
+      <h1>GA</h1>
+      <button id="ga-send" onClick={onClick}>
+        Click
+      </button>
+      <GoogleAnalytics gaId="GA-XYZ" />
+    </div>
+  )
+}
+
+export default Page

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

@@ -54,5 +54,28 @@ createNextDescribe(
       const dataLayer2 = await browser.eval('window.dataLayer')
       expect(dataLayer2.length).toBe(2)
     })
+
+    it('renders GA', async () => {
+      const browser = await next.browser('/ga')
+
+      await browser.waitForElementByCss('#_next-ga')
+      await waitFor(1000)
+
+      const gaInlineScript = await browser.elementsByCss('#_next-ga-init')
+      expect(gaInlineScript.length).toBe(1)
+
+      const gaScript = await browser.elementsByCss(
+        '[src^="https://www.googletagmanager.com/gtag/js?id=GA-XYZ"]'
+      )
+
+      expect(gaScript.length).toBe(1)
+      const dataLayer = await browser.eval('window.dataLayer')
+      expect(dataLayer.length).toBe(4)
+
+      await browser.elementByCss('#ga-send').click()
+
+      const dataLayer2 = await browser.eval('window.dataLayer')
+      expect(dataLayer2.length).toBe(5)
+    })
   }
 )

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

@@ -53,5 +53,28 @@ createNextDescribe(
       const dataLayer2 = await browser.eval('window.dataLayer')
       expect(dataLayer2.length).toBe(2)
     })
+
+    it('renders GA', async () => {
+      const browser = await next.browser('/ga')
+
+      await browser.waitForElementByCss('#_next-ga')
+      await waitFor(1000)
+
+      const gaInlineScript = await browser.elementsByCss('#_next-ga-init')
+      expect(gaInlineScript.length).toBe(1)
+
+      const gaScript = await browser.elementsByCss(
+        '[src^="https://www.googletagmanager.com/gtag/js?id=GA-XYZ"]'
+      )
+
+      expect(gaScript.length).toBe(1)
+      const dataLayer = await browser.eval('window.dataLayer')
+      expect(dataLayer.length).toBe(4)
+
+      await browser.elementByCss('#ga-send').click()
+
+      const dataLayer2 = await browser.eval('window.dataLayer')
+      expect(dataLayer2.length).toBe(5)
+    })
   }
 )

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

@@ -0,0 +1,21 @@
+import React from 'react'
+import { GoogleAnalytics, sendGAEvent } from '@next/third-parties/google'
+
+const Page = () => {
+  const onClick = () => {
+    sendGAEvent({ event: 'buttonClicked', value: 'xyz' })
+  }
+
+  return (
+    <div class="container">
+      <GoogleAnalytics gaId="GA-XYZ" />
+      <h1>GA</h1>
+      <button id="ga-send" onClick={onClick}>
+        Click
+      </button>
+      <GoogleAnalytics gaId="GA-XYZ" />
+    </div>
+  )
+}
+
+export default Page