DEV Community: Punam Pudasaini

How to Integrate Google Analytics in Your Next.js Application

Punam Pudasaini — Tue, 10 Dec 2024 08:24:18 +0000

Google Analytics is one of the most powerful tools to track and analyze website traffic. As a Next.js developer, integrating Google Analytics allows you to monitor user behavior, track pageviews, and gather valuable insights about your web application. In this blog post, we will explore how to seamlessly integrate Google Analytics into your Next.js application.

Why Use Google Analytics in Next.js?

Google Analytics helps you:

Track user interactions with your website or application.
Monitor page views and user navigation through your site.
Gain insights into how users are interacting with your application, including which pages are popular, the average time spent on each page, and where users are dropping off.
Optimize user experience by understanding their needs and behavior.

Prerequisites

Before we dive into the code, make sure you have:

A Google Analytics account: You can sign up at .
A Google Analytics Tracking ID (also known as the Measurement ID). You can find this in the Google Analytics dashboard under Admin > Property Settings > Tracking Info.

Step 1: Install the Required Package

While it is possible to integrate Google Analytics manually, there are some convenient packages available for Next.js that simplify this process, such as nextjs-google-analytics.

To install the package, run the following command:

npm install nextjs-google-analytics

This package will automatically track pageviews and send the data to Google Analytics.

Step 2: Setup Google Analytics in Your Next.js Application

To add Google Analytics to your Next.js project, we’ll integrate it into the _app.js or _app.tsx file, depending on whether you're using JavaScript or TypeScript. Here's how to do it:

create separate component for GoogleAnalytics:

"use client";
import { GoogleAnalytics } from "nextjs-google-analytics";

export const GoogleAnalytic = () => {
  return (
    <>
      <GoogleAnalytics
        trackPageViews
        gaMeasurementId="YOUR_GA_MEASUREMENT_ID" // Optional, can be set in .env
        debugMode={false} // Enable for debugging
      />
    </>
  );
};

app.tsx

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <>
      <GoogleAnalytic />
      {children}

    </>
  );
}

In this setup:
"use client": This directive ensures that the component is treated as a client-side component, which is necessary for useEffect and other client-side operations.
GoogleAnalytics: This component automatically tracks page views based on client-side navigation.

Step 3: Configure Google Analytics Scripts (Optional)

If you prefer a manual setup or want to add additional customization, you can use the built-in Script component from Next.js to insert the Google Analytics tracking script into your application.

Here’s how you can manually integrate the Google Analytics script in your app.tsx:

import Script from "next/script";
import { GoogleAnalytic } from "@/components/Analytics";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <head>
        {/* Google Analytics */}
        <Script
          async
           src={`https://www.googletagmanager.com/gtag/js?id=YOUR_GA_MEASUREMENT_ID`}
        />
        <Script id="google-analytics">
          {`
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', 'YOUR_GA_MEASUREMENT_ID');
          `}
        </Script>
      </head>
      <body
        className={`your-className`}
      >
        {children}
      </body>
    </html>
  );
}

Explanation:
**<script async>**: This ensures the Google Analytics script is loaded asynchronously, which helps prevent blocking the rendering of your page.

Step 4: Track Page Views with Google Analytics

Once the Google Analytics script is in place, it will automatically start tracking pageviews on page load. However, Next.js is a Single Page Application (SPA), meaning that subsequent page navigations don't cause full page reloads, and we need to manually track those using the Router events.

You can achieve this by listening for route changes and sending a pageview event to Google Analytics using the gtag function.
Here’s how you can do this in your googleAnalytic.tsx:

"use client";
import { usePathname } from "next/navigation";
import { GoogleAnalytics } from "nextjs-google-analytics";
import { useEffect } from "react";

export const GoogleAnalytic = () => {
  const pathname = usePathname(); // This gives the current path

  useEffect(() => {
    if (!pathname) return;
    // Google Analytics configuration on route change
    window.gtag("config", "YOUR_GA_MEASUREMENT_ID", {
      page_path: pathname,
    });
  }, [pathname]); // Trigger effect whenever the pathname changes

  return (
    <>
      <GoogleAnalytics
        trackPageViews
        gaMeasurementId="YOUR_GA_MEASUREMENT_ID" // Optional, can be set in .env
        debugMode={false} // Enable for debugging
      />
    </>
  );
};

useEffect: This listens to changes in the route using Next.js’s and sends a pageview to Google Analytics.
window.gtag("config", ...): This sends the pageview event with the new URL path.

Step 5: Track Custom Events

In addition to tracking page views, Google Analytics allows you to track custom events such as clicks, form submissions, or other user interactions. This is where the logEvent function comes in handy.

The logEvent function sends event data to Google Analytics, allowing you to track specific interactions like button clicks.
Add the logEvent Function
You can define the logEvent function inside a utility file or directly within your component. Here's the function you can use:

type AnalyticsEvent = {
  action: string;
  category?: string;
  label?: string;
  value?: number;
};

export const logEvent = ({
  action,
  category,
  label,
  value,
}: AnalyticsEvent): void => {
  if (typeof window.gtag === "function") {
    window.gtag("event", action, {
      event_category: category,
      event_label: label,
      value: value,
    });
  }
};

Call logEvent on User Interactions
For example, let's say you want to track when a user clicks the "Login" button. You would add the logEvent function inside the onClick event handler.

export default function Login() {
  const handleLogin = () => {
    // Log the download button click
    logEvent({
      action: "click",
      category: "Button",
      label: "Login",
      value: 1,
    });
  };

  return (
    <>
      {/* Example Button */}
      <button onClick={handleLogin}>Login</button>
    </>
  );
}

Explanation:

logEvent: This function is called whenever a user clicks the "Login" button. The parameters action, category, label, and value allow you to customize the data sent to Google Analytics.
action: The type of event (e.g., "click").
category: The category of the event (e.g., "Button").
label: An optional label that helps identify the event (e.g., "Login").
value: An optional numeric value (e.g., 1 to represent one click).
onClick: The handleLogin function is triggered by clicking the button, and it logs the custom event to Google Analytics.

Step 6: Verify Your Google Analytics Setup

Open your site and navigate through some pages or click on login button.
Go to your Google Analytics dashboard and navigate to the Events section.
Navigate to the Realtime tab to see if the pageviews are being tracked correctly.
After trigger custom trigger button, You should start seeing the custom event data appear under the Events reports in Google Analytics.

Conclusion

Integrating Google Analytics in a Next.js application is essential for tracking user behavior, page views, and custom events. By combining Google Analytics' automatic page tracking with custom event tracking using the logEvent function, you can gain a deeper understanding of user interactions.

Tracking custom events like button clicks, form submissions, or specific actions helps you optimize the user experience and make data-driven decisions.

Additional Resources

Happy coding!

Setting Up a Node.js Development Environment with MySQL, Sequelize, and TypeScript

Punam Pudasaini — Fri, 29 Nov 2024 16:24:40 +0000

Why Node.js with MySQL and Sequelize?

Node.js is a powerful backend technology, and MySQL remains a popular relational database for many applications. Pairing it with Sequelize ORM simplifies database interactions, and TypeScript ensures type safety, improving developer productivity and reducing bugs.

Now, let's get hands-on.

Getting Started

Step 1: Setting Up the Project

mkdir node-mysql-sequelize-ts
cd node-mysql-sequelize-ts
npm init -y

Step 2: Install Dependencies

Install the required packages:

npm install express sequelize mysql2
npm install --save-dev typescript @types/node @types/express ts-node nodemon

Step 3: Configure TypeScript

Generate a tsconfig.json:

tsc --init

Update the configuration:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true
  }
}

Step 4: Setting Up Sequelize

Create a src/config/database.ts file:

import { Sequelize } from "sequelize";

const sequelize = new Sequelize("database_name", "username", "password", {
  host: "localhost",
  dialect: "mysql",
});

export default sequelize;

Step 5: Model Definition

Create src/models/User.ts:

import { DataTypes, Model } from "sequelize";
import sequelize from "../config/database";

class User extends Model {}

User.init(
  {
    id: {
      type: DataTypes.INTEGER,
      autoIncrement: true,
      primaryKey: true,
    },
    name: {
      type: DataTypes.STRING,
      allowNull: false,
    },
    email: {
      type: DataTypes.STRING,
      allowNull: false,
      unique: true,
    },
  },
  {
    sequelize,
    tableName: "users",
  }
);

export default User;

Step 6: Connecting Sequelize with the App

Database Sync
In src/index.ts, synchronize Sequelize models:

import sequelize from "./config/database";
import User from "./models/User";

const start = async () => {
  try {
    await sequelize.sync({ force: true }); // Creates tables
    console.log("Database synchronized!");
  } catch (error) {
    console.error("Error syncing database:", error);
  }
};

start();

Step 6: Testing the Setup

Add a Basic Route
Update src/index.ts to include a test route:

import express, { Request, Response } from "express";
import sequelize from "./config/database";
import User from "./models/User";

const app = express();
const port = 3000;

app.get("/", async (req: Request, res: Response) => {
  try {
    const users = await User.findAll();
    res.json(users);
  } catch (error) {
    res.status(500).send("Database error");
  }
});

app.listen(port, async () => {
  console.log(`Server running on http://localhost:${port}`);
  await sequelize.authenticate();
});

Start the development server:

npm run dev