特定Chrome版本下gtag导致输入控件失焦问题求助

在使用Google标签（gtag）上报转化数据时，仅在特定Chrome版本中出现异常：

测试环境 #

• Chrome: 116.0.5845.110 (正式版) 64位
• React: 17.0.1
• Gatsby: 4.6.0

场景与异常表现 #

• 业务需求：跟踪用户从注册到登录的全流程转化标签
• 当前实现：通过自定义trackTag函数向Google Tag Manager(GTM)上报转化数据，点击事件触发该函数
• 异常情况：
  • 每次点击页面元素或间隔一定时间，页面会自动生成名为join-ad-interest-group的陌生iframe
  • 页面内的输入控件无法正常获取焦点
  • 附截图：展示异常生成的join-ad-interest-group iframe

1. 排查GTM/gtag的广告相关配置 #

join-ad-interest-group iframe是Chrome Topics API（广告兴趣分组功能）的产物，大概率是GTM中配置了和广告兴趣、受众群体相关的标签触发逻辑，在Chrome 116版本出现兼容性冲突：

• 登录GTM后台，逐一检查所有标签，尤其是和Google Ads、Topics API、用户兴趣分组相关的触发规则，临时禁用这类标签后测试是否还会生成异常iframe。
• 检查项目中trackTag函数的实现代码，确认是否在上报时无意中调用了广告相关的API接口。

2. 临时关闭Chrome的Topics API #

针对受影响的测试环境或用户，可以手动关闭Chrome的Topics API功能：

1. 打开Chrome浏览器，地址栏输入 chrome://flags/#privacy-sandbox-ads-apis
2. 将Privacy Sandbox Ads APIs选项设置为Disabled
3. 重启Chrome后验证问题是否消失

3. 修复输入框失焦问题 #

如果异常iframe导致输入框失焦，可在React组件中添加监听逻辑，强制输入框重新获取焦点：

import { useRef, useEffect } from 'react';

function YourInputComponent() {
  const inputRef = useRef(null);

  useEffect(() => {
    const handleWindowBlur = () => {
      // 判断是否是异常iframe夺走了焦点
      const activeEl = document.activeElement;
      if (activeEl?.tagName === 'IFRAME' && activeEl?.name === 'join-ad-interest-group') {
        inputRef.current?.focus();
      }
    };

    window.addEventListener('blur', handleWindowBlur);
    return () => window.removeEventListener('blur', handleWindowBlur);
  }, []);

  return <input ref={inputRef} placeholder="请输入内容" />;
}

4. 升级Chrome版本 #

Chrome 116属于旧版本，后续官方版本大概率修复了该兼容性问题，建议升级到最新稳定版Chrome后再验证问题是否解决。

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