全部產品
Search
文件中心

Simple Log Service:WebTracking 小程式端 JavaScript SDK

更新時間:Jun 30, 2024

如果您需要收集和分析使用者在小程式的資訊,例如使用者用的小程式、瀏覽行為記錄、購買行為記錄,可以使用WebTracking JavaScript SDK將使用者日誌直接上傳到Logstore。WebTracking JavaScript SDK從小程式端直接上傳日誌,無需經過商務服務器,降低伺服器負載。本文介紹如何使用WebTracking JavaScript SDK上傳日誌。

前提條件

  • 已開啟Logstore的WebTracking功能。WebTracking的功能介紹和開啟步驟,請參見使用Web Tracking採集日誌

  • 為了保障資料安全,各個小程式平台要求開發人員事先在小程式的管理後台,配置被允許與小程式進行網路通訊的伺服器網域名稱(request合法網域名稱)。您需要在小程式的request合法網域名稱中,添加Log ServiceWebTracking使用的安全通訊網域名稱,格式為https://${project}.${host}projecthost的含義請參見下文。

使用限制

  • 使用WebTracking 小程式端 JavaScript SDK上傳日誌,每次寫入的日誌數量上限為10 MB。關於WebTracking 小程式端 JavaScript SDK的更多資訊,請參見SLS WebTracking JavaScript SDK

  • WebTracking支援的小程式包括微信小程式、微信小遊戲、支付寶小程式、位元組跳動小程式、DingTalk小程式、QQ小程式、QQ小遊戲、百度小程式。

步驟一:安裝和配置SDK

  1. 已安裝Node.js

  2. 在伺服器上運行以下代碼,安裝依賴。

    npm install --save @aliyun-sls/web-track-mini
  3. 在您的程式中添加以下代碼,配置SDK。

    重要

    開發快應用(quickApp小程式)時,建立SlsTracker對象前需要根據使用的請求模組額外添加配置項。以使用requesttask模組為例:

    //定義quickappSDK對象,將請求API封裝成對象
    const quickappSDK = {     
          request: requesttask.request
        }
    
    const tracker = new SlsTracker({
          ...opts,
          platformSDK: quickappSDK,
          platformRequestName: 'request',
        })
    import SlsTracker from '@aliyun-sls/web-track-mini'
    
    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

    Log Service所在地區的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的查詢分析頁面,單擊消費預覽快速查看日誌。

image

查詢分析日誌

  1. 調用CreateIndex建立全文索引或欄位索引,如果需要使用SELECT語句,必須建立欄位索引。

  2. 調用GetLogsV2 - 查詢Logstore中的日誌資料,返回結果是日誌數組Logs,每個元素就是一條日誌。

相關文檔

  • 在調用API介面過程中,若服務端返回結果中包含錯誤資訊,則表示調用API介面失敗。您可以參考API錯誤碼對照表尋找對應的解決方案。更多資訊,請參見API錯誤處理對照表

  • 阿里雲OpenAPI開發人員門戶提供調試、SDK、樣本和配套文檔。通過OpenAPI,您無需手動封裝請求和簽名操作,就可以快速對Log ServiceAPI進行調試。更多資訊,請參見OpenAPI開發人員門戶

  • 為滿足越來越多的自動化Log Service配置需求,Log Service提供命令列工具CLI(Command Line Interface)。更多資訊,請參見Log Service命令列工具CLI