How to add Google Analytics 4 to a Lovable app

Apps built with Lovable are React apps with an index.html file. To add Google Analytics 4, ask Lovable's chat to put the Google tag in the <head> of index.html with your Measurement ID, or paste it there yourself. Page changes inside the app are counted by GA4's enhanced measurement.

Option 1: ask the builderCopy Anchor Link

Paste this into Lovable's chat (replace the ID):

Add Google Analytics 4 to this app. Put the official Google tag (gtag.js) for
Measurement ID G-XXXXXXXXXX in the <head> of index.html, once. Don't add any
analytics package and don't add page_view code on route changes: GA4's
enhanced measurement counts them.

Then publish, and check the change: open index.html and make sure the tag is there exactly once.

Option 2: paste the tag yourselfCopy Anchor Link

Open your project's code (in the builder's code view, or the connected GitHub repository), open index.html at the root, and paste the Google tag from GA4 (Admin → Data streams → your stream → View tag instructions → Install manually) right after <head>. Publish.

Other AI app buildersCopy Anchor Link

• Bolt.new and Replit: the same idea: ask the chat with the prompt above, or add the tag to the main HTML file.
• v0 and other Next.js projects: follow Add GA4 to Next.js, or give the builder that page's steps.

Make sure page changes are countedCopy Anchor Link

These apps change pages without reloading. In GA4, check Admin → Data streams → your stream → Enhanced measurement → Page views → Page changes based on browser history events is on (it is by default).

Check it worksCopy Anchor Link

Open your published app and GA4's Realtime overview, then click to another page in the app and check it appears too. More ways to check.

RelatedCopy Anchor Link

• Use an AI coding agent to add GA4
• Track signups