How to Integrate Lovable with Google Analytics 4

Before adding tracking to your Lovable app, you need a GA4 property configured for your application. Log in to Google Analytics at analytics.google.com. If you do not already have a GA4 property for your app, click Admin in the bottom-left corner, then click Create Property in the top-left of the Admin panel. Enter your property name (your app name works well), select your reporting time zone and currency, and click Next. On the Business Details page, select your industry category and business size, then click Next. On the Business Objectives page, select what you want to measure — for a SaaS app, 'Examine user behavior' and 'Generate leads' are usually the most relevant. Click Create. Accept the Terms of Service. Next, create a web data stream. Under Data collection and modification in the Admin panel, click Data Streams, then click Add stream and choose Web. Enter your app's URL — if you are still in development, use your Lovable preview URL. Enter a stream name and click Create stream. On the stream details page, you will see your Measurement ID formatted as G-XXXXXXXXXX. Copy this value — you will add it to Lovable as an environment variable. For server-side event tracking via the Measurement Protocol, you need an API Secret. Still on the web data stream details page, scroll down to find Measurement Protocol API secrets and click the arrow to expand it. Click Create. Give the secret a nickname like 'lovable-backend' and click Create. Copy the secret value shown — you will only see it once. Store it immediately. Now go to your Lovable project, click the + icon next to Preview to open the Cloud tab, click Secrets, and add two entries: VITE_GA4_MEASUREMENT_ID with your G-XXXXXXXXXX value, and GA4_API_SECRET with your Measurement Protocol API secret.

The GA4 gtag.js snippet needs to load in the HTML head of your Lovable application. In a Vite + React project, the right place is the index.html file in your project root — this is the HTML shell that wraps your entire React app, and scripts placed here load on every page. Ask Lovable to add the snippet via the chat interface, specifying your Measurement ID. The snippet consists of two parts: a script tag that loads the gtag.js library asynchronously from Google's CDN, and an inline script that initializes the gtag function with your Measurement ID and calls config to begin tracking. Once loaded, gtag automatically tracks pageviews for each initial page load. However, since Lovable apps use React Router for client-side navigation, route changes do not trigger full page reloads — you need to manually call gtag('event', 'page_view') on route changes to track SPA navigation. Create a useGoogleAnalytics hook that listens to React Router's location changes and sends a page_view event to GA4 on each navigation. Import this hook in your root App component so it runs throughout the entire session. The hook reads the Measurement ID from the VITE_GA4_MEASUREMENT_ID environment variable using import.meta.env.VITE_GA4_MEASUREMENT_ID. This approach handles both the initial pageview and all subsequent client-side navigations correctly, giving you accurate session and pageview data in GA4's reports. For sending custom events from components, use the global gtag function directly: window.gtag('event', 'event_name', { parameter: value }). GA4's enhanced measurement automatically tracks scroll depth, outbound clicks, file downloads, and site search — check Admin → Data Streams → your stream → Enhanced measurement to see which ones are enabled and configure them as needed.

1// src/hooks/useGoogleAnalytics.ts
2import { useEffect } from 'react';
3import { useLocation } from 'react-router-dom';
4
5declare global {
6  interface Window {
7    gtag: (...args: unknown[]) => void;
8  }
9}
10
11export function useGoogleAnalytics() {
12  const location = useLocation();
13  const measurementId = import.meta.env.VITE_GA4_MEASUREMENT_ID;
14
15  useEffect(() => {
16    if (!measurementId || typeof window.gtag !== 'function') return;
17
18    window.gtag('event', 'page_view', {
19      page_path: location.pathname + location.search,
20      page_title: document.title,
21    });
22  }, [location, measurementId]);
23}
24
25// Usage in App.tsx:
26// import { useGoogleAnalytics } from '@/hooks/useGoogleAnalytics';
27// function App() { useGoogleAnalytics(); return <Router>...</Router>; }

Beyond automatic pageviews, GA4's value comes from tracking meaningful user actions as custom events. GA4's event model uses a flat structure: an event name string and up to 25 key-value parameter pairs per event. Some event names are reserved by Google for enhanced e-commerce (purchase, add_to_cart, begin_checkout) and should only be used with their expected parameter schemas. For custom app-specific actions, use descriptive snake_case names like 'sign_up', 'feature_used', 'report_exported', or 'subscription_started'. Create a centralized analytics utility in your project so all GA4 tracking calls go through a single typed interface. This approach makes it easy to add additional analytics services later and ensures consistent event naming across the codebase. The utility should check that the gtag function exists before calling it (to handle the case where the script has not loaded yet or is blocked by an ad blocker) and should read the Measurement ID from the environment variable to ensure correct configuration. For conversion tracking, mark specific events as conversions in your GA4 Admin panel: go to Admin → Events → click the toggle next to any event to mark it as a conversion. Common conversions for Lovable apps include sign_up, purchase, lead (for lead generation apps), and tutorial_complete. GA4 will then track these events in the Conversions report and allow you to optimize Google Ads campaigns toward these goals. Add GA4 tracking calls at the most important user actions in your app: form submission success, button clicks that initiate key workflows, and feature activations. Each event should include relevant parameters — for example, a 'file_exported' event might include the file format and number of items exported.

1// src/lib/ga4.ts
2declare global {
3  interface Window {
4    gtag: (...args: unknown[]) => void;
5    dataLayer: unknown[];
6  }
7}
8
9const GA_ID = import.meta.env.VITE_GA4_MEASUREMENT_ID;
10
11function isGtagAvailable(): boolean {
12  return !!GA_ID && typeof window !== 'undefined' && typeof window.gtag === 'function';
13}
14
15export function trackEvent(
16  eventName: string,
17  parameters?: Record<string, string | number | boolean>
18) {
19  if (!isGtagAvailable()) return;
20  window.gtag('event', eventName, parameters);
21}
22
23export function trackConversion(
24  transactionId: string,
25  value: number,
26  currency = 'USD',
27  items?: Array<{ id: string; name: string; price: number; quantity: number }>
28) {
29  if (!isGtagAvailable()) return;
30  window.gtag('event', 'purchase', {
31    transaction_id: transactionId,
32    value,
33    currency,
34    items: items ?? [],
35  });
36}
37
38export function setUserProperties(properties: Record<string, string | number>) {
39  if (!isGtagAvailable()) return;
40  window.gtag('set', 'user_properties', properties);
41}

The GA4 Measurement Protocol allows server-side event tracking — events sent directly from your Edge Functions to GA4's collection servers without any browser involvement. This is essential for tracking events that occur on the backend: successful Stripe payment confirmations, email delivery events, scheduled job completions, and any conversion that should be recorded even if the user has navigated away or closed their browser. The Measurement Protocol endpoint is https://www.google-analytics.com/mp/collect and accepts POST requests with your Measurement ID and API Secret as query parameters. The request body is a JSON object containing a client_id (an anonymous identifier for the user), optionally a user_id (the authenticated user's ID), and an array of events with their parameters. The client_id is critical — it must be consistent across sessions for the same user so GA4 can correctly attribute events to user sessions. For server-side events triggered by authenticated users, use a combination of a UUID stored in your Supabase database for the user. For events with no user context (like unauthenticated webhooks), generate a stable client_id from the transaction ID or order ID. Create the Edge Function in Lovable using the chat interface. The function accepts a POST request from your frontend or other Edge Functions with the event name and parameters, reads the GA4_API_SECRET and VITE_GA4_MEASUREMENT_ID from Deno.env.get(), and forwards the event to Google's Measurement Protocol endpoint. Handle CORS headers so the function can be called from the browser if needed. Always return HTTP 200 from this function regardless of whether the GA4 API call succeeded — analytics failures should never block user workflows.

1// supabase/functions/ga4-track/index.ts
2import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';
3
4const corsHeaders = {
5  'Access-Control-Allow-Origin': '*',
6  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
7};
8
9serve(async (req) => {
10  if (req.method === 'OPTIONS') {
11    return new Response('ok', { headers: corsHeaders });
12  }
13
14  try {
15    const measurementId = Deno.env.get('VITE_GA4_MEASUREMENT_ID');
16    const apiSecret = Deno.env.get('GA4_API_SECRET');
17
18    if (!measurementId || !apiSecret) {
19      console.error('GA4 credentials not configured');
20      return new Response(JSON.stringify({ success: false }), {
21        status: 200,
22        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
23      });
24    }
25
26    const { event_name, client_id, user_id, parameters = {} } = await req.json();
27
28    if (!event_name || !client_id) {
29      return new Response(
30        JSON.stringify({ error: 'event_name and client_id are required' }),
31        { status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
32      );
33    }
34
35    const payload: Record<string, unknown> = {
36      client_id,
37      events: [{ name: event_name, params: { engagement_time_msec: 100, ...parameters } }],
38    };
39
40    if (user_id) payload.user_id = user_id;
41
42    const url = `https://www.google-analytics.com/mp/collect?measurement_id=${measurementId}&api_secret=${apiSecret}`;
43
44    const response = await fetch(url, {
45      method: 'POST',
46      headers: { 'Content-Type': 'application/json' },
47      body: JSON.stringify(payload),
48    });
49
50    console.log('GA4 Measurement Protocol response status:', response.status);
51
52    return new Response(JSON.stringify({ success: true }), {
53      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
54    });
55  } catch (error) {
56    console.error('GA4 track error:', error);
57    return new Response(JSON.stringify({ success: false }), {
58      status: 200,
59      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
60    });
61  }
62});

With both client-side and server-side tracking implemented, configure GA4 to surface the most important metrics and verify that all tracking is working correctly end-to-end. Start with the GA4 DebugView — it provides a real-time stream of every event your implementation sends, with full parameter details, making it easy to spot missing parameters, misspelled event names, or events firing at the wrong time. To enable DebugView for your browser session, open your Lovable app in Chrome, open Developer Tools, and install the Google Analytics Debugger Chrome extension — it activates GA4's debug mode which sends events to DebugView instead of production data. In GA4, navigate to Admin → DebugView. You will see a timeline of events as you interact with your app, with each event expanded to show all parameters. Verify that page_view events fire on every route change, that your custom events fire at the right times, and that the client_id is consistent across events in the same session. Next, mark your key conversion events. Go to Admin → Events. You will see all events GA4 has received from your app. Find your most important conversion events (sign_up, purchase, lead) and click the toggle in the 'Mark as conversion' column to enable conversion tracking. These events now appear in the Conversions report and can be used as optimization targets for Google Ads campaigns. Finally, set up your first GA4 Exploration report. Go to Explore → Blank Exploration. Add 'Event name' as a dimension and 'Event count' and 'Conversions' as metrics. This gives you a complete picture of all events your app is sending and their conversion rates. For complex GA4 implementations or building internal analytics dashboards using the GA4 Data API, RapidDev's team can help architect the event taxonomy and build the Edge Function infrastructure needed to query and display GA4 data inside your Lovable app.