Taro + ts 小程序中使用 Web Tracking采集数据

Web Tracking 简单来说，是做数据采集的，比如一些报错信息等，用于数据错误分析！
日志服务支持通过Web Tracking功能进行HTML、H5、iOS和 Android平台日志数据的采集，支持自定义维度和指标。

使用Web Tracking功能可以采集各种浏览器以及iOS/Android APP的用户信息（除iOS/Android SDK外），例如：

用户使用的浏览器、操作系统、分辨率等。
用户浏览行为记录，例如用户网站上的点击行为、购买行为等。
用户在APP中停留时间、是否活跃等。

注意事项

使用Web Tracking意味着该Logstore打开互联网匿名写入的权限，没有经过有效鉴权，可能会产生脏数据。
仅支持GET请求，不支持POST请求。且不支持上传16KB以上的body。
POST请求限制与PutLogs一致，大小不超过3MB，条数不超过4096条。

步骤参考 https://help.aliyun.com/document_detail/31752.html?spm=a2c4g.11186623.2.29.d452729aW13HCq

步骤1 开通Web Tracking

通过控制台开通Web Tracking。

登录日志服务控制台，单击Project名称。
选择目标Logstore，进入Logstore属性页面。
- 方式1：单击Logstore下面的修改图标。
- 方式2：单击Logstore后面的
  
  image
  
  选择修改。
修改Logstore
单击Logstore属性页面右上方的修改。
打开Web Tracking开关。

Web Tracking 开关

重点说，在Taro小程序框架下怎么使用追踪数据

1.首先对以下代码进行修改 loghub-tracking.js

(function(window, document){
    function createHttpRequest()
    {
        if(window.ActiveXObject){
            return new ActiveXObject("Microsoft.XMLHTTP");  
        }
        else if(window.XMLHttpRequest){
            return new XMLHttpRequest();  
        }  
    }
    function AliLogTracker(host,project,logstore)
    {
        this.uri_ = 'http://' + project + '.' + host + '/logstores/' + logstore + '/track?APIVersion=0.6.0';
        this.params_=new Array();
        this.httpRequest_ = createHttpRequest();
    }
    AliLogTracker.prototype = {
        push: function(key,value) {
            if(!key || !value) {
                return;
            }
            this.params_.push(key);
            this.params_.push(value);
        },
        logger: function()
        {
            var url = this.uri_;
            var k = 0;
            while(this.params_.length > 0)
            {
                if(k % 2 == 0)
                {
                    url += '&' + encodeURIComponent(this.params_.shift());
                }
                else
                {
                    url += '=' + encodeURIComponent(this.params_.shift());
                }
                ++k;
            }
            try
            {
                this.httpRequest_.open("GET",url,true);
                this.httpRequest_.send(null);
            }
            catch (ex) 
            {
                if (window && window.console && typeof window.console.log === 'function') 
                {
                    console.log("Failed to log to ali log service because of this exception:\n" + ex);
                    console.log("Failed log data:", url);
                }
            }
            
        }
    };
    window.Tracker = AliLogTracker;
})(window, document);

这里进行一步封装，简化，抽取出我们自己需要的架构即可：

import Taro from '@tarojs/taro'
let params = new Array();
// 缓存数据
export const loggerPush = (key:any, value:any) => {
    if(!key || !value) {
        return;
    }
    params.push(key)
    params.push(value)
}
// 上传日志
export const logger = () => {
    let  url = "" // 此处的需要自己组装，根据自己的阿里服务控制台
    let k = 0
    while(params.length > 0) {
        if(k % 2 == 0){
            url += '&' + encodeURIComponent(params.shift());
        } else {
            url += '=' + encodeURIComponent(params.shift());
        }
        ++k;
    }
    try {
        Taro.request({
            url: url,
            header: {
              'content-type': 'application/json'
            }
          }).then(() => {})
        // 清空暂存的params
        params = []
    } catch (ex) {
        if (window && window.console && typeof window.console.log === 'function') {
            console.log("Failed to log to ali log service because of this exception:\n" + ex);
            console.log("Failed log data:", url);
        }
    }
}

使用方法

直接调用对应的方法即可

// 缓存数据
loggerPush('key'， ‘value’)
// 上传日志
logger()

到阿里，日志服务对应的项目查询：如下图

image.png

提示

在采集数据过程中，一定要注意逻辑的连贯性，这样才能保持数据的完整性。
如果遇到错误需要分析，可以更方便的解决！