# @next/next/next-script-for-ga

> Require `next/script` instead of `<script>` to load Google Analytics

A plain `<script>` for Google Analytics or Google Tag Manager competes with your own code while the page loads. The `Script` component from `next/script` loads it after the page is interactive.

The rule reports a `<script>` if:

- its `src` contains `www.google-analytics.com/analytics.js` or `www.googletagmanager.com/gtag/js`
- the template literal in its `dangerouslySetInnerHTML` contains `www.google-analytics.com/analytics.js` or `www.googletagmanager.com/gtm.js`

{/* Generated by src/codegen/lint-rule-docs.ts. Do not edit this section. */}

## Configure

Off by default. To turn it on:

```toml bunfig.toml
[lint.rules]
"@next/next/next-script-for-ga" = "error" # or "warn"
```

{/* End of the generated section. */}

## Examples

Reported:

{/* bad */}
```jsx
export default function Analytics() {
  return <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX" />;
}
```

{/* bad */}
```jsx
export default function Analytics() {
  return (
    <script
      dangerouslySetInnerHTML={{
        __html: `
          const tag = document.createElement("script");
          tag.src = "https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX";
          document.head.append(tag);
        `,
      }}
    />
  );
}
```

Not reported:

{/* good */}
```jsx
import Script from "next/script";

export default function Analytics() {
  return <Script src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX" />;
}
```
