单页面应用支持

单页面应用支持

开启单页面应用支持

FrontJS 支持单页面应用路由跳转感知功能，在 Web 项目设置中可以在 项目管理 中的 项目设置 页面打开，勾选后 FrontJS 即收集单页面应用跳转数据, 并在页面访问及时间详情中显示。

进入 项目管理 中的 项目设置 中 找到 SPA (单页面应用) 优化 选项区, 有以下两个相关选项：

记录页面跳转: 勾选以激活 SPA 页面跳转监控，此时仅对依靠 hashtag (#) 作为路由的 SPA (即 URL中以#分隔开页面URL及路由) 起作用。
监听 History API : 对于不使用 hashtag (#) 作为路由的 SPA 需要打开此选项。

对统计工具的支持

有些情况，我们需要路由变更的同时并驱动一些统计代码。一般情况，我们需要将统计代码集成到路由里, 但是侵入式的植入会使容积代码的维护变得更麻烦。

FrontJS SDK 提供了事件侦听器, 侦听器支持单页面应用跳转事件, 统计代码可以放在注册在 FrontJS SDK 中的侦听器内执行, 避免污染业务代码。

例如: Google Analytics 默认对 SPA 内的页面跳转是不能被感知的, 可以通过 FrontJS SDK 的 enterpage 事件来使 GA 支持监控单页面应用跳转:

window.FrontJS.addEventListener('enterpage', function (e) {
  // use ga
  ga('set', 'page', e.url.split(window.location.host)[1]);
  ga('send', 'pageview');
  // use gtag
  gtag('config', 'TRACK_ID', {'page_path': e.url.split(window.location.host)[1]});
})

注意：在使用 gtag 的时候 需要提前关闭页面访问主动发送功能

gtag('config', 'TRACK_ID', {send_page_view: false})

关于 FrontJS SDK 的具体使用方法参见 SDK API