Allow passing a nonce to two third-party libraries

Specifically, <GoogleAnalytics> and <GoogleTagManager>. I did not know how to add it to the YouTube and Google Maps embeds, since they do not use the <Script> tag.
vercel · Feb 8, 2024 · 310ebe6 · 310ebe6
1 parent 0114c2c
commit 310ebe6
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 9 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
@@ -174,13 +174,14 @@ different variables and events that can be passed into the function.
 Options to pass to the Google Tag Manager. For a full list of options, read the [Google Tag Manager
 docs](https://developers.google.com/tag-platform/tag-manager/datalayer).
 
-| Name            | Type     | Description                                                                     |
-| --------------- | -------- | ------------------------------------------------------------------------------- |
-| `gtmId`         | Required | Your GTM container ID. Usually starts with `GTM-`.                              |
-| `dataLayer`     | Optional | Data layer array to instantiate the container with. Defaults to an empty array. |
-| `dataLayerName` | Optional | Name of the data layer. Defaults to `dataLayer`.                                |
-| `auth`          | Optional | Value of authentication parameter (`gtm_auth`) for environment snippets.        |
-| `preview`       | Optional | Value of preview parameter (`gtm_preview`) for environment snippets.            |
+| Name            | Type     | Description                                                                                |
+| --------------- | -------- | ------------------------------------------------------------------------------------------ |
+| `gtmId`         | Required | Your GTM container ID. Usually starts with `GTM-`.                                         |
+| `dataLayer`     | Optional | Data layer array to instantiate the container with. Defaults to an empty array.            |
+| `dataLayerName` | Optional | Name of the data layer. Defaults to `dataLayer`.                                           |
+| `auth`          | Optional | Value of authentication parameter (`gtm_auth`) for environment snippets.                   |
+| `preview`       | Optional | Value of preview parameter (`gtm_preview`) for environment snippets.                       |
+| `nonce`         | Optional | A [nonce](/docs/app/building-your-application/configuring/content-security-policy#nonces). |
 
 ### Google Analytics
 
@@ -352,6 +353,7 @@ Options to pass to the `<GoogleAnalytics>` component.
 | --------------- | -------- | ------------------------------------------------------------------------------------------------------ |
 | `gaId`          | Required | Your [measurement ID](https://support.google.com/analytics/answer/12270356). Usually starts with `G-`. |
 | `dataLayerName` | Optional | Name of the data layer. Defaults to `dataLayer`.                                                       |
+| `nonce`         | Optional | A [nonce](/docs/app/building-your-application/configuring/content-security-policy#nonces).             |
 
 ### Google Maps Embed
 

diff --git a/packages/third-parties/src/google/ga.tsx b/packages/third-parties/src/google/ga.tsx
@@ -14,7 +14,7 @@ declare global {
 let currDataLayerName: string | undefined = undefined
 
 export function GoogleAnalytics(props: GAParams) {
-  const { gaId, dataLayerName = 'dataLayer' } = props
+  const { gaId, dataLayerName = 'dataLayer', nonce } = props
 
   if (currDataLayerName === undefined) {
     currDataLayerName = dataLayerName
@@ -45,10 +45,12 @@ export function GoogleAnalytics(props: GAParams) {
 
           gtag('config', '${gaId}');`,
         }}
+        nonce={nonce}
       />
       <Script
         id="_next-ga"
         src={`https://www.googletagmanager.com/gtag/js?id=${gaId}`}
+        nonce={nonce}
       />
     </>
   )

diff --git a/packages/third-parties/src/google/gtm.tsx b/packages/third-parties/src/google/gtm.tsx
@@ -8,7 +8,14 @@ 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,
+    nonce,
+  } = props
 
   if (currDataLayerName === undefined) {
     currDataLayerName = dataLayerName
@@ -43,11 +50,13 @@ export function GoogleTagManager(props: GTMParams) {
         ${dataLayer ? `w[l].push(${JSON.stringify(dataLayer)})` : ''}
       })(window,'${dataLayerName}');`,
         }}
+        nonce={nonce}
       />
       <Script
         id="_next-gtm"
         data-ntpc="GTM"
         src={`https://www.googletagmanager.com/gtm.js?id=${gtmId}${gtmLayer}${gtmAuth}${gtmPreview}`}
+        nonce={nonce}
       />
     </>
   )

diff --git a/packages/third-parties/src/types/google.ts b/packages/third-parties/src/types/google.ts
@@ -1,3 +1,5 @@
+import type { ScriptProps } from 'next/script'
+
 declare global {
   interface Window {
     dataLayer?: Object[]
@@ -11,11 +13,13 @@ export type GTMParams = {
   dataLayerName?: string
   auth?: string
   preview?: string
+  nonce?: ScriptProps['nonce']
 }
 
 export type GAParams = {
   gaId: string
   dataLayerName?: string
+  nonce?: ScriptProps['nonce']
 }
 
 export type GoogleMapsEmbed = {