如何利用`Google Tag Manager`来追踪`SEO`事件？ - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

利用 Google Tag Manager 追踪 SEO 事件：一场深入的讲座

大家好，今天我们来深入探讨如何利用 Google Tag Manager (GTM) 追踪 SEO 相关事件。这不仅仅是埋几个标签那么简单，我们要建立一套严谨的追踪体系，帮助我们更好地了解用户行为，优化网站结构，最终提升 SEO 效果。

讲座大纲

SEO 事件追踪的必要性： 为什么我们需要追踪这些事件？
可追踪的 SEO 事件类型： 具体有哪些值得我们追踪的关键事件？
GTM 环境搭建： 如何配置 GTM，确保其正常工作？
基于 GTM 的事件追踪实现：
- 链接点击追踪： 追踪站内和站外链接点击。
- 滚动深度追踪： 了解用户阅读文章的深度。
- 表单提交追踪： 追踪潜在客户的线索。
- 视频互动追踪： 追踪视频播放行为。
- 自定义事件追踪： 追踪其他特定行为，如 AJAX 加载内容。
数据验证与调试： 如何确保我们的追踪设置正确无误？
数据分析与应用： 如何利用收集到的数据优化 SEO 策略？
常见问题与解决方案： 遇到追踪问题如何解决？

1. SEO 事件追踪的必要性

传统的 SEO 分析主要依赖于关键词排名、流量、页面加载速度等指标。这些指标固然重要，但它们往往只能反映表面的现象，无法深入了解用户在网站上的行为。通过追踪 SEO 事件，我们可以：

了解用户互动： 知道用户如何与网站互动，例如他们点击了哪些链接，滚动了多深，填写了哪些表单。
识别用户痛点： 发现用户在哪些环节遇到困难，例如表单填写错误，找不到想要的内容。
优化用户体验： 根据用户行为调整网站布局、内容呈现方式，提升用户体验。
提升转化率： 优化转化路径，引导用户完成购买、注册等目标行为。
评估 SEO 策略效果： 通过数据分析，评估 SEO 策略的有效性，及时调整优化方向。

简单来说，SEO 事件追踪可以让我们从“猜”用户行为，变成“看”用户行为，从而做出更明智的决策。

2. 可追踪的 SEO 事件类型

以下是一些常见的、对 SEO 具有重要意义的事件类型：

事件类型	描述	追踪目的
链接点击	用户点击站内或站外链接。	分析用户对哪些内容感兴趣，了解用户跳转到哪些外部网站，评估外链策略的效果。
滚动深度	用户滚动页面的深度。	了解用户对页面内容的阅读程度，优化重要内容的位置，提升内容吸引力。
表单提交	用户提交表单，例如联系表单、注册表单。	追踪潜在客户的线索，评估表单的易用性，优化表单转化率。
视频互动	用户与视频的互动，例如播放、暂停、播放完成。	了解用户对哪些视频内容感兴趣，评估视频内容的效果，优化视频 SEO。
下载事件	用户下载文件，例如 PDF 文档、电子书。	追踪用户对哪些资源感兴趣，评估资源内容的价值，优化资源 SEO。
AJAX 加载内容	通过 AJAX 动态加载的内容，例如分页、筛选结果。	追踪用户对动态加载内容的互动，确保 AJAX 内容也能被搜索引擎抓取和索引。
内部搜索	用户在网站内部进行的搜索。	了解用户想要查找的内容，优化网站内容结构，提升搜索结果的准确性。
错误页面	用户访问 404 错误页面。	发现死链，修复链接，提升用户体验，避免搜索引擎降低网站排名。
元素可见性	特定元素出现在用户视野中。	追踪用户是否看到了重要的营销信息、号召性用语，评估页面布局的效果。

这仅仅是冰山一角，我们可以根据实际业务需求，自定义追踪其他类型的事件。

3. GTM 环境搭建

在使用 GTM 追踪 SEO 事件之前，我们需要确保 GTM 环境已经正确搭建。

创建 Google Tag Manager 账号和容器：
- 访问 Google Tag Manager 官网 (tagmanager.google.com)，创建一个账号。
- 在账号下创建一个容器，选择 Web 作为容器类型。
安装 GTM 代码：
- GTM 会提供两段代码，一段放在 <head> 标签中，另一段放在 <body> 标签中。
- 将这两段代码添加到网站的每个页面。建议放在模板文件中，确保每个页面都能加载 GTM。
开启预览模式：
- 在 GTM 界面点击“预览”按钮，可以在浏览器中开启预览模式。
- 预览模式可以帮助我们调试和验证 GTM 的配置。

4. 基于 GTM 的事件追踪实现

接下来，我们将详细介绍如何使用 GTM 追踪几种常见的 SEO 事件。

4.1 链接点击追踪

目标： 追踪站内和站外链接的点击事件。

步骤：

启用内置变量：
- 在 GTM 界面，点击“变量” -> “配置内置变量”。
- 启用“Click URL”、“Click Text”、“Click Element”等与点击相关的变量。
创建触发器：
- 点击“触发器” -> “新建”。
- 选择触发器类型为“仅限链接”。
- 配置触发器：
  - 此触发器在以下情况下激活： 选择 “某些链接点击”。
  - 设置过滤条件：
    - 站内链接： Click URL 包含 yourdomain.com (将 yourdomain.com 替换为你的域名)。
    - 站外链接： Click URL 不包含 yourdomain.com。
    - 特定链接： Click URL 等于 https://www.example.com/specific-page (追踪特定页面链接)。
创建代码：
- 点击“代码” -> “新建”。
- 选择代码类型为 “Google Analytics: Universal Analytics”。
- 配置代码：
  - 跟踪类型： 选择 “事件”。
  - 类别： 设置为 “Link Click”。
  - 操作： 可以使用变量，例如 {{Click URL}}。
  - 标签： 可以使用变量，例如 {{Click Text}}。
  - Google Analytics 设置： 选择或创建一个 Google Analytics 设置变量，配置你的 UA 跟踪 ID。
- 触发： 选择刚刚创建的链接点击触发器。
发布容器：
- 测试无误后，点击“提交” -> “发布”，将配置发布到线上。

代码示例 (触发器)：

// 站内链接触发器 (JavaScript 代码形式，方便理解)
function isInternalLink(url) {
  return url.indexOf('yourdomain.com') !== -1;
}

// 站外链接触发器
function isExternalLink(url) {
  return !isInternalLink(url);
}

代码示例 (代码)：

// Google Analytics 事件代码 (JavaScript 代码形式，模拟 GTM 的功能)
function trackLinkClick(category, action, label) {
  ga('send', 'event', category, action, label); //  假设 ga() 是 Google Analytics 的全局函数
}

// 在链接点击事件发生时调用
trackLinkClick('Link Click', '{{Click URL}}', '{{Click Text}}');

表格总结：

组件	类型	配置	说明
触发器	仅限链接	激活条件：某些链接点击；过滤条件：根据站内/站外链接的 URL 规则。	用于监听链接点击事件，并根据 URL 规则判断是否触发代码。
代码	Google Analytics: Universal Analytics	跟踪类型：事件；类别：Link Click；操作：{{Click URL}}；标签：{{Click Text}}；Google Analytics 设置：你的 UA 跟踪 ID。	用于将链接点击事件发送到 Google Analytics，方便后续的数据分析。类别、操作、标签可以自定义，用于区分不同的链接点击事件。
内置变量	变量	Click URL, Click Text	用于获取被点击链接的 URL 和文本内容，方便在代码中使用。

4.2 滚动深度追踪

目标： 追踪用户滚动页面的深度，了解用户对内容的阅读程度。

步骤：

启用内置变量：
- 无需启用额外的内置变量。
创建触发器：
- 点击“触发器” -> “新建”。
- 选择触发器类型为“滚动深度”。
- 配置触发器：
  - 垂直滚动深度： 设置滚动深度百分比，例如 25%, 50%, 75%, 90%。
  - 此触发器在以下情况下激活： 可以选择“所有页面”或“某些页面”。
创建代码：
- 点击“代码” -> “新建”。
- 选择代码类型为 “Google Analytics: Universal Analytics”。
- 配置代码：
  - 跟踪类型： 选择 “事件”。
  - 类别： 设置为 “Scroll Depth”。
  - 操作： 设置为 “{{Scroll Depth Threshold}}%”。
  - 标签： 可以设置为 “{{Page Path}}”。
  - Google Analytics 设置： 选择或创建一个 Google Analytics 设置变量，配置你的 UA 跟踪 ID。
- 触发： 选择刚刚创建的滚动深度触发器。
发布容器：
- 测试无误后，点击“提交” -> “发布”，将配置发布到线上。

代码示例 (触发器)：

// 滚动深度触发器 (模拟实现)
function checkScrollDepth() {
  const scrollPercentage = (window.pageYOffset / (document.documentElement.scrollHeight - document.documentElement.clientHeight)) * 100;
  if (scrollPercentage >= 25 && !window.scrollDepth25) {
    window.scrollDepth25 = true;
    trackScrollDepth('25%');
  }
  // ... 类似地处理 50%, 75%, 90%
}

代码示例 (代码)：

// Google Analytics 事件代码 (模拟 GTM 的功能)
function trackScrollDepth(percentage) {
  ga('send', 'event', 'Scroll Depth', percentage, window.location.pathname);
}

表格总结：

组件	类型	配置	说明
触发器	滚动深度	垂直滚动深度：设置滚动深度百分比 (例如 25%, 50%, 75%, 90%)；激活条件：根据需要选择所有页面或某些页面。	用于监听页面滚动事件，并在达到设定的滚动深度百分比时触发代码。
代码	Google Analytics: Universal Analytics	跟踪类型：事件；类别：Scroll Depth；操作：{{Scroll Depth Threshold}}%；标签：{{Page Path}}；Google Analytics 设置：你的 UA 跟踪 ID。	用于将滚动深度事件发送到 Google Analytics，方便后续的数据分析。操作使用 {{Scroll Depth Threshold}}% 变量，可以获取当前触发时的滚动深度百分比。标签使用 {{Page Path}} 变量，可以获取当前页面的 URL。
内置变量	变量	Scroll Depth Threshold, Page Path	用于获取滚动深度百分比和页面路径，方便在代码中使用。

4.3 表单提交追踪

目标： 追踪用户提交表单事件，例如联系表单、注册表单。

步骤：

启用内置变量：
- 在 GTM 界面，点击“变量” -> “配置内置变量”。
- 启用“Form ID”、“Form Classes”、“Form Element”、“Form Target”、“Form Text”、“Form URL” 等与表单相关的变量。
创建触发器：
- 点击“触发器” -> “新建”。
- 选择触发器类型为“表单提交”。
- 配置触发器：
  - 此触发器在以下情况下激活： 选择 “某些表单”。
  - 设置过滤条件：
    - 根据 Form ID： Form ID 等于 contact-form (将 contact-form 替换为你的表单 ID)。
    - 根据 Form Classes： Form Classes 包含 contact-form (将 contact-form 替换为你的表单 class)。
    - 根据 Form URL： Form URL 等于 https://www.example.com/contact。
创建代码：
- 点击“代码” -> “新建”。
- 选择代码类型为 “Google Analytics: Universal Analytics”。
- 配置代码：
  - 跟踪类型： 选择 “事件”。
  - 类别： 设置为 “Form Submission”。
  - 操作： 可以使用变量，例如 {{Form ID}}。
  - 标签： 可以设置为 “{{Page Path}}”。
  - Google Analytics 设置： 选择或创建一个 Google Analytics 设置变量，配置你的 UA 跟踪 ID。
- 触发： 选择刚刚创建的表单提交触发器。
发布容器：
- 测试无误后，点击“提交” -> “发布”，将配置发布到线上。

代码示例 (触发器)：

// 表单提交触发器 (JavaScript 代码形式，模拟实现)
function isSpecificForm(formId) {
  return document.getElementById(formId) !== null;
}

// 在表单提交事件发生时调用 (需要监听表单的 submit 事件)
// document.getElementById('contact-form').addEventListener('submit', function() { ... });

代码示例 (代码)：

// Google Analytics 事件代码 (模拟 GTM 的功能)
function trackFormSubmission(formId, pagePath) {
  ga('send', 'event', 'Form Submission', formId, pagePath);
}

表格总结：

组件	类型	配置	说明
触发器	表单提交	激活条件：某些表单；过滤条件：根据 Form ID, Form Classes, Form URL 等规则。	用于监听表单提交事件，并根据设定的过滤条件判断是否触发代码。
代码	Google Analytics: Universal Analytics	跟踪类型：事件；类别：Form Submission；操作：{{Form ID}}；标签：{{Page Path}}；Google Analytics 设置：你的 UA 跟踪 ID。	用于将表单提交事件发送到 Google Analytics，方便后续的数据分析。操作使用 {{Form ID}} 变量，可以获取当前提交的表单 ID。标签使用 {{Page Path}} 变量，可以获取当前页面的 URL。
内置变量	变量	Form ID, Form Classes, Form URL, Page Path	用于获取表单 ID、表单 Class、表单 URL 和页面路径，方便在代码中使用。

4.4 视频互动追踪

目标： 追踪用户与视频的互动，例如播放、暂停、播放完成。

步骤：

使用 YouTube 自动事件跟踪 (如果使用 YouTube 视频)：
- GTM 提供 YouTube 自动事件跟踪功能，可以方便地追踪 YouTube 视频的播放行为。
- 在创建代码时，选择代码类型为 "YouTube 视频跟踪"。
- 配置代码：
  - 跟踪类型： 选择 "YouTube 视频"。
  - 触发器： 创建一个事件触发器，选择事件名称为 "gtm.video"。
  - 其他选项： 根据需要配置其他选项，例如跟踪视频进度。
自定义事件跟踪 (如果使用其他视频平台)：
- 如果使用其他视频平台，需要自定义事件来追踪视频播放行为。
- 需要在视频播放器中埋入 JavaScript 代码，当视频播放、暂停、播放完成时，触发自定义事件。
- 在 GTM 中创建自定义事件触发器，监听这些自定义事件。
- 创建代码，将这些自定义事件发送到 Google Analytics。

代码示例 (自定义事件)：

// 视频播放器中的 JavaScript 代码 (模拟)
const video = document.getElementById('my-video');
video.addEventListener('play', function() {
  dataLayer.push({'event': 'videoPlay', 'videoTitle': video.title});
});
video.addEventListener('pause', function() {
  dataLayer.push({'event': 'videoPause', 'videoTitle': video.title});
});
video.addEventListener('ended', function() {
  dataLayer.push({'event': 'videoComplete', 'videoTitle': video.title});
});

代码示例 (GTM 触发器 – 自定义事件)：

触发器类型：自定义事件
事件名称：videoPlay

代码示例 (GTM 代码 – 自定义事件)：

跟踪类型：事件
类别：Video
操作：Play
标签：{{videoTitle}}

表格总结 (YouTube 视频跟踪)：

组件	类型	配置	说明
代码	YouTube 视频跟踪	跟踪类型：YouTube 视频；触发器：事件名称为 "gtm.video" 的事件触发器；根据需要配置其他选项。	用于自动追踪 YouTube 视频的播放行为，例如播放、暂停、播放完成、视频进度等。
触发器	事件	事件名称：gtm.video	用于监听 YouTube 视频事件。
内置变量	变量	gtm.videoEvent, gtm.videoTitle, gtm.videoDuration, gtm.videoPercent, gtm.videoStatus	用于获取 YouTube 视频事件的相关信息，例如事件类型、视频标题、视频时长、视频播放百分比、视频状态等。

4.5 自定义事件追踪

目标： 追踪其他特定行为，例如 AJAX 加载内容。

步骤：

在网站代码中埋入 dataLayer.push() 代码：
- 当 AJAX 内容加载完成时，调用 dataLayer.push() 方法，将事件信息推送到数据层。
```
// AJAX 内容加载完成时
dataLayer.push({'event': 'ajaxContentLoaded', 'contentName': 'Product List'});
```
在 GTM 中创建自定义事件触发器：
- 点击“触发器” -> “新建”。
- 选择触发器类型为“自定义事件”。
- 配置触发器：
  - 事件名称： 输入与 dataLayer.push() 中 event 属性相同的值，例如 ajaxContentLoaded。
创建代码：
- 点击“代码” -> “新建”。
- 选择代码类型为 “Google Analytics: Universal Analytics”。
- 配置代码：
  - 跟踪类型： 选择 “事件”。
  - 类别： 设置为 “AJAX Content”。
  - 操作： 设置为 {{contentName}} (需要创建一个数据层变量 contentName)。
  - 标签： 可以设置为 “{{Page Path}}”。
  - Google Analytics 设置： 选择或创建一个 Google Analytics 设置变量，配置你的 UA 跟踪 ID。
- 触发： 选择刚刚创建的自定义事件触发器。

表格总结：

组件	类型	配置	说明
触发器	自定义事件	事件名称：与 `dataLayer.push()` 中的 `event` 属性值相同。	用于监听自定义事件。
代码	Google Analytics: Universal Analytics	跟踪类型：事件；类别：AJAX Content；操作：{{contentName}}；标签：{{Page Path}}；Google Analytics 设置：你的 UA 跟踪 ID。	用于将自定义事件发送到 Google Analytics，方便后续的数据分析。操作使用 {{contentName}} 变量，可以获取 `dataLayer.push()` 中 `contentName` 属性的值。
数据层变量	变量	contentName	用于从数据层中获取 `contentName` 属性的值。

5. 数据验证与调试

追踪配置完成后，需要进行数据验证和调试，确保数据准确无误。

使用 GTM 预览模式：
- 开启 GTM 预览模式，在网站上进行操作，查看 GTM 是否触发了相应的触发器和代码。
- 检查发送到 Google Analytics 的数据是否正确。
使用 Google Analytics 实时报告：
- 在 Google Analytics 中查看实时报告，验证事件是否被正确追踪。
使用 Google Analytics Debugger 插件：
- 安装 Google Analytics Debugger 插件，可以更详细地查看发送到 Google Analytics 的数据。
检查代码和触发器配置：
- 仔细检查 GTM 代码和触发器的配置，确保没有错误。
- 特别注意变量的配置，确保变量能够正确获取所需的值。

6. 数据分析与应用

收集到 SEO 事件数据后，我们需要进行数据分析，并将分析结果应用于 SEO 策略的优化。

分析链接点击数据： 了解用户对哪些内容感兴趣，优化内容结构，提升内部链接的质量。
分析滚动深度数据： 了解用户对页面内容的阅读程度，优化重要内容的位置，提升内容吸引力。
分析表单提交数据： 评估表单的易用性，优化表单转化率，提升潜在客户的线索数量。
分析视频互动数据： 了解用户对哪些视频内容感兴趣，评估视频内容的效果，优化视频 SEO。
分析 AJAX 加载内容数据： 确保 AJAX 内容也能被搜索引擎抓取和索引。
结合其他 SEO 数据： 将 SEO 事件数据与关键词排名、流量、页面加载速度等数据结合起来分析，可以更全面地了解 SEO 效果。

7. 常见问题与解决方案

GTM 代码未正确安装： 检查 GTM 代码是否正确放置在网站的每个页面。
触发器未正确触发： 检查触发器的配置，确保触发条件设置正确。
代码未正确发送数据： 检查代码的配置，确保 Google Analytics 设置变量配置正确。
数据层变量未正确获取值： 检查数据层变量的配置，确保变量能够正确获取 dataLayer.push() 中属性的值。
数据延迟： Google Analytics 数据可能存在一定的延迟，请耐心等待。
采样： 如果网站流量过大，Google Analytics 可能会对数据进行采样，导致数据不准确。可以考虑升级到 Google Analytics 360，或者使用其他数据分析工具。
数据过滤： 检查 Google Analytics 中是否设置了数据过滤规则，导致某些数据被过滤掉。

最后的话

利用 Google Tag Manager 追踪 SEO 事件是一个持续优化的过程。我们需要不断学习新的技术，不断尝试新的方法，才能建立一套完善的 SEO 追踪体系，最终提升网站的 SEO 效果。希望大家都能掌握今天所讲的内容，并将其应用到实际工作中。

关键在于理解用户行为

掌握 GTM 追踪 SEO 事件的核心在于理解用户在网站上的行为。链接点击告诉你用户喜欢什么，滚动深度告诉你内容是否吸引人，表单提交告诉你线索质量如何。利用这些数据，我们才能做出更有效的 SEO 决策。

利用 Google Tag Manager 追踪 SEO 事件：一场深入的讲座

讲座大纲

1. SEO 事件追踪的必要性

2. 可追踪的 SEO 事件类型

3. GTM 环境搭建

4. 基于 GTM 的事件追踪实现

4.1 链接点击追踪

4.2 滚动深度追踪

4.3 表单提交追踪

4.4 视频互动追踪

4.5 自定义事件追踪

5. 数据验证与调试

6. 数据分析与应用

7. 常见问题与解决方案

最后的话

发表回复 取消回复

发表回复取消回复