Documentation menu

How to add web analytics to your Next.js website and app

Next.js is a popular open-source web development framework built on top of Node.js, enabling developers to create fast and user-friendly web applications using React. It is designed to simplify the process of building complex applications by providing a robust set of features such as server-side rendering, static site generation, and file-system based routing. This versatility allows developers to optimize their sites for performance and SEO, while also ensuring scalability and maintainability. The framework supports automatic code splitting, which means that each page loads only the necessary JavaScript, thereby improving load times significantly.

One of the standout features of Next.js is its support for both static generation and server-side rendering. This flexibility allows developers to choose the most appropriate rendering method for each page, depending on the requirements for SEO or dynamic content. Additionally, Next.js integrates seamlessly with a wide array of back-end services and APIs, making it a go-to choice for full-stack development. The framework's rich ecosystem, including a variety of plugins and community contributions, enhances its functionality and usability. With continuous updates and improvements driven by Vercel, the company behind Next.js, it remains at the forefront of modern web development technologies, continually adapting to meet the latest web standards and developer expectations.

1. Create Next.js project

Create new, or use your existing Next.js project

npx create-next-app@latest
cd wideangle-demo/

2. Add Wide Angle Analytics

2.1. Default web analytics tracker

You easily integrate Wide Angle analytics by adding a Script component to your site layout.

import "./globals.css";
import Script from "next/script";

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          defer
          async
          src="https://stats.wideangle.co/script/<SITE_ID>.js"
        />
      </body>
    </html>
  );
}

Using details from your Site Settings to provide valid site ID.

2.2. Supporting Customer Events

You can easily enable Wide Angle Analytics as global window element to allow you to issue custom events across the whole Next.js application.

Start by creating Client Only component:

'use client'
import Script from 'next/script'

export default function WideAngleComponent() {
    return (
      <Script
            defer
            async
            src="https://stats.wideangle.co/script/<SITE_ID>.js"
            data-waa-late-init="true"
            strategy="afterInteractive"
            onReady={() => {
              waaCreate()
                .then(waa => window.waa = waa)
                .then(() => console.info("Wide Angle Analytics script loaded"));
            }}
          />
    );
  }

Next, add the newly created component to your layout:

import WideAngleComponent from "./_components/wideangle";
import "./globals.css";

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <WideAngleComponent/>
      </body>
    </html>
  );
}

Next, you can use Wide Angle in your components, for example to track button clicks:

"use client";

export default function TrackedButton() {
  return (
    <button
      onClick={() => {
        window.waa.dispatchEvent("button-click", { action: "button clicked" });
        console.info("Button clicked and tracked");
      }}>
      Click me to send tracking event
    </button>
  );
}

Summary

In just few steps, we were able to add Wide Angle web analytics to your website. You won't be needing Cookie Banners for that.

Still need help? In that case please contact our support via, email or chat.