如果您需要收集和分析用戶在網站上的信息,例如用戶的瀏覽器、瀏覽行為記錄、購買行為記錄,可以使用WebTracking網頁端JavaScript SDK將用戶日志直接上傳到Logstore。WebTracking網頁端JavaScript SDK從網頁端直接上傳日志,無需經過業務服務器,降低服務器負載。本文介紹如何使用網頁端 JavaScript SDK上傳日志。
前提條件
已開啟Logstore的WebTracking功能。WebTracking的功能介紹和開啟步驟,請參見使用Web Tracking采集日志。
使用限制
使用WebTracking JavaScript SDK上傳日志,每次寫入的日志數量上限為3MB或者4096條。關于WebTracking JavaScript SDK的更多信息,請參見SLS WebTracking JavaScript SDK。
步驟一:安裝和配置SDK
npm方式
已安裝Node.js。
在服務器上運行以下代碼,安裝依賴。
npm install --save @aliyun-sls/web-track-browser
在您的程序中添加以下代碼,配置SDK。
import SlsTracker from '@aliyun-sls/web-track-browser' const opts = { host: '${host}', // 所在地域的服務入口。例如cn-hangzhou.log.aliyuncs.com project: '${project}', // Project名稱。 logstore: '${logstore}', // Logstore名稱。 time: 10, // 發送日志的時間間隔,默認是10秒。 count: 10, // 發送日志的數量大小,默認是10條。 topic: 'topic',// 自定義日志主題。 source: 'source', tags: { tags: 'tags', }, } const tracker = new SlsTracker(opts) // 創建SlsTracker對象
參數名稱
是否必填
說明
host
是
日志服務所在地域的Endpoint。此處以杭州為例,其它地域請根據實際情況填寫。更多信息,請參見服務入口。
project
是
Project名稱。
logstore
是
Logstore名稱。
time
否
發送日志的時間間隔,默認值為10秒。
count
否
發送日志的數量大小,默認值為10。
topic
否
日志主題。您可以自定義該字段,便于識別。
source
否
日志來源。您可以自定義該字段,以便于識別。
tags
否
日志標簽信息。您可以自定義該字段,便于識別。
CDN方式
在html文件的
<body>
中添加以下代碼,從CDN引入WebTracking JavaScript SDK的資源文件。如果使用CDN方式,SDK版本最高為0.3.5,更多版本請參見SLS WebTracking JavaScript SDK。<script src="https://g.alicdn.com/sls/sls-js-sdk/0.3.5/web-track-browser.js"></script>
在網站的JavaScript文件中添加以下代碼。
if (window.SLS_Tracker) { const tracker = new SLS_Tracker({ host: '${host}', // 所在地域的服務入口。例如cn-hangzhou.log.aliyuncs.com project: '${project}', // Project名稱。 logstore: '${logstore}', // Logstore名稱。 time: 10, // 發送日志的時間間隔,默認是10秒。 count: 10, // 發送日志的數量大小,默認是10條。 topic: 'topic',// 自定義日志主題。 source: 'source', tags: { tags: 'tags', }, }) }
參數名稱
是否必填
說明
host
是
日志服務所在地域的Endpoint。此處以杭州為例,其它地域請根據實際情況填寫。更多信息,請參見服務入口。
project
是
Project名稱。
logstore
是
Logstore名稱。
time
否
發送日志的時間間隔,默認值為10秒。
count
否
發送日志的數量大小,默認值為10。
topic
否
日志主題。您可以自定義該字段,便于識別。
source
否
日志來源。您可以自定義該字段,以便于識別。
tags
否
日志標簽信息。您可以自定義該字段,便于識別。
步驟二:上傳日志
上傳單條日志時,每條日志單獨作為一個對象Object
。上傳多條日志時,數據結構是包含多個對象Object
的數組Array
。
單條日志上傳,類型為
Object
,示例:tracker.send({ eventType:'view_product', productName: 'Tablet', price: 500 })
單條日志立即上傳(time和count參數不生效),類型為
Object
,示例:tracker.sendImmediate({ eventType:'view_product', productName: 'Tablet', price: 500 })
批量日志上傳,類型為
Array
,示例:tracker.sendBatchLogs([ { eventType: 'view_product', productName: 'Tablet', price: 500 }, { eventType: 'view_product', productName: 'Laptop', price: 1200 } ])
批量日志立即上傳(time和count參數不生效),類型為
Array
,示例:tracker.sendBatchLogsImmediate([ { eventType:'view_product', productName: 'Tablet', price: 500 }, { eventType:'view_product', productName: 'Laptop', price: 1200 } ])
步驟三:查看上傳結果
日志上傳到Logstore后,必須創建索引才能進行查詢分析。
快速查看
如果未創建索引,可以在Logstore的查詢分析頁面,單擊消費預覽快速查看日志。
查詢分析日志
調用CreateIndex創建全文索引或字段索引,如果需要使用SELECT語句,必須創建字段索引。
調用GetLogsV2 - 查詢Logstore中的日志數據,返回結果是日志數組Logs,每個元素就是一條日志。
調試代碼時提示“401 Authorization Required”如何解決?
通過JavaScript SDK向Logstore寫入用戶日志前,您需要開啟Logstore的WebTracking功能,請參見開通Web Tracking。
相關文檔
在調用API接口過程中,若服務端返回結果中包含錯誤信息,則表示調用API接口失敗。您可以參考API錯誤碼對照表查找對應的解決方法。更多信息,請參見API錯誤處理對照表。
阿里云OpenAPI開發者門戶提供調試、SDK、示例和配套文檔。通過OpenAPI,您無需手動封裝請求和簽名操作,就可以快速對日志服務API進行調試。更多信息,請參見OpenAPI開發者門戶。
為滿足越來越多的自動化日志服務配置需求,日志服務提供命令行工具CLI(Command Line Interface)。更多信息,請參見日志服務命令行工具CLI。