全部产品
Search
文档中心

日志服务:使用Web Tracking采集日志

更新时间:May 23, 2024

如果您需要收集和分析用户在浏览器、小程序上的信息,例如用户的浏览器、浏览行为记录、购买行为记录、停留时间,可以使用WebTracking功能。只需对业务代码进行较少的改动,例如在前端页面中添加追踪像素或集成JavaScript SDK,就可以将用户行为信息上传到日志服务的Logstore中。

什么是Web Tracking?

  • Web Tracking是一种通过向网站页面添加特定代码段,来跟踪用户行为的技术。它可以收集有关用户如何与网站交互的信息,例如访问的页面、停留时间以及地理位置。

    Web Tracking的原理是在网站页面上嵌入一个不可见、尺寸为1x1像素的图片,当用户访问该页面时,浏览器会向服务器发起GET请求,此时会自动将请求URL中的参数即用户日志传递给日志服务进行存储。这些请求通常包含有关用户的信息,例如他们的 IP 地址、浏览器类型和操作系统。

  • 日志服务Web Tracking功能用于在浏览器、小程序中跟踪用户行为并将行为数据上传到日志服务中,便于您分析用户行为等。您可以通过Web Tracking采集各种浏览器、iOS App或Android App的用户信息,例如:

    • 用户使用的浏览器、操作系统、分辨率等信息。

    • 用户浏览行为记录(例如:用户在网站上的单击行为、购买行为等信息)。

    • 用户在App中的停留时间、是否活跃等信息。

步骤一:开启Logstore的Web Tracking开关

重要

打开Web Tracking开关,则表示该Logstore打开互联网匿名写入权限,没有经过有效鉴权,可能产生脏数据。推荐结合安全令牌服务STS(Security Token Service)采集日志,无需开启Logstore的Web Tracking开关,具体操作步骤参见文末的使用Web Tracking和STS采集日志

  • 控制台

    1. 登录日志服务控制台

    2. 在Project列表区域,单击目标Project。

    3. 日志存储 > 日志库页签中,选择目标Logstore右侧的图标 > 修改

    4. Logstore属性页面,单击页面右上方的修改

    5. 打开WebTracking开关,然后单击保存

  • API

    • 调用UpdateLogStore,通过设置enable_tracking参数打开WebTracking开关。

步骤二:接入Web Tracking

  • 客户端SDK:在代码中集成JavaScript SDK,将自定义类型的日志上传到Logstore,例如表单提交、页面提交、异常报告。

  • HTTP GET请求:在网站的前端代码中发送GET请求,适合简单日志的收集。

  • HTML img标签:利用HTML的<img>标签的src属性发起对网站服务器的请求,请求的URL指向一个GIF图像,不需要JavaScript环境,也不需要设置跨域访问。

  • OpenAPI:如果请求的数据量较大,您可以使用OpenAPI通过POST请求上传数据。

客户端SDK

image

初始化SDK和上传日志的步骤请参见WebTracking 网页端 JavaScript SDKWebTracking 小程序端 JavaScript SDK

HTTP GET请求

image

在curl工具执行以下命令,通过HTTP请求上传日志,请根据实际值替换参数。

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

参数

是否必填

说明

${project}

Project名称。

${host}

日志服务所在地域的Endpoint。更多信息,请参见服务入口

${logstore}

Logstore名称。

APIVersion=0.6.0

保留字段。

__topic__=yourtopic

指定日志主题。

key1=val1&key2=val2

您要上传到日志服务的字段名称和字段值(Key-Value),支持设置多个字段,请确保长度小于16 KB。

HTML img标签

在网站的前端页面中添加以下标签:

重要
  • track_ua.gif除了上传自定义的参数外,还会将HTTP请求头中的UserAgent、referer也作为日志中的字段。

  • 如果您需要采集HTTPS页面的referer,那么下述链接也必须为HTTPS。

<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'/>
image
  1. 用户访问含有<img>标签的网站。

  2. 浏览器解析到<img>标签,尝试加载<img>标签中src属性的URL的图片,导致浏览器向日志服务发送HTTP GET请求以尝试加载图片。

  3. 日志服务收到HTTP GET请求后,解析URL中的字段名称key1key2、字段值value1value2并存储,APIVersion是保留字段不会出现在日志中。

  4. 日志服务向浏览器返回不可见图片。

OpenAPI

调用PutWebtracking接口上传多条日志。

image

使用Web Tracking和STS采集日志

打开Web Tracking开关,则表示该Logstore开放互联网匿名写入权限,没有经过有效鉴权,可能产生脏数据。通过安全令牌服务STS采集日志,无需开启Web Tracking开关。完整操作流程请参见采集-搭建浏览器端日志直传服务。JavaScript SDK的STS插件的初始化和上传日志步骤,请参见使用WebTracking JavaScript SDK的STS插件上传日志

image