如何在Google Apps Script Add-on中实现FullStory？求技术指导

核心排查方向 #

1. 外部脚本加载限制 #

Google Apps Script 的 HTML 服务对第三方脚本有安全拦截机制，尤其是在侧边栏/对话框模式下，CDN 加载的脚本可能被阻断。

• 解决：
  • 将 FullStory 脚本内联到 HTML 的 <head> 中，而非引用外部 CDN 链接；
  • 确认使用 HtmlService.createHtmlOutputFromFile() 加载页面，避免手动拼接 HTML 字符串导致的脚本解析异常。

2. 权限与隐私配置冲突 #

• 检查 Google Workspace 应用权限：确保插件已申请 https://www.googleapis.com/auth/script.container.ui 基础 UI 权限，且 FullStory 域名未被 Google 安全策略拦截；
• 适配 FullStory iframe 配置：在脚本中添加 window['_fs_allowIframe'] = true;，适配 Google Apps Script 的 iframe 运行环境。

3. 部署缓存干扰 #

• 部署插件时选择新版本发布，避免测试版本的缓存导致脚本未更新；
• 用无痕模式打开插件，清除浏览器缓存后重试。

代码检查要点 #

Login.html 配置校验 #

确保 FullStory 脚本参数正确，尤其是组织 ID：

<head>
  <script>
    window['_fs_debug'] = false;
    window['_fs_host'] = 'fullstory.com';
    window['_fs_org'] = '你的FullStory组织ID'; // 替换为实际ID
    window['_fs_namespace'] = 'FS';
    window['_fs_allowIframe'] = true; // 新增适配iframe环境
    (function(m,n,e,t,l,o,g,y){
        if (e in m) {if(m.console && m.console.log) {m.console.log('FullStory namespace conflict. Please set window["_fs_namespace"].');} return;}
        g=m[e]=function(a,b,s){g.q?g.q.push([a,b,s]):g._api(a,b,s);};g.q=[];
        o=n.createElement(t);o.async=1;o.src='https://'+_fs_host+'/s/fs.js';
        y=n.getElementsByTagName(t)[0];y.parentNode.insertBefore(o,y);
        g.identify=function(i,v,s){g(l,{uid:i},s);if(v)g(l,v,s)};g.setUserVars=function(v,s){g(l,v,s)};g.event=function(i,v,s){g('event',{n:i,p:v},s)};
        g.anonymize=function(){g.identify(!!0)};
        g.shutdown=function(){g("rec",!1)};g.restart=function(){g("rec",!0)};
        g.log=function(a,b){g("log",[a,b])};
        g.consent=function(a){g("consent",!arguments.length||a)};
        g.identifyAccount=function(i,v){o='account';v=v||{};v.acctId=i;g(o,v)};
        g.clearUserCookie=function(){g("clearUserCookie")};
    })(window,document,window['_fs_namespace'],'script','user');
  </script>
</head>

• 确认 _fs_org 是 FullStory 后台获取的正确 ID，无拼写错误；
• 将脚本放在 <head> 最顶部，避免被其他脚本阻塞加载。

macro.gs UI 加载检查 #

确保 UI 初始化代码未限制外部资源：

function showLoginSidebar() {
  const html = HtmlService.createHtmlOutputFromFile('Login')
      .setTitle('Login')
      .setWidth(300);
  SpreadsheetApp.getUi() // 根据插件类型替换为DocumentApp/SlidesApp等
      .showSidebar(html);
}

• 若手动设置过 setXFrameOptionsMode，确保值为 HtmlService.XFrameOptionsMode.ALLOWALL。

网络面板分析重点 #

从 FullStory 网络面板截图中关注：

• fs.js 请求状态：403 代表域名被拦截，404 代表脚本 URL 错误；
• /rec/page 等采集接口请求：无请求说明脚本未初始化，有错误则查看响应中的具体提示。

调试测试步骤 #

1. 在 HTML 中添加调试代码，确认 FullStory 对象加载状态：

<script>
  window.addEventListener('load', () => {
    console.log('FullStory 对象:', window.FS);
    if (window.FS) {
      FS.event('插件加载测试'); // 触发测试事件，查看FullStory后台是否接收
    }
  });
</script>

2. 打开浏览器开发者工具（F12），查看 Console 标签页的报错信息，定位脚本加载失败、权限冲突等问题。

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