GTM 设置追踪使用者的Cookies的方法和教程

利用 Google Tag Manager (GTM) 设置追踪使用者的 Cookies，主要是为了记录用户行为、偏好或者其他相关数据，方便后续分析和营销活动。以下是设置 Cookies 的详细步骤：

前提准备

确保已安装并部署 GTM 代码：在您的网站中正确安装了 GTM 容器代码。
明确 Cookies 的用途：确定需要追踪哪些数据，例如用户的登录状态、访问来源、页面行为等。
了解 Cookie 法规：如果您的用户来自欧盟等地区，请确保遵守 GDPR 和其他隐私法规，并获取用户的同意。

步骤一：创建 JavaScript 变量

登录 GTM 后台：进入 GTM 容器管理界面。
创建变量：
- 在左侧导航栏选择 “变量”，点击 “新建”。
- 命名为 “Get Cookie” 或类似名称。
- 选择 “第一方 Cookie” 类型。
配置 Cookie 变量：
- 在配置页面，输入目标 Cookie 的名称。例如，如果要追踪 user_session Cookie，填写 user_session。
- 保存设置。

步骤二：创建触发器

触发器决定何时读取或写入 Cookies。

新建触发器：
- 点击左侧的 “触发器”，选择 “新建”。
- 命名为 “Cookie Tracking Trigger”。
选择触发条件：
- “所有页面”：在每个页面加载时触发。
- “特定页面”：在特定 URL 上触发。
- “事件触发”：如按钮点击、表单提交时触发。
- 根据需求设置触发条件，例如：
保存触发器。

步骤三：创建标签

标签负责执行代码来读取、写入或发送 Cookie 数据。

新建标签：
- 点击左侧的 “标签”，选择 “新建”。
- 命名为 “Set Cookie Tag” 或 “Track Cookie Tag”。
选择标签类型：
- 如果需要记录 Cookie 数据，选择 “自定义 HTML”。
- 如果需要发送数据到 Google Analytics，选择 “GA4 配置” 或 “GA4 事件”。

输入代码（示例代码）：使用 JavaScript 操作 Cookies：

html复制代码<script>
    // 写入 Cookie 示例
    document.cookie = "user_session=" + encodeURIComponent("example_value") + "; path=/; max-age=3600";    // 读取 Cookie 示例
    function getCookie(name) {        const value = `; ${document.cookie}`;        const parts = value.split(`; ${name}=`);        if (parts.length === 2) return parts.pop().split(';').shift();
    }    console.log(getCookie('user_session'));</script>

关联触发器：将标签与前面创建的触发器（如“Cookie Tracking Trigger”）关联。
保存标签。

步骤四：测试与预览

点击 GTM 界面右上角的 “预览” 按钮。
在弹出的 Tag Assistant 中输入您的网站域名。
验证：
- 检查触发器是否正确触发。
- 检查 Cookies 是否被正确写入或读取。

步骤五：发布更改

测试无误后，点击右上角的 “提交” 按钮。
填写版本说明，例如 “Added Cookie Tracking”。
点击 “发布”。

注意事项

Cookie 生命周期：根据需求设置 max-age 或 expires 属性，决定 Cookie 的有效期。
安全性：
- 对于敏感数据，确保 Cookie 使用 Secure 和 HttpOnly 属性。
- 使用 SameSite 属性避免跨站点请求伪造（CSRF）攻击。
隐私合规：
- 如果需要遵守 GDPR，建议结合 用户同意管理平台 (CMP)。
- 使用 GTM 的 Consent Mode 确保在用户同意前不记录 Cookies。

通过以上步骤，您可以成功使用 GTM 来设置和管理用户 Cookies，并实现灵活的追踪和分析功能。

方法1 – 用「自订HTML」设置Cookie

假设公司今天与网红合作，请网红宣传并引导流量至网站上购买产品，为了方便统计哪一位网红的成效较好，每一位网红所使用的网址都带有特定的参数，类似下面这样。

www.abc.com/?influencer_id=NetRed

(红字为辨别网红的参数)

透过不同的influencer_id，我们便可以知道哪一位合作伙伴有促成本次的购买，方便作为异业合作部门行销成效的统计。

你可能会想说，既然是网址的参数，我们用「网址」变数来取得资料是不是就可以了？

没错，如果你的网址是直接来到结帐页面，使用者从点击网址到结帐完成，一气呵成，没有换页的话，那么这么做是可行的。

但只要有了换页行为，原本在网址上的参数就会消失，我们就无从得知是来自于哪个合作伙伴的导购了。

这也是为什么我们需要先将该参数存入Cookie 中的原因，如此一来，才能够帮助我们做到较为精准的统计。
ㅤㅤ

设置「网址」变数

首先，我们需要在网址中出现 influencer_id时，抓取该参数的值，这部分的操作相当简单，只要使用「网址」变数来取得资料就可以。

GTM 左侧面板选择「变数」> 右边下方「使用者定义的变数」区块选择「新增」> 选择「网址」变数。

ㅤ

在「元件类型」下拉选单中选择「查询（query）」，于「查询键」栏位输入influencer_id。

ㅤ

完成之后，记得先到「预览模式」测试，确保当使用者透过带有参数的网址来到网站时，设定的「网址」变数有抓到该参数的「值」。

确定有正确抓取到我们需要的「值」之后，就可以开始来用「自订HTML」代码设定Cookie 了。

ㅤ

设定「自订HTML」代码

接下来，我们要将一段Javascript 代码放置到「自订HTML」代码中，看不懂这串Javascript 代码的朋友没关系，只要知道如何复制贴上并且修改几个地方就可以了（当然，如果你愿意去了解，更好）。

这段Javascript 在处理的，是将我们需要的「值」（也就是上一个段落设定的「网址」变数），存入到Cookie 当中。

如此一来，尽管使用者换页造成网址的参数遗失，我们依然可以知道这位使用者曾经透过特定合作伙伴的连结来到网站（只要没有使用不同浏览器回到网站的话）。

GTM 左侧面板选择「代码」 > 右上角点击「新增」> 点击「请选择代码以开始设定」> 右侧面板选择「自订HTML」

ㅤ

将连结内的Javacript 代码贴入到HTML 栏位中，这串Javascript 看不懂没有关系，我们只需要修改下图中第14 行中括号内的3 个项目就可以，这3 个项目分别代表的是：

「InfluencerID」的位置是设置你的「Cookie 名称」的地方。
「{{PageUrlV – influencer_id}}」的位置为设置「Cookie 值」的地方。
「7」的位置为设置「Cookie 到期时间」的地方。

括号内依序为「Cookie 名称」、「Cookie 值」以及「Cookie 到期时间」，可以到这边复制完整的代码，再进行修改就可以了。

设定完毕之后，按下储存，到这边，我们就透过「自订HTML」代码完成了设置Cookie 的代码设定。

你也可以直接复制以下代码（红色标示处是要你要更改的部分）：

<script>
  // 函數：設置 Cookie
  function setCookie(name, value, days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
  }
  // 調用函數設置 Cookie
  setCookie('輸入你的Cooki名稱', '{{你的「網址」變數}}',輸入Cookie於多久到期); 
 </script>

ㅤ

补充一下：在「自订HTML」代码中使用其它变数

GTM「自订HTML」代码有个很棒的功能，就是你可以在代码中呼叫该GTM 容器中的「变数」，只要输入「{{」(不含上下引号)，就会出现「变数」的下拉选单，不管是「内建变数」或是「使用者自订义」的变数，都会显示在选单当中，非常方便。

未来如果有遇到类似的设定时，都可以用这样的方式在「自订HTML」代码中取得该容器中其它的变数「值」。

ㅤ

设定「触发条件」

我们不需要这段「自订HTML」代码在全站所有页面启动，只需要当网址有出现influencer_id的时候启动这组代码就可以。

因此，我们会使用「网页浏览」触发条件，设定方式如下：

GTM 左侧面板选择「触发条件」 > 右上角选择「新增」> 点击中间「请选择触发条件类型以开始设定」 > 选择「网页浏览」

ㅤ

选择「部分的网页浏览」，条件设定当选择「Page URL」包含「influencer_id」时，满足该触发条件，进而启动「自订HTML」代码。

（注意，要选择「Page URL」变数，才有办法抓到网址末端「？」之后的参数，也就是范例中的influencer_id，如果选择「Page Path」变数，是抓不到参数资料的。

关于网址结构的部分，可以参考文章「GTM 网址变数介绍」中的网址结构段落，有更进一步的解释。）

ㅤ

设定完毕之后，将触发条件与前面的「自订HTML」代码进行绑定，就可以透过「预览模式」进行测试了。

测试一下

在「预览模式」中，预期应该要看到「自订HTML」代码的启动，接着我们还要检查网页上是否有储存到我们预期的Cookie。

一样，我们测试带有参数influencer_id=RedNet 的网址。

ㅤ

在「预览模式」画面中，应该要看到「自订HTML」代码成功启动。

ㅤ

接着透过网页开发者工具检查，Cookie 是否有成功设定，且存入正确的「值」。
（以我们的范例来说，Cookie 名称应为InfluencerID，其「值」为RedNet。）

如何透过网页开发者工具检查（Dev Tool）？

于网页的空白处点选右键> 选择「检查」> 于检查工具的页签中选择「Application」 > 左侧选单中选择并展开「Cookies」 > 选择自家网站网域> 应于右侧看到我们所设定的Cookie

如果可以看到我们设定的Cookie 名称，以及抓取到正确的「值（RedNet）」，就代表设定成功，可以将代码发布了。

方法2 – 用「范本库」中的代码范本

如果你看到Javascript 代码就感到头晕，没事，这是可以理解的，要行销人员去认识这些如同无字天书的代码，实在是劳心劳力。

所以，接下来要介绍的方式，是用GTM 中的「范本库」来协助我们，步骤相对简单，也不用看到扰人的Javascript 代码，ㄧ样能完成所需的Cookie 设定。

ㅤ

GTM 左侧面板选择「代码」> 右上角点选「新增」> 「请选择代码类型以开始设定」 > 选择社群范本库（如下图）> 于范本库中搜寻「Cookie」 > 选择「Cookie Creator」

选择后，将代码「新增至工作区」 > 要使用社群范本需要给予权限，这边「新增」

（如果不给予权限就无法使用，这边要注意的是，之所以叫做社群范本就是指这些范本并非官方开发，因此如果你对使用上有疑虑，建议使用前述的「自订HTML」代码方式进行设定。）

ㅤ

调整范本设定

接下来，我们必须要对范本进行一个小调整，以便我们可以新增任何我们想要的Cookie 名称。

GTM 介面左侧面板选择「范本」 > 选择右侧「Cookie Creator」进入范本设定画面> 点击「权限」页签> 展开「设定Cookie」选单> 删除第二列的Cookie > 编辑第一列的Cookie

ㅤ

我们必须将Cookie 名称的栏位改为「*」，表示允许任何Cookie 名称的命名，接着点选右上角的储存。

否则尽管在GTM 「预览模式」中会看到代码启动，但因为使用者针对Cookie 的命名与范本预设名称不符，Cookie 便不会设置成功。

ㅤ

设定「范本」代码

完成范本的新增以及设定之后，接下来，就可以使用该范本进行代码设定，抓取我们需要的「值」，并将其存到Cookie 当中。

翻译成白话文就是

用范本「Cookie Creator」建立代码，抓取网址末端的参数「influencer_id」，并将其透过「Cookie Creator」存到Cookie 中。

GTM 左侧面板选择「触发条件」 > 右上角选择「新增」> 点击中间「请选择触发条件类型以开始设定」 > 选择「Cookie Creator」

ㅤ

接下来，就如同修改「自订HTML」代码一样，依序在以下栏位中，填入「Cookie 名称」、「Cookie 值」以及「Cookie 到期时间」，只不过这次的设定介面，相较起来友善了许多。

ㅤ

最后，将透过Cookie Creator 设定的代码与前面设定的「网页浏览」触发条件进行绑定后，进入「预览模式」进行测试，预期应该要在开发者工具的Application 页签的Cookie 清单中看到刚刚设定的Cookie (名称为InfluencerIdByCookieCreator )。

（测试流程与前面所做的相同，这边就不再重复赘述。）

ㅤ

确认该Cookie 存在之后，就表示设定完成，可以提交你的GTM 容器了。

了解如何设定之后，接下来最重要的，就是要知道可以如何应用。

关于这点，我们在过去的文章「GTM 变数介绍：第一方Cookie(1st Party Cookie Variable)」中有详尽介绍了应用的方式，

文中同样是使用inluencer_id作为范例，搭配这篇一起操作，你应该就能举一反三应用在其它地方了。