ga4-gtag-implementation

Direct gtag.js integration bypasses GTM by embedding the GA4 measurement ID and tracking code directly into your website or application files. Place the gtag.js snippet in your HTML head, configure your measurement ID, and call gtag('config') to initialize tracking—this approach gives you full control over event firing and data layer interactions without a third-party tag management dependency.

Yes, gtag.js works across React, Vue, Angular, Next.js, and vanilla JavaScript SPAs. For SPAs, manually trigger gtag('event', 'page_view') on route changes since gtag.js doesn't detect client-side navigation automatically. Each framework integration follows the same core gtag API—config, event, and set commands—adapted to your framework's lifecycle or routing layer.

gtag('config') initializes GA4 with your measurement ID and default parameters. gtag('event') sends discrete user interactions—purchases, clicks, form submissions—with optional parameters like value and items array. gtag('set') stores persistent user properties like user_id that persist across sessions without firing an event, typically called on login or user identification.

Send purchase events by calling gtag('event', 'purchase', {transaction_id, value, currency, items: [{item_id, item_name, price, quantity}]}). The items array structure matches GA4's schema. This populates your ecommerce reports with revenue, product performance, and conversion data directly from your checkout or confirmation page.

gtag.js manages window.dataLayer internally, but you can manually push custom data to dataLayer if needed for advanced use cases or third-party integrations. Direct gtag API calls (gtag('event'), gtag('set')) are the primary method; dataLayer is an optional escape hatch for complex tracking scenarios or legacy compatibility.

Use the Google Analytics Debugger browser extension to see real-time events firing in your browser console, or check the Realtime report in GA4 within seconds of triggering an event. Inspect network requests for gtag collect calls, and validate that your measurement ID matches your GA4 property. These steps confirm gtag.js initialization and event transmission.