Accurate user tracking is becoming increasingly complex in the modern digital landscape, especially for SaaS applications that span multiple layers—frontend, backend, and marketing websites. To bridge the gap and collect unified, reliable analytics, businesses are turning to a full-stack approach using Google Tag Manager (GTM), including client-side and server-side tracking. This blog post breaks down the implementation across a real-world SaaS application built on React, Node.js, and Laravel.
Understanding the Full Architecture: Frontend, Backend, and Marketing Site
For demonstration purposes, the example here uses a project called CRM Gurus, which includes:
- A React.js frontend for user interaction
- A Node.js backend for application logic and API services
- A Laravel-based marketing site for lead generation
This layered architecture is common in modern SaaS stacks but creates fragmentation in analytics. Events generated from different sources often end up in separate systems, creating blind spots in the customer journey. To solve this, the goal is to route all analytics events—whether from the marketing site, the app frontend, or the backend—into a single Google Analytics property, using multiple GTM containers and one centralized server-side GTM instance.
Setting Up Multiple GTM Containers
The implementation begins by creating three Google Tag Manager containers:
- Marketing Site Container: Handles events like page views, form submissions, and CTA clicks from the Laravel site.
- SaaS App Container: Integrated with the React frontend to track user interactions such as logins, dashboard activity, and in-app engagement.
- Server-Side Container: Deployed on Google Cloud Run, this container collects events from both sources, enriches data, and forwards it to GA4 and other platforms like Facebook Conversion API.
Each GTM container plays a specific role. The SaaS app container is especially important because it ensures that key business interactions are tracked accurately, regardless of browser-based tracking limitations.
Installing GTM in the SaaS Frontend (React JS)
To integrate GTM into the React frontend, a module like react-gtm-module is used. After installing the GTM provider, the tag ID (GTM-XXXXXXX) is added to the project, and event push mechanisms are set up to trigger tracking through the GTM data layer. Events such as user signups, logins, and feature usage are now ready to be captured and routed through GTM.
Connecting Events Across the Stack
One of the most important aspects of modern tracking is ensuring all events flow into a single source of truth—usually Google Analytics 4. With client-side and server-side GTM working in harmony, events from the frontend and backend can be normalized and enriched on the server before being sent to analytics platforms.
For example, marketing site page views, app logins, and purchases can all be tracked as separate events but linked via a common user ID or session data, resulting in more accurate attribution and better funnel analysis.
Configuring Server-Side GTM and Custom Domain
While the server-side GTM was successfully set up on Google Cloud, it initially uses a generic domain generated by Google. To improve data privacy and enhance first-party data handling, the setup includes configuring a custom subdomain such as tags.crmgurus.net. This ensures that all server-side events are sent through your own domain, avoiding common issues with third-party blocking and improving event reliability.
Future Enhancements and Platform Integrations
Once the multi-container GTM architecture is in place, it opens the door to further integrations. Using server-side GTM templates, it's easy to plug into services like:
- Facebook Conversion API
- Google Ads Conversion Tracking
- LinkedIn Ads
- TikTok Pixel
- Lead APIs for CRM platforms
The server becomes the hub of your data collection infrastructure, allowing for cleaner, faster, and more accurate event delivery.
Implementing a unified analytics setup using Google Tag Manager across frontend, backend, and marketing site is essential for SaaS companies serious about tracking and growth. By leveraging client-side GTM on your app and marketing site and routing all data through a server-side GTM container hosted on Google Cloud, you gain full control over your analytics and prepare your platform for the future of privacy-first, first-party data tracking.
This approach not only enhances your visibility across the customer journey but also improves your ability to optimize advertising, measure engagement, and scale your marketing operations effectively.
If you're looking to implement or optimize a setup like this, services are available through Guru Labs at app.gurulabs.dev. We offer full-stack GTM setup, Facebook Pixel and server-side integrations, and conversion tracking solutions tailored to SaaS platforms.