全部产品
Search

搜索本产品

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

    文档中心

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

    更新时间：Jun 29, 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 SDK、WebTracking 小程序端 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中的字段名称key1和key2、字段值value1和value2并存储，APIVersion是保留字段不会出现在日志中。

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

    OpenAPI

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

    image

    使用Web Tracking和STS采集日志

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

    image