webトラッキングSDK for JavaScriptを使用してwebサイトログを収集する方法 - Simple Log Service

ユーザーが使用しているブラウザー、閲覧行動記録、購入行動記録など、webサイトユーザーに関する情報を収集して分析する場合は、webトラッキングSDK for JavaScriptを使用してユーザーログをLogstoreにアップロードできます。 webトラッキングSDK for JavaScriptを使用すると、アプリケーションサーバーにログをアップロードする必要なく、webページからSimple Log Serviceに直接ログをアップロードできます。これにより、サーバーの負荷が軽減されます。このトピックでは、webトラッキングSDK for JavaScriptを使用してwebサイトログを収集する方法について説明します。

前提条件

Logstoreでwebトラッキング機能が有効になっています。 webトラッキング機能を有効にして使用する方法の詳細については、「webトラッキング機能を使用してログを収集する」をご参照ください。

制限事項

webトラッキングSDK for JavaScriptを使用してwebサイトログをアップロードする場合、一度に3 MB以下のログデータまたは4,096個のログを書き込むことができます。 webトラッキングSDK For JavaScriptの詳細については、「WebトラッキングSDK for JavaScript」をご参照ください。

ステップ1: 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}', // The Simple Log Service endpoint for the region where your project resides. Example: cn-hangzhou.log.aliyuncs.com.
  project: '${project}', // The name of the project. 
  logstore: '${logstore}', // The name of the Logstore. 
  time: 10, // The interval at which logs are sent. Default value: 10. Unit: seconds. 
  count: 10, // The maximum number of logs that can be sent in each request. Default value: 10. 
  topic: 'topic',// The custom topic of logs. 
  source: 'source',
  tags: {
    tags: 'tags',
  },
}

const tracker = new SlsTracker(opts)  // Create an SlsTracker object.

パラメーター	必須	説明
host	必須	プロジェクトが存在するリージョンのSimple Log Serviceエンドポイント。この例では、中国 (杭州) リージョンのSimple Log Serviceエンドポイントが使用されています。このパラメーター値を実際のエンドポイントに置き換えます。詳細については、「エンドポイント」をご参照ください。
project	必須	プロジェクトの名前。
logstore	必須	ログストアの名前
time	選択可能	ログが送信される間隔。デフォルト値は 10 です。単位は秒です。
集計	選択可能	各リクエストで送信できるログの最大数。デフォルト値は 10 です。
topic	選択可能	ログのトピック。カスタム値を指定してログを識別できます。
source	選択可能	ログのソース。カスタム値を指定してログを識別できます。
tags	選択可能	ログに関するタグ情報。カスタム値を指定してログを識別できます。

CDNメソッド

説明

CDN方式を使用する場合、SDKの最大バージョンは0.3.5です。

HTMLファイルの <body> に次のコードを追加します。 Alibaba Cloud CDNを使用して、webトラッキングSDK for JavaScriptのリソースファイルをインポートできます。 SDKのバージョンの詳細については、「WebトラッキングSDK For JavaScript」をご参照ください。
```
<script src="https://g.alicdn.com/sls/sls-js-sdk/0.3.5/web-track-browser.js"></script>
```

WebサイトのJavaScriptファイルに次のコードを追加します。

if (window.SLS_Tracker) {
       const tracker = new SLS_Tracker({
       host: '${host}', // The Simple Log Service endpoint for the region where your project resides. Example: cn-hangzhou.log.aliyuncs.com.
       project: '${project}', // The name of the project. 
       logstore: '${logstore}', // The name of the Logstore. 
       time: 10, // The interval at which logs are sent. Default value: 10. Unit: seconds. 
       count: 10, // The maximum number of logs that can be sent in each request. Default value: 10. 
       topic: 'topic',// The custom topic of logs. 
       source: 'source',
       tags: {
           tags: 'tags',
       },
    })
}

パラメーター	必須	説明
host	必須	プロジェクトが存在するリージョンのSimple Log Serviceエンドポイント。この例では、中国 (杭州) リージョンのSimple Log Serviceエンドポイントが使用されています。このパラメーター値を実際のエンドポイントに置き換えます。詳細については、「エンドポイント」をご参照ください。
project	必須	プロジェクトの名前。
logstore	必須	ログストアの名前
time	選択可能	ログが送信される間隔。デフォルト値は 10 です。単位は秒です。
集計	選択可能	各リクエストで送信できるログの最大数。デフォルト値は 10 です。
topic	選択可能	ログのトピック。カスタム値を指定してログを識別できます。
source	選択可能	ログのソース。カスタム値を指定してログを識別できます。
tags	選択可能	ログに関するタグ情報。カスタム値を指定してログを識別できます。

ステップ2: ログのアップロード

単一のログをアップロードすると、ログは別のオブジェクトとしてアップロードされます。複数のログをアップロードすると、ログは複数のオブジェクトを含む配列としてアップロードされます。

単一のログをアップロードします。型はobjectです。例：

tracker.send({
  eventType:'view_product',
  productName: 'Tablet',
  price: 500
})

すぐに単一のログをアップロードします。時間とカウントのパラメーターは有効になりません。 型は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
  }
])

一度に複数のログをすぐにアップロードします。時間とカウントのパラメーターは有効になりません。 タイプはarrayです。例：

tracker.sendBatchLogsImmediate([
  {
    eventType:'view_product',
    productName: 'Tablet',
    price: 500
  },
  {
    eventType:'view_product',
    productName: 'Laptop',
    price: 1200
  }
])

ステップ3: アップロード結果を表示する

ログがLogstoreにアップロードされた後、ログを照会および分析するためのインデックスを作成する必要があります。詳細については、「インデックスの作成」をご参照ください。

クイックビュー

インデックスが作成されていない場合は、[消費プレビュー] をクリックしてログをすばやく表示できます。次に、ログを照会および分析できます。詳細については、「ログの照会と分析」をご参照ください。

ログの照会と分析

CreateIndex操作を呼び出して、フルテキストインデックスまたはフィールドインデックスを作成できます。 SELECTステートメントを使用する場合は、フィールドインデックスを作成する必要があります。
GetLogsV2操作を呼び出して、Logstore内のログを照会できます。返される結果は、ログの配列です。配列内の各要素はログです。

コードのデバッグ時に「401認証が必要」エラーが報告された場合はどうすればよいですか?

webトラッキングSDK for JavaScriptを使用してLogstoreにログを書き込む前に、Logstoreのwebトラッキング機能を有効にする必要があります。詳細については、「webトラッキング機能を使用したログの収集」をご参照ください。

Simple Log Service:webトラッキングSDK for JavaScriptを使用してwebサイトログを収集する