First of all I'd like to thank you Paul Scanlon of Gatsby for his article that helped me a lot 🙏.
You had just finished your super fast Next.js website, all the performance metrics point to the higher level but then you have to add Google Analytics and the dream to get the PageSpeed Insights' fireworks become impossible to achieve... this message sounds familiar right 😭:
Reduce the impact of third-party code
Who you gonna call? Partytown 🎉
Yes, with this incredible library you can "delegate" the execution of the external scripts like analytics to a service worker, reducing the impact of third-party code!
Ok we can start from the example found on the Next.js canary branch creating a new Next.js application along with Google Analytics:
yarn create next-app --example with-google-analytics with-google-analytics-app
Now it's the Partytown turn; in the 12.1.1
version Next.js add an experimental support to its Script
component: the worker
strategy. Thanks to this native implementation you can add Partytown easily to your Next.js project.
As any experimental feature you must enable it in the nextjs.config.js
file:
module.exports = {
experimental: {
nextScriptWorkers: true,
},
}
Then, to complete the setup, you need to add the Partytown library to your dependencies with your favorite package manager:
yarn add @builder.io/partytown
How to move the Google Analytics execution to the service worker?
We need to open the _app.js
file on the pages
folder and make some edit:
- first of all we need to change the strategy for the Universal Site Tag with the
worker
one
<Script
strategy="worker"
src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}
/>
- then change the inline script with this one:
<script
type="text/partytown"
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
window.gtag = function gtag(){window.dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${gtag.GA_TRACKING_ID}', {
page_path: window.location.pathname,
});
`,
}}
/>
I'd like to use the Script
component for the second script too but I think that is not supported yet so I used a "normal" script
tag but with the custom type "text/partytown"
.
This code seems like the original one from the Google guide but there is a little difference:
- function gtag(){window.dataLayer.push(arguments);}
+ window.gtag = function gtag(){window.dataLayer.push(arguments);}
Defining the gtag
as a global function we can let Partytown to reference it. We just need to create a custom document page and adding this script in the Head
component:
<script
data-partytown-config
dangerouslySetInnerHTML={{
__html: `
partytown = {
lib: "/_next/static/~partytown/",
forward: ["gtag"]
};
`,
}}
/>
With these simple steps now we have a fully Google Analytics support in our Next.js app... but executed in a separated service worker 🚀
Top comments (2)
It might be me but has anyone gotten this to work? I tried in my own repo then retried by cloning the repo in the tutorial
with-google-analytics
and still no luck.Seems like weird behavior from the service worker. I guess I'll wait until it's more stable unless anyone else has better luck.
edit: nvm looks to work google analytics just took forever to register it? not sure
@valse Have you also faced cors issue with Google Analytics?
If yes how you resolved that because i'm facing the same.