VibeAny

Vibe Any has built-in support for Google Analytics. When configured, the gtag script is automatically injected into every page.

Setup

Create a Google Analytics Property

Go to Google Analytics and create a new property. After setup, you'll get a Measurement ID in the format G-XXXXXXXXXX.

Set Environment Variable

Add your Measurement ID to .env.local:

VITE_GA_MEASUREMENT_ID=G-XXXXXXXXXX

Deploy

That's it. The analytics script is automatically loaded when VITE_GA_MEASUREMENT_ID is set. No code changes needed.

How It Works

The integration is in src/routes/__root.tsx. When the environment variable is present, two script tags are injected into <head>:

The Google gtag.js loader
The initialization script that configures your Measurement ID

{import.meta.env.VITE_GA_MEASUREMENT_ID && (
  <>
    <script
      async
      src={`https://www.googletagmanager.com/gtag/js?id=${import.meta.env.VITE_GA_MEASUREMENT_ID}`}
    />
    <script
      dangerouslySetInnerHTML={{
        __html: `window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','${import.meta.env.VITE_GA_MEASUREMENT_ID}');`,
      }}
    />
  </>
)}

If VITE_GA_MEASUREMENT_ID is not set, no analytics script is loaded — zero overhead.

Verify

After deployment, open your site and check the Realtime report in Google Analytics to confirm data is flowing.

You can also open browser DevTools → Network tab and look for requests to googletagmanager.com.