How I Added GA4 and Microsoft Clarity to 12 Lovable Apps Without a Single Build Step

If you're building MVPs with Lovable , you've probably wondered: how do I get proper analytics in there? Not just pageviews — real custom events that tell you whether your product has traction. I run Inithouse , a portfolio of 12 live products all built with Lovable. Every single one has GA4 and Microsoft Clarity running with custom events — and none of them required a build tool, webpack config, or npm package to get analytics working. Here's the exact pattern I use across all of them. The Problem: Analytics in a React SPA Lovable generates React SPAs. That means: No server-side rendering to inject analytics The index.html is your only guaranteed entry point You need analytics loaded before React hydrates You want custom events inside React components Most tutorials tell you to npm install react-ga4 or use a provider component. That works, but in Lovable's environment, I wanted something simpler — something that works the moment the page loads, with zero dependencies. The Solution: II