全部產品
Search
文件中心

Simple Log Service:使用Web Tracking採集日誌

更新時間:Jun 30, 2024

如果您需要收集和分析使用者在瀏覽器、小程式上的資訊,例如使用者的瀏覽器、瀏覽行為記錄、購買行為記錄、停留時間,可以使用WebTracking功能。只需對業務代碼進行較少的改動,例如在前端頁面中添加追蹤像素或整合JavaScript SDK,就可以將使用者行為資訊上傳到Log Service的Logstore中。

什麼是Web Tracking?

  • Web Tracking是一種通過向網站頁面添加特定程式碼片段,來跟蹤使用者行為的技術。它可以收集有關使用者如何與網站互動的資訊,例如訪問的頁面、停留時間以及地理位置。

    Web Tracking的原理是在網站頁面上嵌入一個不可見、尺寸為1x1像素的圖片,當使用者訪問該頁面時,瀏覽器會向伺服器發起GET請求,此時會自動將請求URL中的參數即使用者日誌傳遞給Log Service進行儲存。這些請求通常包含有關使用者的資訊,例如他們的 IP 位址、瀏覽器類型和作業系統。

  • Log ServiceWeb Tracking功能用於在瀏覽器、小程式中跟蹤使用者行為並將行為資料上傳到Log Service中,便於您分析使用者行為等。您可以通過Web Tracking採集各種瀏覽器、iOS App或Android App的使用者資訊,例如:

    • 使用者使用的瀏覽器、作業系統、解析度等資訊。

    • 使用者瀏覽行為記錄(例如:使用者在網站上的單擊行為、購買行為等資訊)。

    • 使用者在App中的停留時間、是否活躍等資訊。

步驟一:開啟Logstore的Web Tracking開關

重要

開啟Web Tracking開關,則表示該Logstore開啟互連網匿名寫入許可權,沒有經過有效鑒權,可能產生髒資料。推薦結合Security Token ServiceSTS(Security Token Service)採集日誌,無需開啟Logstore的Web Tracking開關,具體操作步驟參見文末的使用Web Tracking和STS採集日誌

  • 控制台

    1. 登入Log Service控制台

    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}

Log Service所在地區的Endpoint。更多資訊,請參見服務入口

${logstore}

Logstore名稱。

APIVersion=0.6.0

保留欄位。

__topic__=yourtopic

指定日誌主題。

key1=val1&key2=val2

您要上傳到Log Service的欄位名稱和欄位值(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的圖片,導致瀏覽器向Log Service發送HTTP GET請求以嘗試載入圖片。

  3. Log Service收到HTTP GET請求後,解析URL中的欄位名稱key1key2、欄位值value1value2並儲存,APIVersion是保留欄位不會出現在日誌中。

  4. Log Service向瀏覽器返回不可見圖片。

OpenAPI

調用PutWebtracking介面上傳多條日誌。

image

使用Web Tracking和STS採集日誌

開啟Web Tracking開關,則表示該Logstore開放互連網匿名寫入許可權,沒有經過有效鑒權,可能產生髒資料。通過Security Token ServiceSTS採集日誌,無需開啟Web Tracking開關。完整操作流程請參見採集-搭建瀏覽器端日誌直傳服務採集-搭建小程式端日誌直傳服務。JavaScript SDK的STS外掛程式的初始化和上傳日誌步驟,請參見使用WebTracking JavaScript SDK的STS外掛程式上傳日誌

image