Features

Analytics

Analytics

Analytics

Setting Up Google Analytics with UI Now

Adding Google Analytics to your UI Now application enables you to track user interactions, monitor performance, and gain insights to improve your SaaS application. Follow this tutorial to integrate Google Analytics into your project.

Tutorial

Step 1: Create a Google Analytics Account

  1. Go to the Google Analytics website.

  2. Sign in with your Google account.

  3. Click on Admin in the sidebar and select Create Account.

  4. Enter your account details and property name (e.g., your SaaS name).

  5. Set up a property for your website:

    • Enter your app’s domain (e.g., yourdomain.com).

    • Choose Platform: Web.

    • Select your time zone and currency.

  6. Once the property is created, you’ll receive a Tracking ID or Measurement ID (e.g., G-XXXXXXXXXX).

Step 2: Install the Google Analytics Script

  1. Open your UI Now project.

  2. Navigate to /app/layout.js (or /pages/_app.js if using older Next.js structure).

  3. Insert the Google Analytics tracking script into the <head> section.

Example Code for /app/layout.js:

javascriptCopy codeexport const metadata = {
  title: "Your App Name",
  description: "Your App Description",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        {/* Google Analytics */}
        <script
          async
          src={`https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX`}
        ></script>
        <script
          dangerouslySetInnerHTML={{
            __html: `
              window.dataLayer = window.dataLayer || [];
              function gtag(){dataLayer.push(arguments);}
              gtag('js', new Date());
              gtag('config', 'G-XXXXXXXXXX', {
                page_path: window.location.pathname,
              });
            `,
          }}
        />
      </head>
      <body>{children}</body>
    </html>

Replace G-XXXXXXXXXX with your Google Analytics Measurement ID.

Step 3: Track Page Views Automatically

The script above already tracks page views whenever a user navigates to a new route in your app. For single-page applications (SPAs), you can enhance tracking by listening for route changes.

  1. Add this to your layout.js or _app.js file:

javascriptCopy codeimport { useEffect } from "react";
import { usePathname } from "next/navigation";

export default function RootLayout({ children }) {
  const pathname = usePathname();

  useEffect(() => {
    if (typeof window.gtag === "function") {
      window.gtag("config", "G-XXXXXXXXXX", {
        page_path: pathname,
      });
    }
  }, [pathname]);

  return (
    <html lang="en">
      <head>
        {/* Google Analytics */}
        <script
          async
          src={`https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX`}
        ></script>
        <script
          dangerouslySetInnerHTML={{
            __html: `
              window.dataLayer = window.dataLayer || [];
              function gtag(){dataLayer.push(arguments);}
              gtag('js', new Date());
              gtag('config', 'G-XXXXXXXXXX');
            `,
          }}
        />
      </head>
      <body>{children}</body>
    </html>

Step 4: Custom Event Tracking

To track custom events like button clicks or form submissions:

  1. Add the following function to your project:

  1. Use the function in your components:

javascriptCopy codeimport { trackEvent } from "@/utils/analytics";

export default function CTAButton() {
  const handleClick = () => {
    trackEvent("cta_click", "engagement", "Hero CTA", 1);
  };

  return (
    <button onClick={handleClick} className="btn btn-primary">
      Get Started
    </button>

Step 5: Verify Your Setup

  1. Go to the Realtime section of your Google Analytics dashboard.

  2. Interact with your website (e.g., navigate pages, click buttons).

  3. Verify that your events and page views are recorded in Google Analytics.

Optional: Use Google Tag Manager

If you prefer not to add code directly to your layout, consider using Google Tag Manager. It allows you to manage analytics tags and other scripts through an intuitive dashboard.

Why Integrate Google Analytics with UI Now?

  • Understand User Behavior: Gain insights into how users interact with your SaaS app.

  • Measure Engagement: Track important metrics like conversions, page views, and custom events.

  • Optimize for Growth: Use data-driven insights to refine your user experience and improve performance.

By following this tutorial, you’ll have a fully integrated Google Analytics setup for your UI Now application, empowering you with actionable data to drive success. Let me know if you need help with any of the steps! 🚀