useNextScriptForGoogleAnalytics (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.6
Diagnostic Category: lint/nursery/useNextScriptForGoogleAnalytics
This rule doesn’t have a fix.
The default severity of this rule is warning.
This rule belongs to the following domains:
- next
Sources:
- Inspired from @next/next/next-script-for-ga

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useNextScriptForGoogleAnalytics": "error"
6
      }
7
    }
8
  }
9
}

Description

Enforce the use of the @next/third-parties/google components to load Google Analytics and Google Tag Manager.

Adding the Google Analytics or Google Tag Manager script with a plain <script> element can slow down your page. The GoogleAnalytics and GoogleTagManager components from @next/third-parties/google load these scripts after the page becomes interactive.

This rule reports <script> elements that load one of these scripts, either through the src attribute or through inline code in dangerouslySetInnerHTML.

Examples

Invalid

1
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XYZ" />

code-block.jsx:1:1 lint/nursery/useNextScriptForGoogleAnalytics ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ This script element loads Google Analytics.
  
  > 1 │ <script async src="https://www.googletagmanager.com/gtag/js?id=G-XYZ" />
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Loading Google Analytics with a plain script element can slow down your page.
  
  ℹ Use the GoogleAnalytics component from @next/third-parties/google instead, which loads the script after the page becomes interactive. See the Next.js docs for more details.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
<script
2
  dangerouslySetInnerHTML={{
3
    __html: `
4
      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
5
      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
6
      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
7
      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
8
      })(window,document,'script','dataLayer','GTM-XYZ');
9
    `,
10
  }}
11
/>

code-block.jsx:1:1 lint/nursery/useNextScriptForGoogleAnalytics ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ This script element loads Google Tag Manager.
  
   > 1 │ <script
       │ ^^^^^^^
   > 2 │   dangerouslySetInnerHTML={{
   > 3 │     __html: `
   > 4 │       (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
        ...
   > 9 │     `,
  > 10 │   }}
  > 11 │ />
       │ ^^
    12 │ 
  
  ℹ Loading Google Tag Manager with a plain script element can slow down your page.
  
  ℹ Use the GoogleTagManager component from @next/third-parties/google instead, which loads the script after the page becomes interactive. See the Next.js docs for more details.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
import { GoogleAnalytics, GoogleTagManager } from "@next/third-parties/google";
2

3
export default function RootLayout({ children }) {
4
  return (
5
    <html lang="en">
6
      <GoogleTagManager gtmId="GTM-XYZ" />
7
      <body>{children}</body>
8
      <GoogleAnalytics gaId="G-XYZ" />
9
    </html>
10
  );
11
}