Search code examples
javascriptreactjsfirebasegoogle-analyticsfirebase-analytics

Firebase Analytics Googletagmanager Error

I'm getting this error from Firebase, I added Analytics to my project today, and now the landing page shows this error in the console.

helpers.ts:72 GET https://www.googletagmanager.com/gtag/js?l=dataLayer net::ERR_BLOCKED_BY_CLIENT

I'm not importing GTAG in my index.html (i'm using React) this thing

<script async src="https://www.googletagmanager.com/gtag/js"></script>

Because I'm not using it.

and my config file for Firebase looks like this

import firebase from "firebase/app";
import "firebase/firestore";
import "firebase/auth";
import "firebase/analytics";

// Your web app's Firebase configuration
var firebaseConfig = {
  //the usual
  measurementId: "G-something",
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
export const auth = firebase.auth();
export const db = firebase.firestore();
export const firestore = firebase.firestore;
export const analytics = firebase.analytics;

Landing page

import { analytics } from "../configs/fbConfig";`
  useEffect(() => {
    analytics().setCurrentScreen(window.location.pathname); // sets `screen_name` parameter
    analytics().logEvent("screen_view"); // log event with `screen_name` parameter attached
    analytics().logEvent("landing_page_view", { landing_at: Date.now() });
  });

That's all i have, i want to log when the user see the landing page, so I can use a Funnel ( I believe ) to track the process from Landing to Login page.

Do I have to create something in the Firebase Console to make this work ? documentation for web analytics is kind of messy..

Solution

  • In vast majority of cases the net::ERR_BLOCKED_BY_CLIENT means your adblocker blocks tracking. Here how it looks on the console:

    enter image description here

    Always disable adblockers when you do GTM/GA/Launch/AA/Tealium/Ensighten/Piwik/Matomo debugging/implementation.

    This is how it typically looks on the Network tab: (blocked:other)

    enter image description here

    Note that (blocked:devtools) is not caused by an adblocker, but rather by the request blocking feature of devtools.

    Also you say web analytics, and yet you use Firebase. Firebase is only viable as an SDK for use in native apps. I suggest using Google Analytics to track web hits even if it's mobile web.

    Finally, since you're using React, I assume it's an SPA. In case of an SPA, you have to have a separate pageview tag in GTM that would be triggered by, say, a custom dataLayer event fired from your React app router on page change (Or in case of GA4, you have an option to make GTM GA4 tag listen to history changes). Then you can start building funnels.