阿里云日志服务(前端如何使用)--webTracking

webTracking

• webTracking是干什么的，个人简单理解，就是阿里云日志服务开放了一个接口，你只要请求这个接口，将你想上报的自定义信息字段携带上，即可在阿里云控制台查看
• 日志服务支持通过Web Tracking采集HTML、H5、iOS和Android平台的日志，并支持自定义维度和指标。如何使用Web Tracking采集日志

采集信息

可以通过Web Tracking采集各种浏览器、iOS APP或Android APP的用户信息

• 用户使用的浏览器、操作系统、分辨率等信息
• 用户浏览行为记录（例如：用户在网站上的单击行为、购买行为等）
• 用户在APP中的停留时间、是否活跃等

如何使用

开通方式

• 一、阿里云控制台-创建日志服务,开通Web Tracking
• 二、sdk方式(通过Log Service Java SDK开通Web Tracking)

import com.aliyun.openservices.log.Client;
import com.aliyun.openservices.log.common.LogStore;
import com.aliyun.openservices.log.exception.LogException;
public class WebTracking {
  static private String accessId = "your accesskey id";
  static private String accessKey = "your accesskey";
  static private String project = "your project";
  static private String host = "log service data address";
  static private String logStore = "your logstore";
  static private Client client = new Client(host, accessId, accessKey);
  public static void main(String[] args) {
      try {
          //在已经创建的Logstore上开通Web Tracking功能。
          LogStore logSt = client.GetLogStore(project, logStore).GetLogStore();
          client.UpdateLogStore(project, new LogStore(logStore, logSt.GetTtl(), logSt.GetShardCount(), true));
          //关闭Web Tracking功能。
          //client.UpdateLogStore(project, new LogStore(logStore, logSt.GetTtl(), logSt.GetShardCount(), false));
          //新建支持Web Tracking功能的Logstore。
          //client.UpdateLogStore(project, new LogStore(logStore, 1, 1, true));
      }
      catch (LogException e){
          e.printStackTrace();
      }
  }
}

日志采集

开通Web Tracking后，您可以通过以下四种方法上传日志到Logstore中

使用JavaScript SDK（就是人家封装了一下的get请求）

• 复制脚本，可以创建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);

• 在项目中引入该js

<script type="text/javascript" src="loghub-tracking.js" async></script>

vue中在main.js中直接import
import './utils/loghub-tracking'

• 最后如何执行

{host}: 选择的当前地域所对应的服务入口 [服务入口](https://help.aliyun.com/document_detail/29008.html?spm=a2c4g.11186623.2.17.6d875ad10foElL#reference-wgx-pwq-zdb) {project}: 项目名

${logstore}: 数据名

var logger = new window.Tracker('${host}','${project}','${logstore}');
logger.push('customer', 'zhangsan');
logger.push('product', 'iphone 6s');
logger.push('price', 5500);
logger.logger();
logger.push('customer', 'xiaojuzi');
logger.push('product', 'ipod');
logger.push('price', 3000);
logger.logger();

执行完毕，即可在阿里云控制台日志服务查看刚上传的两个请求所携带的数据，例：

05-12 10:03:49
                __source__:  115.239.175.222
                __tag__:__client_ip__:  115.239.175.222
                __tag__:__receive_time__:  1589249029
                __topic__:  
                customer:  xiaojuzi
                price:  3000
                product:  ipod

使用http GET请求

curl --request GET 'http://${project}.${host}/logstores/${logstore}/track?APIVersion=0.6.0&key1=val1&key2=val2'

使用HTML img标签

<img src='http://${project}.${host}/logstores/${logstore}/track.gif?APIVersion=0.6.0&key1=val1&key2=val2'/>
<img src='http://${project}.${host}/logstores/${logstore}/track_ua.gif?APIVersion=0.6.0&key1=val1&key2=val2'/>

使用HTTP POST请求（针对大数据量聚合请求）

如果请求的数据量比较大，可以使用POST方法上传数据，详情请参见PutWebtracking

使用注意

• GET请求不支持上传16KB以上的body内容
• POST请求每次写入的日志数量上限为3MB或者4096条