如何追踪Google One Tap登录中「Continue as X」按钮的点击事件

• 方案1：通过Google One Tap的内置事件间接推断
  利用官方提供的事件组合，可间接判断用户点击行为：

  1. 监听promptMomentNotification事件，当返回的momentType为display时，标记弹窗已显示并记录当前时间戳。
  2. 当callback事件触发时，检查弹窗状态为「已显示」且时间差在合理区间（如1-30秒），即可判定用户点击了目标按钮。
  3. 配合cancel事件过滤非点击场景：若cancel的reason为user_cancel（点击关闭按钮）或tap_outside（点击弹窗外部），则排除点击按钮的可能。
     代码示例：

  let oneTapDisplayed = false;
  let oneTapDisplayTime = 0;
  
  window.google.accounts.id.initialize({
    client_id: 'YOUR_CLIENT_ID',
    callback: handleCredentialResponse,
    cancel_on_tap_outside: true
  });
  
  window.google.accounts.id.prompt((notification) => {
    if (notification.isDisplayed()) {
      oneTapDisplayed = true;
      oneTapDisplayTime = Date.now();
    }
  });
  
  function handleCredentialResponse(response) {
    if (oneTapDisplayed && (Date.now() - oneTapDisplayTime) < 30000) {
      // 此处记录用户点击「Continue as X」的操作
      console.log('用户点击了Continue as X按钮');
    }
    // 处理后续登录逻辑...
  }
  
  // 重置弹窗状态
  window.google.accounts.id.cancel(() => {
    oneTapDisplayed = false;
  });
  

  优点：完全基于官方API，无跨域风险，兼容性好；缺点：属于间接推断，需过滤自动登录场景（自动登录的momentType为auto，可在promptMomentNotification中排除）。

• 方案2：监听父窗口点击位置结合弹窗容器
  虽然无法访问跨域iframe内部DOM，但可通过父窗口中One Tap的容器元素判断点击范围：

  1. 获取One Tap的容器节点（通常是带有g_id_signin类的div）。
  2. 给父窗口添加click事件监听器，计算点击坐标是否落在容器元素的边界内。
  3. 结合弹窗显示状态，若点击发生在弹窗显示期间且坐标在容器内，则判定为点击了弹窗区域。
     注意：需处理弹窗动态位置调整的情况，且只能判断点击了弹窗区域，无法精确到「Continue as X」按钮本身。

• 方案3：结合Google Analytics事件追踪（若已集成）
  若已接入Google Analytics，可通过gtag自定义事件标记点击行为：
  在callback触发时，发送自定义登录事件，明确标记事件来自Google One Tap的用户点击。
  代码示例：

  function handleCredentialResponse(response) {
    gtag('event', 'sign_in', {
      'method': 'google_one_tap',
      'event_category': 'authentication',
      'event_label': 'continue_as_user'
    });
    // 处理后续登录逻辑...
  }
  

  优点：无需复杂逻辑，直接利用GA的事件体系；缺点：依赖GA集成，仅适用于需通过GA追踪的场景。

内容的提问来源于stack exchange，提问作者A.B.