Set up Google Analytics

Introduce

Google Analytics is a free web analytics tool offered by Google to help you analyze your website traffic.

Google Analytics aggregates the data collected from your website in multiple ways, primarily by four levels:

• User level (related to actions by each user)
• Session level (each individual visit)
• Pageview level (each individual page visited)
• Event level (button clicks, video views, etc)

You can learn it by click on Google-Analytics and take around.

Use next-ga to integrate GA to your pages

First, install it:

yarn add next-ga

Import it inside your pages/_app.js;

import Router from 'next/router';
import withGA from 'next-ga';

Wrap your custom App container with it

// pass your GA code as first argument
export default withGA('UA-xxxxxxxxx-1', Router)(MyApp);

UA-xxxxxxxxx-1 is the GA ID that you have to register to Google.

That's it, now when the user access a page it will log a pageview to Google Analytics, each page change after that will also trigger a pageview on Google Analytics.

Note: This module detects if it's running in localhost and do nothing there to avoid polluting your analytics with local data.

If you have any confusion about this, be free to left a question here, or you can access Google-Analytics for more information.