GoogleAnalytics

GoogleAnalytics injects Google Analytics 4 scripts into the document head and initializes gtag with the provided measurement id.

tsx

import { GoogleAnalytics } from "@arkyn/components";

Basic Usage

tsx

<GoogleAnalytics measurementId="G-XXXXXXXXXX" />

Environment Behavior

By default, the component renders only in production. Use showInDevMode when you need local validation.

tsx

// Production only (default)
<GoogleAnalytics measurementId="G-XXXXXXXXXX" />

// Force rendering in development
<GoogleAnalytics measurementId="G-XXXXXXXXXX" showInDevMode />

Client-Side Script Injection

The component delegates script creation to internal utilities that build the async gtag.js URL and inline bootstrap script.

tsx

<GoogleAnalytics measurementId="G-TEST123456" showInDevMode />

Client-side only rendering

This component renders through ClientOnly, so script injection happens only in the browser. No Google Analytics script tags are appended during server rendering.

Measurement id requirement

A valid GA4 measurement id is required (for example, G-XXXXXXXXXX). If it is missing, the internal snippet generator emits a console warning.

Properties

measurementId - string Google Analytics 4 Measurement ID used to configure gtag.

showInDevMode - boolean (default: false) If true, renders and initializes analytics outside production.

On this page