一、前言
开发完站点后，一般会进行埋点追踪，这里讲一下google分析，如何通过GTM配置进行灵活埋点。
GTM的优势就是：
- 灵活埋点，自定义js代码即可收集数据
- google Ads只需要在GTM配置即可
- 你可以配置多个google分析【GA4】账号，让GTM同步不同维度的数据
二、GTM 账号和代码
登录GTM平台，注册账号：tagmanager.google.com/#/home 在这里创建GTM账号，获取代码将代码植入你的站点：
- 将此代码粘贴到网页的 中尽可能靠上的位置：
xml
<!-- 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 -->- 请将此代码粘帖到紧跟起始 标记之后的位置：
xml
<!-- 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加载失败。
三、配置说明
我们点击注册好的账号进入：
这个页面的主要内容包括：代码（Tag）、触发器（Trigger）、变量(Variable)。
1）代码：用来配置关联的平台，比如这里可以配置事件和关联GA4和Ads。
- 点击新建 => 代码配置 => Google Analytics => Google Analytics: GA4 事件
- 配置GA4事件
衡量ID和事件名称为必填字段
- 获取衡量ID: 为GA4中，数据流中的衡量ID，获取地址：analytics.google.com/analytics/w...
2）触发器
直接点击触发条件，选择内置的触发器或者新建触发器也可以
事件埋点有多种方式，你可以根据需要进行配置，下面列出：
- 用户进行页面浏览时：浏览对应的页面、时机等进行触发
- 用户点击链接或按钮时进行触发
- 用户深度互动，比如点击视频、滚动、提交表单时
- 自定义事件等
四、点击事件收集案例
我们这里演示收集用户点击按钮的事件，比如对于下面的页面，我们想要收集用户点击Profile Info的数据。
我们只需要选择点击 - 所有元素，然后通过点击的文本匹配Profile Info即可。
我们可以看到在代码列表中，有一条Profile Info的记录，关联了Profile Info的触发器。
这时候，我们看到工作区的改动为2，可以在概览页面看到具体的改动
此时，我们需要先进行提交（一定要先提交，否则不会生效），然后点击预览，输入您配置代码的站点地址：
浏览器会自动打开对应的地址，只需要在对应的页面中点击Profile Info，即可在当前页面看到对应的事件记录，这说明已经配置成功了。
五、关于单页面数据收集
针对单页面应用，我们会发现收集的数据不准，因为前端行为的数据收集不准确，为了解决这个问题，我们需要通过配置page_view替换GA4内置的page_view事件。
配置方式和上面的流程一样，触发方式选择
在GA4中，数据流代码页面，一定要关闭增强型衡量功能，否则会重复收集。
