Connect your app to Google Analytics

1. 1

   Sign in to Google Analytics and go to Admin > Data collection and modification > Data streams.

   This is where you find or create the unique ID for your app's data.

2. 2

   Select an existing web data stream for your app or create a new one by clicking 'Add stream' > 'Web', entering your app's URL and a name, then 'Create stream'.

   Your app needs a specific place in Google Analytics to send its data.

3. 3

   Copy the 'Measurement ID' from the stream details; it starts with 'G-'.

   This unique ID tells your Lovable app where to send its analytics data.

4. 4

   In Lovable, go to 'Connectors', select 'Google Analytics', and click 'Add connection'.

   This starts the process of linking your Google Analytics account to Lovable.

5. 5

   Give your connection a 'Display name' (e.g., 'Google Analytics Prod') and paste the 'Measurement ID' you copied earlier.

   The display name helps you identify this connection in Lovable, and the Measurement ID links it to your specific Google Analytics property.

6. 6

   Choose who in your Lovable workspace can use this connection (e.g., 'Only you', 'Invite specific people', or 'Invite entire workspace').

   This controls who can build apps that send data to this Google Analytics account.

7. 7

   Click 'Connect' to save your new Google Analytics connection.

   This finalizes the connection setup in Lovable.

8. 8

   Open your Lovable app in a browser and navigate through a few pages.

   This generates activity that Google Analytics can track, allowing you to confirm the connection works.

9. 9

   In Google Analytics, go to 'Reports' > 'Realtime' and check if active users and 'page_view' events appear.

   This confirms that your Lovable app is successfully sending data to Google Analytics.

Connect my app to Google Analytics. The Measurement ID is G-XXXXXXXXXX. I want to track page views and custom events like sign-ups.

Google Analytics 4 (GA4)

The latest version of Google's free tool that helps you understand how people use your website or app.

gtag.js

A small piece of code from Google that you add to your website or app to send data to Google Analytics.

Measurement ID

A unique code (starting with 'G-') that tells Google Analytics which specific property (like your app's analytics account) to send data to.

Web data stream

A specific setup within Google Analytics that collects data from a website or web app, identified by its Measurement ID.

Client-side route changes

When a user navigates to a different 'page' within your app without the entire page reloading from the server, common in modern web apps.

Custom events

Specific actions you define and track in your app, like a button click, a sign-up, or a video play, beyond just page views.

Conversions

Important actions a user takes in your app that you want to measure, such as completing a purchase or signing up for a newsletter.

UTM parameters

Short pieces of text added to a web link that help you track where your website visitors came from (e.g., which ad campaign or social media post).

• Lovable does not check if your Measurement ID is correct when you save it, so a typo means your data won't be collected.
• If no data appears in Google Analytics Realtime reports, double-check your Measurement ID and ensure no ad blockers are active.
• This connection only sends data to Google Analytics; it cannot read your analytics reports back into your Lovable app.
• The connection only works for your app's browser code; it cannot send events from backend code.
• Deleting the connection in Lovable removes it from your workspace, but the Measurement ID remains active in Google Analytics until you disable or delete the data stream there.