GTM埋点追踪配置教程

大善人666
271 阅读4分钟

一、前言

开发完站点后，一般会进行埋点追踪，这里讲一下google分析，如何通过GTM配置进行灵活埋点。

GTM的优势就是：

  • 灵活埋点，自定义js代码即可收集数据
  • google Ads只需要在GTM配置即可
  • 你可以配置多个google分析【GA4】账号，让GTM同步不同维度的数据

二、GTM 账号和代码

登录GTM平台，注册账号：tagmanager.google.com/#/home 在这里创建GTM账号，获取代码将代码植入你的站点：

image.png

  1. 将此代码粘贴到网页的 中尽可能靠上的位置：
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-MW35xxx');</script>
<!-- End Google Tag Manager -->

2. 请将此代码粘帖到紧跟起始 标记之后的位置：

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MW35xxx"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

我们在前端页面植入代码，查看js加载成功即可。 注意：在挂载VPN的情况下，可能会导致gtm加载失败。

三、配置说明

我们点击注册好的账号进入：

image.png

这个页面的主要内容包括：代码（Tag）、触发器（Trigger）、变量(Variable)。

1）代码：用来配置关联的平台，比如这里可以配置事件和关联GA4和Ads。

  1. 点击新建 => 代码配置 => Google Analytics => Google Analytics: GA4 事件

image.png

  1. 配置GA4事件

衡量ID和事件名称为必填字段

image.png

  1. 获取衡量ID: 为GA4中，数据流中的衡量ID，获取地址：analytics.google.com/analytics/w…

image.png

2）触发器

直接点击触发条件，选择内置的触发器或者新建触发器也可以

image.png

事件埋点有多种方式，你可以根据需要进行配置，下面列出：

  • 用户进行页面浏览时：浏览对应的页面、时机等进行触发
  • 用户点击链接或按钮时进行触发
  • 用户深度互动，比如点击视频、滚动、提交表单时
  • 自定义事件等

image.png

四、点击事件收集案例

我们这里演示收集用户点击按钮的事件，比如对于下面的页面，我们想要收集用户点击Profile Info的数据。

image.png

我们只需要选择点击 - 所有元素，然后通过点击的文本匹配Profile Info即可。

image.png

我们可以看到在代码列表中，有一条Profile Info的记录，关联了Profile Info的触发器。
image.png

这时候，我们看到工作区的改动为2，可以在概览页面看到具体的改动

image.png

此时，我们需要先进行提交（一定要先提交，否则不会生效），然后点击预览，输入您配置代码的站点地址：

image.png

浏览器会自动打开对应的地址，只需要在对应的页面中点击Profile Info，即可在当前页面看到对应的事件记录，这说明已经配置成功了。

image.png

五、关于单页面数据收集

针对单页面应用，我们会发现收集的数据不准，因为前端行为的数据收集不准确，为了解决这个问题，我们需要通过配置page_view替换GA4内置的page_view事件。

配置方式和上面的流程一样，触发方式选择

image.png

在GA4中，数据流代码页面，一定要关闭增强型衡量功能，否则会重复收集。

image.png

六、注意

1. 通过GA4埋点和GTM埋点，加载的js不一样，检查方法

通过GTM配置，加载的js为：gtm.js image.png 通过GA4加载js为：gtag.js

https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX

2. 发现收集的数据不准怎么办？

- 通过前端js上报，数据必要是不准的，因为存在js加载失败或者网络问题上报失败的问题
- 目前发现，如果站点开启自建的VPN，会大概率出现GA4 js加载失败的问题
- 可以通过后端API进行上报

我们可以清楚的看到，打开VPN后，GTM js加载失败 image.png

3. 如何通过后端API进行数据上报：

参考文档：developers.google.com/analytics/d…

MEASUREMENT_ID： 衡量ID，在GA4数据流处获取

API_SECRET：在GA4数据流处 => Measurement Protocol API secrets => 新建secret

Node调用例子：

import fetch from 'node-fetch'; // node 18+ 可直接用 globalThis.fetch

const MEASUREMENT_ID = 'G-XXXXXXX'; // 替换成你的
const API_SECRET = 'YYYYYYYYYYYYYYYYYYYY'; // 替换成你的

async function sendGAEvent({ clientId, eventName, params = {} }) {
  const url = `https://www.google-analytics.com/mp/collect?measurement_id=${MEASUREMENT_ID}&api_secret=${API_SECRET}`;

  const body = {
    client_id: clientId, // 前端生成或服务端自定义的唯一标识（如用户设备ID、session ID）
    events: [
      {
        name: eventName,
        params,
      },
    ],
  };

  const res = await fetch(url, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(body),
  });

  if (!res.ok) {
    console.error(`GA4 event send failed: ${res.statusText}`);
  } else {
    console.log(`GA4 event "${eventName}" sent successfully`);
  }
}

4. GTM如何通过前端JS代码进行上报

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'button_click',
  button_name: 'register',
  page_location: window.location.pathname,
});

5. GA4如何通过前端JS代码进行上报

gtag('event', '事件名称', { 参数对象 });
avatar
文章
阅读
粉丝