本文介绍如何通过Web Tracking采集HTML、H5、iOS和Android平台的日志数据。

背景信息

日志服务支持通过Web Tracking采集HTML、H5、iOS和Android平台的日志数据,并支持自定义维度和指标。

您可以通过Web Tracking采集各种浏览器、iOS/Android APP的用户信息(iOS/Android SDK除外),例如:
  • 用户使用的浏览器、操作系统、分辨率等信息。
  • 用户浏览行为记录(如:用户在网站上的单击行为、购买行为等)。
  • 用户在APP中的停留时间、是否活跃等。
Web Tracking

注意事项

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

步骤1 开通Web Tracking

通过日志服务控制台开通Web Tracking。

  1. 登录日志服务控制台,单击Project名称。
  2. 找到目标Logstore,单击下的修改
  3. Logstore属性页面,单击右上方的修改
  4. 打开Web Tracking开关,并单击保存
    Web Tracking 开关
通过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();
      }
  }
}

步骤2 收集日志数据

开通Web Tracking后,可以使用以下四种方法上传数据到Logstore中。
  • 使用JavaScript SDK
    1. loghub-tracking.js复制到web目录,并在页面中引入如下脚本。
      单击这里对内容进行复制。
      <script type="text/javascript" src="loghub-tracking.js" async></script>
      说明 为了不阻塞页面加载,脚本会异步发送HTTP请求,如果页面加载过程中需要多次发送数据,后面的请求会覆盖前面的HTTP请求,看到的现象是浏览器中会显示Web Tracking请求退出。使用同步发送可以避免该问题,同步发送请在脚本中执行如下语句替换:
      原始语句:
      this.httpRequest_.open("GET", url, true)
      替换最后一个参数变成同步发送:
      this.httpRequest_.open("GET", url, false)
    2. 创建Tracker对象。
      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', 'lisi');
      logger.push('product', 'ipod');
      logger.push('price', 3000);
      logger.logger();
      其中各个参数的含义如下所示。
      字段 含义
      ${host} 您的日志服务所在地域的Endpoint,详情请参见服务入口
      ${project} 您所创建的Project。
      ${logstore} Project中的Logstore。
      执行以上命令后,可以在日志服务中看到如下两条日志。
      customer:zhangsan
      product:iphone 6s
      price:5500
      customer:lisi
      product:ipod
      price:3000
  • 使用HTTP GET请求
    curl --request GET 'http://${project}.${host}/logstores/${logstore}/track?APIVersion=0.6.0&key1=val1&key2=val2'
    其中各个参数的含义如下所示。
    字段 含义
    ${project} 您在日志服务中创建的Project。
    ${host} 您的日志服务所在地区的Endpoint。
    ${logstore} Project中某一个已开通Web Tracking的Logstore。
    APIVersion=0.6.0 保留字段,必选。
    __topic__=yourtopic 指定日志的topic,保留字段,可选
    key1=val1key2=val2 您要上传到日志服务的Key-Value对,可以有多个,但是要保证URL的长度小于16KB。
  • 使用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'/>
    track_ua.gif除了上传自定义的参数外,还会将http头中的UserAgent、referer也作为日志中的字段。
    说明 若您需要采集HTTPS页面的referer, 那么上述Web Tracking的链接也必须为HTTPS。
  • 使用HTTP POST请求:

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

后续步骤

数据上传到日志服务之后,可以使用查询分析功能实时检索、分析日志数据,并通过多样的可视化方案展示实时分析结果。也可以使用日志服务提供的 ConsumerGroup 消费数据。