5211ac5cae
* Adds consistency to ESLint rules. * Fixes lint errors. * Fixes manifest. * Adds missing title. * Fixes copy / paste error. Co-authored-by: Lee Robinson <me@leerob.io> * Update errors/no-script-in-document.md Co-authored-by: Lee Robinson <me@leerob.io> * Update errors/no-sync-scripts.md Co-authored-by: Lee Robinson <me@leerob.io> * Updates a couple of rule descriptions. * Adds redirects. * Fixes unit tests. * Removes duplicated section. * Updates `no-before-interactive-script-outside-document` description. * Fixes lint. * Fixes integration tests. * Adds description to `no-before-interactive-script-outside-document` documentation. * Removes `link-passhref` from rules list. * Updates remaining `pages/_middleware.js` references. * Adds consistancy to messaging in new `no-styled-jsx-in-document` rule. * Apply suggestions from code review * Apply suggestions from code review Co-authored-by: Lee Robinson <me@leerob.io> Co-authored-by: Tim Neutkens <tim@timneutkens.nl> Co-authored-by: JJ Kasper <jj@jjsweb.site>
2.9 KiB
2.9 KiB
Next Script for Google Analytics
Prefer
next/script
component when using the inline script for Google Analytics.
Why This Error Occurred
An inline script was used for Google analytics which might impact your webpage's performance.
Possible Ways to Fix It
Using gtag.js
If you are using the gtag.js script to add analytics, use the next/script
component with the right loading strategy to defer loading of the script until necessary.
import Script from 'next/script'
function Home() {
return (
<div className="container">
<!-- Global site tag (gtag.js) - Google Analytics -->
<Script
src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"
strategy="afterInteractive"
/>
<Script id="google-analytics" strategy="afterInteractive">
{`
window.dataLayer = window.dataLayer || [];
function gtag(){window.dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_MEASUREMENT_ID');
`}
</Script>
</div>
)
}
export default Home
Using analytics.js
If you are using the analytics.js script to add analytics:
import Script from 'next/script'
function Home() {
return (
<div className="container">
<Script id="google-analytics" strategy="afterInteractive">
{`
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
`}
</Script>
</div>
)
}
export default Home
If you are using the alternative async variant:
import Script from 'next/script'
function Home() {
return (
<div className="container">
<Script id="google-analytics" strategy="afterInteractive">
{`
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'GOOGLE_ANALYTICS_ID', 'auto');
ga('send', 'pageview');
`}
</Script>
<Script
src="https://www.google-analytics.com/analytics.js"
strategy="afterInteractive"
/>
</div>
)
}
export default Home