刚好之前做过类似的营销用户统计系统，来给你梳理下客户端和服务端设置跟踪Cookie的核心差异，再结合你的需求给出落地的实现思路：

一、客户端与服务端设置跟踪Cookie的核心区别 #

• 客户端（浏览器JS）设置：
  完全在前端用document.cookie操作，好处是不用跟服务器打交道，改完就生效；但缺点也很明显——容易被浏览器的隐私拦截策略（比如Safari的智能跟踪防护）干掉，而且用户禁用JS的话直接失效。适合做简单的临时跟踪，或者给服务端方案做补充，但稳定性差一截。
• 服务端设置：
  通过HTTP响应头的Set-Cookie字段下发，浏览器只要没完全禁用Cookie就必须遵守，稳定性拉满；唯一的小代价是需要服务器处理每个请求，但UTM跟踪逻辑简单，这点性能开销基本可以忽略。这也是企业级营销跟踪的首选方案，毕竟要确保用户的来源数据不丢。

二、针对你的营销统计需求的具体实现 #

你的需求是通过UTM参数统计各营销活动的获客数，完整的服务端处理逻辑应该是这样的：

1. 先统一营销活动URL规范 #

所有营销活动的推广链接必须带上标准UTM参数，比如：

https://example.com/?utm_source=facebook&utm_medium=cpc&utm_campaign=jan

几个关键参数的作用：

• utm_source：标记流量的具体来源（比如facebook、google、小红书）
• utm_medium：标记流量的媒介类型（比如cpc付费点击、organic自然搜索、email邮件）
• utm_campaign：标记具体的营销活动（比如jan_new_year_sale、summer_promo）

2. 服务端请求处理流程 #

服务器收到每个请求时，按以下顺序处理：

• 第一步：优先读取URL中的UTM参数
  如果请求URL里带了utm_*类参数，直接把这些参数的值存入Cookie，建议设置30天左右的过期时间（根据你的业务周期调整），Cookie的键就用参数名就行，比如utm_source=facebook。
• 第二步：无UTM参数时检查Referer主机
  如果URL里没UTM参数，就看请求的Referer头的主机地址：
  • 如果Referer是来自已知的合作渠道（比如google.com、facebook.com），可以自动补对应的UTM参数并存入Cookie（比如Referer是facebook.com，就设utm_source=facebook，utm_medium=referral）；
  • 如果Referer是自家域名或者未知来源，就保留现有Cookie（如果有的话），别乱改。

3. 前端补充方案（可选） #

如果你的网站有纯静态页面没法走服务端处理，可以加一段前端JS做兜底：

// 前端捕获UTM参数并存入Cookie
function setUtmCookie() {
  const urlParams = new URLSearchParams(window.location.search);
  const utmKeys = ['utm_source', 'utm_medium', 'utm_campaign'];
  utmKeys.forEach(key => {
    const value = urlParams.get(key);
    if (value) {
      // 设置30天过期，全站有效
      document.cookie = `${key}=${encodeURIComponent(value)}; max-age=2592000; path=/`;
    }
  });
}
// 页面加载时执行
window.addEventListener('load', setUtmCookie);

注意：前端设置的Cookie优先级要低于服务端的，避免覆盖服务端的精准数据。

内容的提问来源于stack exchange，提问作者Sahil Sharma