如何在浏览器端引入@iabtcf/core库解码euconsent-v2 cookie？

完全没问题，@iabtcf/core库本身就支持浏览器端环境，你可以通过两种常见方式在客户端引入并使用它的解码功能：

方式1：直接引入UMD包 #

不需要构建工具，直接在HTML中添加script标签引入库的UMD版本，就能在全局作用域中使用相关API：

<!-- 引入@iabtcf/core的UMD包，可从npm包的dist目录获取，或通过可靠CDN服务加载（请使用稳定版本） -->
<script src="iabtcf.core.umd.min.js"></script>

<script>
// 获取euconsent-v2 cookie的值
function getConsentCookie() {
  const cookieName = 'euconsent-v2';
  const cookies = document.cookie.split(';').map(cookie => cookie.trim());
  for (const cookie of cookies) {
    if (cookie.startsWith(`${cookieName}=`)) {
      return cookie.substring(cookieName.length + 1);
    }
  }
  return null;
}

// 解码并检查分析同意
const consentString = getConsentCookie();
if (consentString) {
  // 解码consent字符串
  const tcModel = window.iabtcf.TCString.decode(consentString);
  
  // 检查是否同意分析类目的跟踪（根据IAB框架配置替换对应目的ID）
  const hasAnalyticsConsent = tcModel.purposeConsents.get('analytics');
  
  if (hasAnalyticsConsent) {
    // 启用分析跟踪逻辑
    console.log('已获得分析同意，启动跟踪');
  } else {
    console.log('未获得分析同意，不启动跟踪');
  }
}
</script>

方式2：通过构建工具导入（如Webpack/Vite） #

如果你的标签管理器或项目使用了前端构建工具，可以直接安装并导入库：

# 安装依赖
npm install @iabtcf/core

然后在代码中导入使用：

import { TCString } from '@iabtcf/core';

// 获取cookie的逻辑同上
function getConsentCookie() {
  const cookieName = 'euconsent-v2';
  const cookies = document.cookie.split(';').map(cookie => cookie.trim());
  for (const cookie of cookies) {
    if (cookie.startsWith(`${cookieName}=`)) {
      return cookie.substring(cookieName.length + 1);
    }
  }
  return null;
}

const consentString = getConsentCookie();

if (consentString) {
  const tcModel = TCString.decode(consentString);
  const hasAnalyticsConsent = tcModel.purposeConsents.get('analytics');
  // 执行跟踪启用/禁用逻辑
}

关键注意事项 #

• 选择稳定版本的@iabtcf/core，避免版本迭代带来的API兼容问题；
• 必须在用户完成同意弹窗交互后再执行解码逻辑，否则可能获取到空值或无效的consent字符串；
• 确认分析工具对应的IAB目的ID是否正确，部分场景可能使用自定义目的，需调整purposeConsents.get()的参数值。

内容的提问来源于stack exchange，提问作者Alberto De Caro