浏览器监控接入

SPA(Single Page Application)

  1. 在框架页(通常为 index.html)的 head 中添加 TA.js 的激活代码。

    1. <script src="/ta"></script>
    2. <script>
    3. var _taConfig = window._taConfig;
    4. if (_taConfig && _taConfig.enabled) {
    5. !function(e,n,r,t,a,o,c){e[a]=e[a]||function(){(e[a].q=e[a].q||[]).push(arguments)},e.onerror=function(n,r,t,o,c){e[a]("sendExecError",n,r,t,o,c)},n.addEventListener("error",function(n){e[a]("sendError",n)},!0),o=n.createElement(r),c=n.getElementsByTagName(r)[0],o.async=1,o.src=t,c.parentNode.insertBefore(o,c)}(window,document,"script",_taConfig.url,"$ta");
    6. $ta('start', { udata: { uid: 0 }, ak: _taConfig.ak, url: _taConfig.collectorUrl });
    7. }
    8. </script>
  2. nginx.conf 中添加 /ta 请求处理,以返回 TA.js 的配置。环境变量在 Erda 中将默认注入。

    ```bash

    1. set $taEnabled ${TERMINUS_TA_ENABLE};
    2. set $taUrl ${TERMINUS_TA_URL};
    3. set $collectorUrl ${TERMINUS_TA_COLLECTOR_URL};
    4. set $terminusKey ${TERMINUS_KEY};
    5. location /ta {
    6. default_type application/javascript;
    7. return 200 'window._taConfig={enabled:$taEnabled,ak:"$terminusKey",url:"$taUrl",collectorUrl:"$collectorUrl"}';
    8. }
  3. 采集用户 ID 以添加用户维度的统计,需在前端用户查询的位置将 userId 设置到 TA.js 的缓存。

    1. if (typeof window.$ta !== 'undefined') window.$ta('setUser', [userId])

    Spring MVC

  4. 添加 Config 类读取 TA.js 环境变量,环境变量在 Erda 中将默认注入。

    1. @Component
    2. @Data
    3. public class TaConfig {
    4. @Value("${terminus.ta.collector.url}")
    5. private String terminusTaCollectorURL;
    6. @Value("${terminus.ta.enable}")
    7. private boolean terminusTaEnable;
    8. @Value("${terminus.ta.url}")
    9. private String terminusTaURL;
    10. @Value("${terminus.key}")
    11. private String terminusKey;
    12. }
  5. 添加 Controller 返回 TA.js 的配置

    1. @Slf4j
    2. @RestController
    3. @RequestMapping("/api/ta")
    4. public class TaController {
    5. @Autowired
    6. private TaConfig config;
    7. @RequestMapping(produces = "application/javascript")
    8. @ResponseBody
    9. public String ta() {
    10. return String.format("window._taConfig={enabled:%b,ak:\"%s\",url:\"%s\",collectorUrl:\"%s\"}", config.isTerminusTaEnable(), config.getTerminusKey(), config.getTerminusTaURL(), config.getTerminusTaCollectorURL());
    11. }
    12. }
  6. 在需监控的页面 head 中添加 TA.js 激活代码。

    1. <head>
    2. <script src="/api/ta"></script>
    3. <script>
    4. var _taConfig = window._taConfig;
    5. if (_taConfig && _taConfig.enabled) {
    6. !function (e, n, r, t, a, o, c) {
    7. e[a] = e[a] || function () {
    8. (e[a].q = e[a].q || []).push(arguments)
    9. }, e.onerror = function (n, r, t, o, c) {
    10. e[a]("sendExecError", n, r, t, o, c)
    11. }, n.addEventListener("error", function (n) {
    12. e[a]("sendError", n)
    13. }, !0), o = n.createElement(r), c = n.getElementsByTagName(r)[0], o.async = 1, o.src = t, c.parentNode.insertBefore(o, c)
    14. }(window, document, "script", _taConfig.url, "$ta");
    15. $ta('start', {udata: {uid: 0}, ak: _taConfig.ak, url: _taConfig.collectorUrl});
    16. }
    17. </script>
    18. </head>

    Herd

  7. 添加 terminus-key.js 中间件。

    1. module.exports = () => async (ctx, next) => {
    2. ctx.herdContext['_TERMINUS_KEY_'] = process.env.TERMINUS_KEY;
    3. ctx.herdContext['_TA_ENABLE_'] = process.env.TERMINUS_TA_ENABLE || false;
    4. ctx.herdContext['_TA_URL_'] = process.env.TERMINUS_TA_URL || '//static.terminus.io/ta.js';
    5. ctx.herdContext['_TA_COLLECT_URL_'] = process.env.TERMINUS_TA_COLLECTOR_URL || '//analytics.terminus.io/collect';
    6. await next();
    7. }
  8. layout.hbshead 中添加 TA.js Script。

    1. <head>
    2. <script>
    3. {{#if _TA_ENABLE_}}
    4. !function(e,t,n,s,a,c,i){e[a]=e[a]||function(){(e[a].q=e[a].q||[]).push(arguments)},c=t.createElement(n),i=t.getElementsByTagName(n)[0],c.async=1,c.src=s,i.parentNode.insertBefore(c,i)}(window,document,"script","{{_TA_URL_}}","$ta");
    5. $ta('start',{ udata: { uid: {{#if _USER_}}{{_USER_.id}}{{else}}0{{/if}} }{{#if _TERMINUS_KEY_}}, ak: '{{_TERMINUS_KEY_}}'{{/if}} , url: '{{_TA_COLLECT_URL_}}' })
    6. {{/if}}
    7. </script>
    8. </head>
  9. 采集用户 ID 以添加用户维度的统计,需在前端用户查询的位置将 userId 设置到 TA.js 的缓存。

    1. if (typeof window.$ta !== 'undefined') window.$ta('setUser', [userId])