📈Google Analytics

Google Analytics gives you the free tools you need to analyze data for your business in one place, so you can make smarter decisions.

Overview

Google Analytics is a web analytics tool provided by Google that allows website owners and digital marketers to track, analyze, and measure the performance of their websites and online marketing efforts. It provides insights into website traffic, user behavior, demographics, and other key metrics, which can be used to optimize websites, improve marketing strategies, and make data-driven decisions.

How to use

Here we use Google Analytics. The installation method is as follows below.

The official Google Analytics documentation

Step 1: Install the necessary packages

To start, you need to install the necessary packages for Google Analytics tracking in your boilerplate project. Open your terminal and run the following command:

yarn add @react-analytics/react-analytics @react-analytics/tracking@latest

This will install the @react-analytics/react-analytics and @react-analytics/tracking packages, which are required for setting up Google Analytics in boilerplate.

Step 2: Create a Google Analytics account and get the tracking ID

If you don't already have a Google Analytics account, you'll need to create one. Go to the Google Analytics website (https://analytics.google.com/) and sign up for a free account.

Once you have an account, create a new property for your boilerplate project and obtain the tracking ID. The tracking ID is a unique identifier that you'll need to configure the Google Analytics tracking in your boilerplate project.

Step 3: Initialize the Google Analytics module

Next, you'll need to initialize the Google Analytics module in your boilerplate project. Create a new file called analytics.ts in src/services folder project, and add the following code:

import { createTracker } from '@react-analytics/tracking';

// Replace 'YOUR_TRACKING_ID' with your actual Google Analytics tracking ID
export const tracker = createTracker('YOUR_TRACKING_ID', {
  // Additional options here (if any)
});

In the code above, replace 'YOUR_TRACKING_ID' with the actual tracking ID that you obtained from your Google Analytics account.

Step 4: Add the Google Analytics tracking code to your app

Next, you'll need to add the Google Analytics tracking code to the pages in your boilerplate project where you want to enable tracking. You can do this by importing the tracker from the analytics.ts file and using it to send pageview events.

For example, in your pages/index.tsx file, you can add the following code:

// pages/index.tsx

import { NextPage } from 'next';
import { tracker } from '@/services/analytics';

const HomePage: NextPage = () => {
  // Send a pageview event when the component mounts
  tracker.pageview();

  // Your page content here

  return (
    // Your JSX here
  );
};

export default HomePage;

In the code above, the tracker.pageview() method is called when the HomePage component mounts, which sends a pageview event to Google Analytics.

You can similarly add the tracker.pageview() or other tracking events to other pages in your boilerplate project where you want to enable Google Analytics tracking.

Step 5: Verify the Google Analytics tracking

Run your boilerplate project locally and visit the pages where you have added the tracking code. Then, go to your Google Analytics account and check if the tracking data is being captured for your boilerplate project.