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

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

前提条件

ログストアで 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}', // プロジェクトが存在するリージョンの Simple Log Service エンドポイント。例： cn-hangzhou.log.aliyuncs.com。
  project: '${project}', // プロジェクト名。
  logstore: '${logstore}', // ログストア名。
  time: 10, // ログを送信する間隔。デフォルト値： 10。単位：秒。
  count: 10, // 各リクエストで送信できるログの最大数。デフォルト値： 10。
  topic: 'topic',// ログのカスタムトピック。
  source: 'source',
  tags: {
    tags: 'tags',
  },
}

const tracker = new SlsTracker(opts)  // SlsTracker オブジェクトを作成します。

パラメーター	必須	説明
host	はい	プロジェクトが存在するリージョンの Simple Log Service エンドポイント。この例では、中国 (杭州) リージョンの Simple Log Service エンドポイントが使用されています。このパラメーター値を実際のエンドポイントに置き換えてください。詳細については、「エンドポイント」をご参照ください。
project	はい	プロジェクト名。
logstore	はい	ログストア名。
time	いいえ	ログを送信する間隔。デフォルト値： 10。単位：秒。
count	いいえ	各リクエストで送信できるログの最大数。デフォルト値： 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}', // プロジェクトが存在するリージョンの Simple Log Service エンドポイント。例： cn-hangzhou.log.aliyuncs.com。
       project: '${project}', // プロジェクト名。
       logstore: '${logstore}', // ログストア名。
       time: 10, // ログを送信する間隔。デフォルト値： 10。単位：秒。
       count: 10, // 各リクエストで送信できるログの最大数。デフォルト値： 10。
       topic: 'topic',// ログのカスタムトピック。
       source: 'source',
       tags: {
           tags: 'tags',
       },
    })
}

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

ステップ 2：ログをアップロードする

単一のログをアップロードする場合、ログは個別の 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
  }
])

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

コンソールを使用するか、API オペレーションを呼び出すことによって、アップロード結果を表示できます。

コンソール

Simple Log Service コンソールにログオンします。
[プロジェクト] セクションで、目的のプロジェクトをクリックします。
[ログストレージ] > [ログストア] タブで、目的のログストアをクリックします。次に、[消費プレビュー] をクリックしてログを表示します。

ログに対してクエリ分析を実行する必要がある場合は、「ログクエリと分析のガイド」をご参照ください。

API

CreateIndex オペレーションを呼び出して、フルテキストインデックスまたはフィールドインデックスを作成します。SELECT 文を使用する場合は、フィールドインデックスを作成する必要があります。
GetLogsV2 オペレーションを呼び出して、ログストア内のログをクエリします。返される結果はログの配列です。配列内の各要素はログです。

FAQ

コードをデバッグするときに「401 Authorization Required」エラーが報告された場合はどうすればよいですか？

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

参考資料

API オペレーションの呼び出し後に Simple Log Service から返された応答にエラー情報が含まれている場合、呼び出しは失敗します。 API 呼び出しが失敗したときに返されるエラーコードに基づいてエラーを処理できます。詳細については、「エラーコード」をご参照ください。
Simple Log Service は Alibaba Cloud SDK とも互換性があります。詳細については、Simple Log Service_SDK Center_Alibaba Cloud OpenAPI Explorer をご参照ください。
Simple Log Service は、Simple Log Service での自動構成の要件を満たすために、コマンドラインインターフェイス (CLI) を提供しています。詳細については、「Simple Log Service CLI の概要」をご参照ください。