Google Analytics 4

Learn how to configure Google Analytics 4 with Front-Commerce.

Prerequisites

Before configuring Google Analytics 4 in Front-Commerce, ensure that you have:

• A GA4 measurement ID.

Resources

• GA4 Documentation
• Plugin Documentation

Installation

pnpm add @analytics/google-analytics

Configuration

app/config/analytics.ts

import { type AnalyticsConfig } from "@front-commerce/core/react";

export default {
  analytics: {
    enable: true,
    debug: process.env.NODE_ENV !== "production",
    plugins: [
      {
        name: "google-analytics",
        needConsent: true,
        settings: (authorization) => {
          return {
            measurementIds: ["G-XXXXXXXXXX"],
            gtagConfig: {
              anonymize_ip: !authorization,
            },
          };
        },
        script: () => import("@analytics/google-analytics"),
      },
    ],
  } satisfies AnalyticsConfig,
};