Skip to main content
RapidDev - Software Development Agency
firebase-tutorial

How to Integrate Firebase Analytics With Google Tag Manager

Google Tag Manager lets you manage Firebase Analytics events, conversion tracking, and third-party tags without deploying code changes. Install the GTM web container snippet alongside Firebase, configure triggers that fire on Firebase custom events, and use GTM's preview mode to verify tags before publishing. This gives marketing and analytics teams control over tracking while developers focus on building features.

What you'll learn

  • How to set up a Google Tag Manager web container alongside Firebase Analytics
  • How to create triggers that fire on Firebase custom events
  • How to send Firebase event data to GA4, Google Ads, and third-party tools via GTM
  • How to use GTM preview mode to debug and verify tags before publishing
Book a free consultation
4.9Clutch rating ⭐
600+Happy partners
17+Countries served
190+Team members
Beginner9 min read15-20 minFirebase Analytics (web), Google Tag Manager web container, GA4, any modern browserMarch 2026RapidDev Engineering Team
TL;DR

Google Tag Manager lets you manage Firebase Analytics events, conversion tracking, and third-party tags without deploying code changes. Install the GTM web container snippet alongside Firebase, configure triggers that fire on Firebase custom events, and use GTM's preview mode to verify tags before publishing. This gives marketing and analytics teams control over tracking while developers focus on building features.

Managing Firebase Analytics Events Through Google Tag Manager

Firebase Analytics automatically collects events like page_view, session_start, and first_visit. Google Tag Manager adds a management layer on top — letting you route those events to GA4, Google Ads, Facebook Pixel, and other destinations without writing additional code. This tutorial covers setting up GTM for a web app that already uses Firebase Analytics, creating tags that respond to Firebase events, and testing the integration before going live.

Prerequisites

  • A Firebase project with Analytics enabled in the Firebase Console
  • Firebase JS SDK initialized in your web app with getAnalytics()
  • A Google Tag Manager account at tagmanager.google.com
  • Basic understanding of Firebase Analytics events and parameters

Step-by-step guide

1

Create a GTM web container and install the snippet

Go to tagmanager.google.com and create a new container for your web app. GTM gives you two code snippets: one goes in the head tag and one goes immediately after the opening body tag. Add both to your app's index.html or root layout component. The GTM container loads asynchronously and does not block page rendering.

typescript
1<!-- Add to <head> -->
2<script>
3  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
4  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
5  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;
6  j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;
7  f.parentNode.insertBefore(j,f);
8  })(window,document,'script','dataLayer','GTM-XXXXXXX');
9</script>
10
11<!-- Add immediately after opening <body> tag -->
12<noscript>
13  <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
14    height="0" width="0" style="display:none;visibility:hidden"></iframe>
15</noscript>

Expected result: GTM loads on every page of your web app. You can verify by checking the Network tab for a request to googletagmanager.com.

2

Push Firebase events to the GTM data layer

Firebase Analytics events logged with logEvent() are separate from GTM's data layer by default. To make Firebase events available to GTM, push them to the data layer alongside the Firebase logEvent call. This creates a bridge between Firebase Analytics and GTM, letting GTM triggers respond to your custom events.

typescript
1import { getAnalytics, logEvent } from "firebase/analytics";
2
3const analytics = getAnalytics();
4
5// Helper function: log to Firebase AND push to GTM data layer
6function trackEvent(
7  eventName: string,
8  params: Record<string, string | number>
9) {
10  // Firebase Analytics
11  logEvent(analytics, eventName, params);
12
13  // GTM data layer
14  window.dataLayer = window.dataLayer || [];
15  window.dataLayer.push({
16    event: eventName,
17    ...params,
18  });
19}
20
21// Usage examples
22trackEvent("purchase_complete", {
23  value: 49.99,
24  currency: "USD",
25  item_name: "Pro Plan",
26});
27
28trackEvent("signup_step", {
29  step_name: "email_verified",
30  method: "google",
31});

Expected result: Every tracked event is sent to both Firebase Analytics and the GTM data layer, making it available for GTM triggers.

3

Create a GTM trigger for a Firebase custom event

In the GTM dashboard, go to Triggers and click New. Select Custom Event as the trigger type. Enter the event name exactly as it appears in your trackEvent calls (e.g., purchase_complete). This trigger fires whenever that event is pushed to the data layer. You can add conditions to filter by event parameters, such as only firing when value is greater than 10.

typescript
1// GTM Trigger Configuration (set in GTM dashboard):
2// Trigger Type: Custom Event
3// Event Name: purchase_complete
4// This trigger fires on: All Custom Events
5//
6// Optional filter:
7// Event Name equals purchase_complete
8// AND value greater than 0

Expected result: A GTM trigger named 'Purchase Complete' exists and fires whenever the purchase_complete event is pushed to the data layer.

4

Create tags for GA4, Google Ads, and third-party pixels

Now create tags that fire on your triggers. For GA4, use the Google Analytics: GA4 Event tag type — enter your Measurement ID (G-XXXXXXXXXX) and map event parameters. For Google Ads conversions, use the Google Ads Conversion Tracking tag. For third-party tools like Facebook Pixel, use a Custom HTML tag with the pixel's event code. Assign each tag to the appropriate trigger.

typescript
1// GA4 Event Tag Configuration (set in GTM dashboard):
2// Tag Type: Google Analytics: GA4 Event
3// Measurement ID: G-XXXXXXXXXX
4// Event Name: purchase
5// Event Parameters:
6//   value: {{DLV - value}}    (Data Layer Variable)
7//   currency: {{DLV - currency}}
8//   item_name: {{DLV - item_name}}
9// Trigger: Purchase Complete
10
11// Google Ads Conversion Tag:
12// Tag Type: Google Ads Conversion Tracking
13// Conversion ID: AW-XXXXXXXXX
14// Conversion Label: AbCdEfGhIjK
15// Conversion Value: {{DLV - value}}
16// Currency Code: USD
17// Trigger: Purchase Complete

Expected result: Tags are configured to send purchase data to GA4 and Google Ads whenever the purchase_complete event fires.

5

Test the integration with GTM Preview mode

Before publishing, use GTM's Preview mode to verify everything works. Click Preview in the GTM dashboard — this opens Tag Assistant in a new tab and connects to your site. Navigate through your app and trigger events. Tag Assistant shows which tags fired, which triggers activated, and what data was sent. Fix any issues before publishing the container.

typescript
1// Debugging steps:
2// 1. In GTM dashboard, click "Preview" button (top right)
3// 2. Enter your site URL in Tag Assistant
4// 3. Your site opens with Tag Assistant connected
5// 4. Perform actions that trigger events (e.g., complete a purchase)
6// 5. Check Tag Assistant panel:
7//    - Tags Fired: should show your GA4 and Ads tags
8//    - Tags Not Fired: should NOT show your tags
9//    - Data Layer: should show the event push with parameters
10// 6. If everything looks correct, go back to GTM and click "Submit"
11
12// You can also check the browser console:
13console.log(window.dataLayer);

Expected result: Tag Assistant confirms that your tags fire correctly on the expected events with the right parameter values.

6

Publish the GTM container

Once testing is complete, publish the container to make your tags live. In the GTM dashboard, click Submit, add a version name and description, then click Publish. GTM containers are versioned, so you can roll back to any previous version if something goes wrong. After publishing, verify in GA4's Realtime report that events are arriving from your site.

typescript
1// Post-publish verification checklist:
2// 1. Open GA4 > Realtime report
3// 2. Visit your site and trigger a tracked event
4// 3. Confirm the event appears in GA4 within 30 seconds
5// 4. Check Google Ads > Conversions to verify conversion tracking
6// 5. If using Facebook Pixel, check Events Manager for incoming events
7
8// GTM version naming convention:
9// v1.0 — Initial setup with GA4 + Ads tags
10// v1.1 — Added Facebook Pixel
11// v2.0 — Major event restructure

Expected result: The GTM container is live and all configured tags fire correctly in production, sending data to GA4, Google Ads, and any third-party tools.

Complete working example

analytics.ts
1// Firebase Analytics + GTM Data Layer Integration
2import { initializeApp } from "firebase/app";
3import { getAnalytics, logEvent } from "firebase/analytics";
4
5// Extend Window for TypeScript
6declare global {
7  interface Window {
8    dataLayer: Record<string, unknown>[];
9  }
10}
11
12const firebaseConfig = {
13  apiKey: "your-api-key",
14  authDomain: "your-project.firebaseapp.com",
15  projectId: "your-project",
16  storageBucket: "your-project.appspot.com",
17  messagingSenderId: "123456789",
18  appId: "1:123456789:web:abc123",
19  measurementId: "G-XXXXXXXXXX",
20};
21
22const app = initializeApp(firebaseConfig);
23const analytics = getAnalytics(app);
24
25// Track event to both Firebase Analytics and GTM
26export function trackEvent(
27  eventName: string,
28  params: Record<string, string | number | boolean> = {}
29) {
30  logEvent(analytics, eventName, params);
31  window.dataLayer = window.dataLayer || [];
32  window.dataLayer.push({ event: eventName, ...params });
33}
34
35// Track page/screen views for SPAs
36export function trackPageView(pagePath: string, pageTitle: string) {
37  trackEvent("page_view", {
38    page_path: pagePath,
39    page_title: pageTitle,
40  });
41}
42
43// Track e-commerce purchase
44export function trackPurchase(
45  transactionId: string,
46  value: number,
47  currency: string,
48  items: Array<{ name: string; price: number }>
49) {
50  trackEvent("purchase", {
51    transaction_id: transactionId,
52    value,
53    currency,
54    items_count: items.length,
55  });
56}
57
58// Track signup funnel steps
59export function trackSignupStep(stepName: string, method: string) {
60  trackEvent("signup_step", { step_name: stepName, method });
61}

Common mistakes when integrating Firebase Analytics With Google Tag Manager

Why it's a problem: Forgetting to push events to the GTM data layer, so GTM triggers never fire even though Firebase Analytics records the events

How to avoid: Use a wrapper function that calls both logEvent() for Firebase and window.dataLayer.push() for GTM. Firebase Analytics and GTM data layers are separate systems.

Why it's a problem: Using different event names in code versus GTM trigger configuration, causing tags to never fire

How to avoid: Event names are case-sensitive in GTM. Copy the exact event name string from your code into the GTM trigger's event name field.

Why it's a problem: Publishing GTM changes without testing in Preview mode, causing broken tracking in production

How to avoid: Always use GTM Preview mode and Tag Assistant to verify tags fire correctly before clicking Submit and Publish.

Best practices

  • Use a wrapper function that logs events to both Firebase Analytics and the GTM data layer simultaneously
  • Follow GA4's recommended event naming conventions (snake_case) for consistency across Firebase and GTM
  • Create Data Layer Variables in GTM for every parameter you want to use in tags
  • Test every tag with GTM Preview mode and Tag Assistant before publishing
  • Version your GTM container with descriptive names so you can roll back if needed
  • Keep Firebase Analytics as the primary event source and use GTM for routing events to third-party tools
  • Document your event taxonomy in a shared spreadsheet so developers and marketers use the same event names
  • Use GTM workspaces to manage changes from multiple team members without conflicts

Still stuck?

Copy one of these prompts to get a personalized, step-by-step explanation.

ChatGPT Prompt

I have a React web app using Firebase Analytics with logEvent(). I want to integrate Google Tag Manager so my marketing team can add GA4 event tags, Google Ads conversion tracking, and Facebook Pixel without code changes. Write a TypeScript helper module that logs events to both Firebase Analytics and the GTM data layer, and explain how to set up GTM triggers for custom events.

Firebase Prompt

Set up Google Tag Manager in my Firebase web app. Create a trackEvent helper function that pushes events to both Firebase Analytics (logEvent) and the GTM data layer (window.dataLayer.push). Include TypeScript types for the data layer and show examples for tracking purchases and signup steps.

Frequently asked questions

Do I need both Firebase Analytics and Google Tag Manager?

Firebase Analytics collects event data and stores it in your Firebase project. GTM is a tag management layer that routes events to multiple destinations (GA4, Google Ads, Facebook Pixel, etc.) without code changes. Use both when you need marketing teams to manage tracking independently.

Does GTM slow down my web app?

The GTM container loads asynchronously and does not block page rendering. However, tags inside GTM (like third-party pixels) can affect performance. Use GTM's tag sequencing and priority features to control loading order, and avoid adding too many heavy third-party scripts.

Can I use GTM with Firebase on mobile apps?

Yes, but the setup is different. Mobile apps use a Firebase-specific GTM container (not a web container). You configure it in the Firebase Console and download a container JSON file that is bundled with your app. Mobile GTM containers use Firebase event triggers natively.

Why are my GTM tags not firing even though I see events in Firebase Analytics?

Firebase Analytics (logEvent) and the GTM data layer are separate systems. Events logged with logEvent do not automatically appear in GTM. You must also push the event to window.dataLayer for GTM triggers to detect it.

How do I pass event parameters to GTM tags?

Create Data Layer Variables in GTM (Variables > New > Data Layer Variable) with names matching the parameter keys in your data layer push. Then reference those variables in your tag configuration using the double-curly-brace syntax.

Can I use server-side GTM with Firebase?

Yes. Server-side GTM receives events via a transport URL, processes them on your own Cloud Run container, and forwards to destinations server-side. This improves privacy and reduces client-side script load. Firebase events can be routed to server-side GTM via a custom Measurement Protocol hit.

Can RapidDev help set up GTM with my Firebase analytics?

Yes. RapidDev can configure your GTM container, set up triggers for Firebase events, create tags for GA4 and conversion tracking, and build a reusable analytics module that keeps your tracking consistent across your app.

RapidDev

Talk to an Expert

Our team has built 600+ apps. Get personalized help with your project.

Book a free consultation

Need help with your project?

Our experts have built 600+ apps and can accelerate your development. Book a free consultation — no strings attached.

Book a free consultation

We put the rapid in RapidDev

Need a dedicated strategic tech and growth partner? Discover what RapidDev can do for your business! Book a call with our team to schedule a free, no-obligation consultation. We'll discuss your project and provide a custom quote at no cost.