使用WebTracking收集網站、小程式端使用者的瀏覽器、瀏覽行為記錄、停留時間等日誌 - Simple Log Service

如果您需要收集和分析使用者在瀏覽器、小程式上的資訊，例如使用者的瀏覽器、瀏覽行為記錄、購買行為記錄、停留時間，可以使用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

初始化SDK和上傳日誌的步驟請參見WebTracking 網頁端 JavaScript SDK、WebTracking 小程式端 JavaScript SDK。

HTTP GET請求

在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'/>

使用者訪問含有<img>標籤的網站。
瀏覽器解析到<img>標籤，嘗試載入<img>標籤中src屬性的URL的圖片，導致瀏覽器向Log Service發送HTTP GET請求以嘗試載入圖片。
Log Service收到HTTP GET請求後，解析URL中的欄位名稱key1和key2、欄位值value1和value2並儲存，APIVersion是保留欄位不會出現在日誌中。
Log Service向瀏覽器返回不可見圖片。

OpenAPI

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

使用Web Tracking和STS採集日誌

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