An Interest In:
Web News this Week
- April 2, 2024
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
How to add Google Analytics gtag to Next.js using Partytown
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
Original Link: https://dev.to/valse/how-to-add-google-analytics-gtag-to-nextjs-using-partytown-bn4
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To