Firebase Analytics Googletagmanager 错误

Question

我从 Firebase 收到此错误，今天我将 Analytics 添加到我的项目中，现在登录页面在控制台中显示此错误。

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

我没有在我的index.html中导入GTAG（我正在使用React）这个东西

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

因为我没有使用它。

我的 Firebase 配置文件如下所示

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;

登陆页面

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() });
  });

这就是我所拥有的，我想在用户看到登陆页面时进行记录，所以我可以使用漏斗（我相信）来跟踪从登陆到登录页面的过程。

我是否必须在 Firebase 控制台中创建一些内容才能使其工作？网络分析的文档有点混乱..

Answer 1

在绝大多数情况下，这net::ERR_BLOCKED_BY_CLIENT意味着您的广告拦截器会阻止跟踪。这是它在控制台上的样子：

当您进行 GTM/GA/Launch/AA/Tealium/Ensighten/Piwik/Matomo 调试/实现时，请始终禁用广告拦截器。

这是它在“网络”选项卡上的通常外观：(blocked:other)

请注意，这(blocked:devtools)不是由广告拦截器引起的，而是由 devtools 的请求阻止功能引起的。

您还说网络分析，但您却使用 Firebase。Firebase 只能作为 SDK 在本机应用程序中使用。我建议使用 Google Analytics 来跟踪网络点击量，即使是移动网络。

最后，由于您使用的是 React，我认为它是一个 SPA。在 SPA 的情况下，您必须在 GTM 中拥有一个单独的页面浏览量标记，该标记将由页面更改时从 React 应用程序路由器触发的自定义 dataLayer 事件触发（或者在 GA4 的情况下，您可以选择使GTM GA4标签监听历史变化）。然后你就可以开始构建渠道了。