谷歌分析-工作总结

CoderLiz
402 阅读7分钟

谷歌分析官网：marketingplatform.google.com/about/analy…

埋点：就是在网站的特定位置添加代码，来收集用户行为数据

需求描述

项目需求埋点一般包括（以这次需求为例）：

  1. 用户基本信息维度：包括用户 ID、用户名、性别、年龄、地域等，用于了解用户的特征。

  2. 登录行为维度：登录时间、登录频率、登录方式（如账号密码、第三方登录）等，可评估用户的活跃程度和使用习惯。

  3. 操作行为维度：如页面浏览路径、点击的功能模块、停留时间、操作的成功与失败等，有助于分析用户对不同功能的偏好和使用流程的顺畅性。

  4. 业务行为维度：例如购买行为（购买金额、购买频率、购买商品类别）、发布内容（发布数量、内容类型）、互动行为（点赞、评论、分享）等，以衡量用户对业务的参与度和贡献度。

  5. 设备信息维度：使用的设备类型（手机、电脑、平板）、操作系统、浏览器等，用于优化用户体验和解决兼容性问题。

  6. 来源渠道维度：用户是通过何种渠道（搜索引擎、社交媒体、推广活动等）进入平台的，以便评估渠道效果和优化推广策略。

  7. 留存相关维度：首次使用时间、回访时间、连续使用天数等，日活跃，周活跃，月活跃，用于分析用户的留存情况和忠诚度。

分析思路

其中3,5,6,7可直接通过Google Analytics（GA4）来直接分析：

3：谷歌分析开启后会自动收集，在设置-数据流-事件-增强事件里面设置

5：设备信息可以在GA中报告页面下的用户-技术可以看到

6：同理，用户来源可以在报告页面-流量获取看到，其中用户需要点击渠道商推广的链接来进入，GA4会自动获取该流量来源

7:同理用户留存信息可以在报告页面-互动度看到相关信息

1,2,4需要在代码中埋点记录用户行为

GA4使用

在项目中集成GA4，获取自己的GA4 Measurement ID，在项目代码中添加指定代码

集成代码本质就是将GA4的js库导入进去，在项目中就可以使用该js代码

集成完成后两种方法使用：

  • 使用集成的gtag.js发送事件
  • 使用谷歌代码跟踪器（GTM）来设置

其中官方推荐使用GTM来发送事件，不侵入代码，可视化设置，更好的对接渠道商

直接使用

使用项目中集成的gtag.js发送事件比较简单：

注意：一定要开全局代理，否则集成失败😭

例如发送表单提交事件：

建议参考谷歌文档中的推荐事件，笔者在测试自定义事件时发送不出去，网上资料使用这种方式很少，建议使用GTM来发送事件

<script>
  document.getElementById('myForm').addEventListener('submit', function(event) {
    event.preventDefault(); // 防止表单实际提交
    gtag('event', 'form_submit', {
      'event_category': 'user_interaction',
      'event_label': 'myForm',
      'value': 1
    });
    // 在发送事件后执行表单提交或其他操作
    this.submit();
  });
</script>

GTM使用

GTM：全称Google Tag Manager，是谷歌提供的一种标签管理系统，允许您在不需要修改代码的情况下管理和部署分析和营销标签。

简单来说就是可以在代码的某处添加标签，然后设置触发器来执行该标签，该标签可以是GA4事件，所以可以很好的和GA4结合

登录后在首页点击右上方的GTM-XXXXXXX来进行GTM的集成，你需要在代码中添加该代码：

注意：GTM和GA4不能同时使用，所以请先移除之前的GA4相关代码

移除之后第一步：在GTM中集成GA4，需要新建一个标签，标签类型选择谷歌代码，代码ID写你在GA4中的ID，触发条件是页面初始化后，就连接到GA4了，后面GTM的发送的GA4事件就会被GA4收集到

业务埋点

知道了GTM的基本使用之后就可以根据需求埋点

用户首次登录埋点，首先在GTM中新建一个标签，标签类型选择GA4事件，填写自己的ID（最好定义为变量，方便后面每次获取）

如图，事件需要事件参数，即你向GTM发送该事件的参数，如图所示，我需要这些参数

那么我就需要在代码中向GTM发送该事件时定义该参数，然后携带上，GTM发送事件后不会直接发送到GA4，而是到达GTM的数据层，所以我们需要新建几个变量来获取：

到此，该标签触发的定义完成，该标签的触发器还没定义，触发器即用户发送首次登录后的GTM后触发，所以新建触发器，类型选择自定义事件，事件名称等于你发送的事件名称来确定唯一事件

到此为止，在GTM的操作告一段落，接下来需要在代码中埋点写发送逻辑：

笔者在发送时一直在登录成功后发送，在测试谷歌登录时，因为第三方登录的异步，组件加载流程问题浪费了很多时间，后面在雨晴哥思路下在leftNav文件中写该逻辑，在用户session有变化时发送该事件，通过首次登录的用户名来判断用户是否为谷歌登录，通过localStorage来保证事件只发送一次

  // 定义发送数据到 GTM 的函数
  const sendToGTM =  (userId: string | null | undefined, name: string | null| undefined, gender: string | null| undefined, loginMethod: string) => {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: 'userLogin',
      userId,
      name,
      gender,
      loginMethod,
      loginTime: new Date().toISOString()
    });
  };

  //钩子函数来发送
  useEffect(() => {
    const localStorageFlag = localStorage.getItem('hasSentToGTM');
    if (!localStorageFlag && session.status === 'authenticated' && session.data?.user && !hasSentToGTM.current) {
      const { id, name, gender, email } = session.data.user;
      const loginMethod = (email === name) ? "password" : "thirdParty";
      sendToGTM(id, name, gender, loginMethod);
      localStorage.setItem('hasSentToGTM', 'true');
      hasSentToGTM.current = true;
    }
  }, [session.status, session.data]);

业务埋点流程大致这样，其中触发器的类型还可以定义用户在点击聊天等按钮后触发，可以写一个GA4事件来发送。其中触发器的类型还有很多，可以探索一下

埋点测试

GTM很人性化的提供了在线调试的页面，在首页点击预览即可跳转到测试页面，在测试页面点击测试，该会话的事件就会被发送到左边通知栏，还可以搭配GA4的debug模式来调试很方便。

在测试没有问题后点击发布，发布一个版本。GTM就可以和GA4一起工作了，此时在在线页面上点击

在GA4中报告-实时页面中可以看到该行为

数据分析

可以在探索中添加自己的各种自定义维度来查看数据，这是我根据不同地区和不同渠道来源分析的一些数据：

细节完成

  1. 用户基本信息维度：完成了记录下了用户id、用户名、性别
  2. 登录行为维度：完成了用户首次登录时的登录时间、登录方式（账号/三方登录）
  3. 业务行为维度：完成用户支付的记录，包括用户id，购买金额，时间；用户点击聊天记录（用户id）
  4. 设备信息维度：GA4自动记录设备相关信息
  5. 来源渠道维度：需要广告商生成带有自己广告信息的网站链接，GA4自动解析
  6. 留存相关维度：GA4自动事件记录

渠道链接生成地址

ga-dev-tools.google/ga4/campaig…

avatar
文章
阅读
粉丝