为什么我的Google Analytics分析不适用于事件？

问题描述

我已经在我的React Web应用程序上为Google Analytics（分析）编写了一个打字稿类。

import type { gtagObj } from "./types";

declare global {
  interface Window {
    dataLayer: any;
  }
}

export class GoogleAnalytics {
  private static instance: GoogleAnalytics;
  private trackerId: string;
  private gtagFn: gtagObj;
  private constructor(trackerId: string,userId?: string) {
    this.appendAnalyticsScript(trackerId);
    this.gtagFn = function gtag() {
      //@ts-ignore
      dataLayer.push(arguments);
      console.log(window.dataLayer);
      console.log(arguments);
    };

    this.trackerId = trackerId;
    this.startAnalytics(userId);
  }

  private appendAnalyticsScript(trackerId: string) {
    const analyticsScript = document.createElement("script");
    analyticsScript.src = `https://www.googletagmanager.com/gtag/js?id=${trackerId}`;
    analyticsScript.async = true;
    document.head.appendChild(analyticsScript);
    window.dataLayer = window.dataLayer || [];
  }

  public static getInstance(trackerId = "",userId?: string): GoogleAnalytics {
    if (!GoogleAnalytics.instance) {
      if (trackerId !== "") {
        GoogleAnalytics.instance = new GoogleAnalytics(trackerId,userId);
      } else {
        throw new Error(
          "you must provide a Tracker ID when initializing the Analytics Object."
        );
      }
    }

    return GoogleAnalytics.instance;
  }

  private startAnalytics(userId?: string) {
    this.gtagFn("js",new Date());
    const userObj = userId ? { user_id: userId } : {};
    this.gtagFn("config",this.trackerId,userObj);
  }

  public trackNavigation(page: string) {
    this.gtagFn("event","screen_view",{
      screen_name: page
    });
  }

  public trackItemSelected(item: Gtag.Item) {
    this.gtagFn("event","item_view",{
      items: [item]
    });
  }

  public _gtag(args: Parameters<gtagObj>) {
    this.gtagFn.apply(null,args);
  }
}

我使用useEffect初始化根组件内的单例：

  useEffect(() => {
    const ga = GoogleAnalytics.getInstance("G-XXXXXXX",userId.toString());
  },[]);

这按预期工作。我还在分析仪表板中获取用户数据。

但是，我有一些要调用的组件：

onClick={() => {
          setId(objId);
          GoogleAnalytics.getInstance().trackItemSelected({ id: objId });
        }}

或使用useEffect，当加载特定组件时，我还会记录一个screen_view事件。

这两者（尽管已记录为有效呼叫，或换句话说已推送到dataLayer中），均未出现在此应用程序的分析网页中。

到目前为止，我仅使用GA4和数据流配置了分析功能。在数据流内部，“过去48小时内没有数据”。

我真的很感谢您！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）