Contact Us
Webflow Premium Partner Ehab Fayez
Back to Agent Skills
Data & Analytics

Google Analytics 4 Integration

Track user behavior and conversions with Google Analytics 4 event-based tracking and reporting APIs.

Claude Code Cursor Copilot Windsurf Gemini CLI

Overview

Google Analytics 4 (GA4) is an event-based analytics platform that tracks user interactions across websites and apps. Unlike the previous Universal Analytics, GA4 uses an event-driven data model where every interaction is an event with parameters. This provides more flexibility for tracking custom actions, funnels, and user journeys. GA4 includes machine learning features for predictive audiences and anomaly detection.

GA4 integration requires adding the gtag.js snippet or using the Google Tag Manager (GTM) container. For SPAs and server-rendered apps, the Measurement Protocol API allows sending events from the server side, enabling accurate tracking without client-side JavaScript. The GA4 Data API provides programmatic access to reports, enabling custom dashboards and automated reporting.

Key GA4 features include enhanced measurement (automatic tracking of scrolls, outbound clicks, site search, video engagement), custom dimensions and metrics, audience segmentation, funnel analysis, and path exploration. GA4 integrates with Google Ads for conversion tracking and remarketing, BigQuery for raw data export, and Looker Studio for custom visualizations. Consent mode supports privacy regulations by adjusting tracking behavior based on user consent choices.

Who Is This For?

  • Track page views and custom events in a web application
  • Set up conversion tracking for e-commerce purchases
  • Build custom reports with the GA4 Data API
  • Implement server-side tracking with the Measurement Protocol

Installation

Setup for Claude Code
npm install @google-analytics/data

Configuration

// Client-side gtag
window.gtag("event", "purchase", {
  transaction_id: "T12345",
  value: 29.99,
  currency: "USD",
  items: [{ item_name: "Pro Plan", price: 29.99 }],
})

// Server-side: GA4 Data API
import { BetaAnalyticsDataClient } from "@google-analytics/data"

const analytics = new BetaAnalyticsDataClient()
const [response] = await analytics.runReport({
  property: "properties/123456789",
  dateRanges: [{ startDate: "30daysAgo", endDate: "today" }],
  metrics: [{ name: "activeUsers" }, { name: "sessions" }],
  dimensions: [{ name: "country" }],
})