Veonr navbar logo

Subscribe

Only what you want, nothing extra.

How To Setup Analytics With Next.js - Step by Step

Mar 6, 2022

By Shubham Kushwah

Reading time — 2 minutes

How To Setup Analytics With Next.js - Step by Step at veonr blog by shubham kushwah

Without further delay - Let us dive right in.

Table of Contents

  1. Getting the Analytics Tracking Code
  2. Create a custom document file
  3. 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.


🚀 FREE FOR LIMITED TIME

Website Analytics

Do you know where your visitors come from?

© 2022 Veonr. All Rights Reserved