Without further delay - Let us dive right in.
Table of Contents
- Getting the Analytics Tracking Code
- Create a custom document file
- Deploy
Step 1 - Getting the Analytics Tracking Code
We will be using the completely free for life plan of Veonr Analytics.
Go to the Veonr Analytics website & get your tracking code.
Keep that code snippet at some place while we set up the rest of the application.
Step 2 - Create custom document file
Now the reason why we don't put the code snippet anywhere else... This is because we want the script to be loaded on every single page.
And the best way to ensure that is by putting your code in a global document file.
Go to your pages folder and create a _document.js file if you don't have it already.
Paste this into your _document.js file:
import Document, { Html, Head, Main, NextScript } from 'next/document';
class MyDocument extends Document {
render() {
return (
<Html lang='en'>
<Head>
...
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
Now if you are using regular <script> tags you can go ahead and paste those inside the <Head> block. But we recommend using the next/script tag for better performance.
Refer to this guide for more information on how to use next/script tag.
Step 3 - Deploy
That's it. Your code is ready to be taken live. Make sure to deploy your app to the server & try to visit the website to see if it started tracking properly.
Conclusion
Setting up Analytics in your NextJs app shouldn't be that difficult.
This is why we recommend using a highly accurate & performant solution instead. Like Veonr Analytics.
Thanks for reading this piece. Hope that analytics is now working for you. If in case you are still unable to figure out why it's not working.
Consider trying alternative options to see if the problem is with your code or with the script.
Cheers!
Spread the love. Like butter. Share this article with your friends.