CSP环境下从analytics.js迁移gtag.js后GA受众数据为空如何解决

你当前的代码存在两个基础逻辑错误，是数据为空的首要原因：

• 你加载gtm.js时传入的ID参数是UA-XXX-1（Google Analytics媒体ID），但GTM要求传入的必须是GTM-开头的容器ID，这个错误会直接导致GTM脚本加载失败，后续所有gtag逻辑都无法同步到Google服务端
• 你当前的实现混用了GTM容器加载逻辑和gtag.js的独立配置逻辑，两种方案二选一即可，不需要同时部署

第一步：确定你要使用的部署方案，二选一即可 #

方案A：不使用GTM，直接用gtag.js实现原有统计+Ads再营销 #

这种方案不需要改动现有CSP太多，只需要新增gtag相关的资源域名放行：

1. 先删除你现在写的GTM加载代码片段，替换为官方gtag.js加载代码

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXX-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  // 原有GA统计配置
  gtag('config', 'UA-XXX-1', {
    'user_id': uuid,
    'custom_map': {'dimension1': 'user_status'}
  });
  // 新增Google Ads再营销配置，替换为你的Ads转化ID
  gtag('config', 'AW-你的Ads账户ID');
  gtag('event', 'user_status_event', {'user_status': user_status});
</script>

2. 调整CSP规则，新增以下放行规则：

• script-src 新增 https://www.googletagmanager.com https://www.google-analytics.com https://www.googleadservices.com https://googleads.g.doubleclick.net
• img-src 新增 https://www.google-analytics.com https://www.googleadservices.com https://googleads.g.doubleclick.net
• connect-src 新增 https://www.google-analytics.com

方案B：使用GTM统一管理所有标签 #

如果你需要用GTM管理后续的其他追踪标签，就用这个方案：

1. 先去GTM后台创建容器，拿到GTM-开头的容器ID，替换你现有GTM加载代码里的UA-XXX-1
2. 不要在页面硬写gtag的config和event逻辑，全部转到GTM后台配置：

• 在GTM后台新增Google Analytics通用分析标签，填入你的UA-ID，配置自定义维度、user_id参数
• 新增Google Ads再营销标签，填入你的Ads转化ID
• 配置触发规则，让两个标签在页面加载时触发

3. 按照GTM的CSP要求配置放行规则即可

第二步：前端验证 #

部署后打开浏览器控制台，做以下检查：

• 切换到网络面板，搜索gtag.js或者gtm.js，确认返回状态是200，没有被CSP拦截（如果被拦截控制台会报Refused to load开头的CSP错误）
• 搜索collect，确认Google Analytics的上报请求正常发出，状态码为200
• 进入Google Analytics后台的实时报告，确认访问数据能正常上报，再营销受众数据会有24-48小时的延迟，实时数据正常就说明配置没问题

• Google Ads再营销受众需要满足最低用户数量要求（通常是至少100个独立用户），达到阈值后才会显示为可用状态
• 如果你的站点有欧盟用户，需要确保已经完成cookie同意横幅的配置，用户同意后再加载追踪脚本，否则数据会被Google拦截

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