Webトラッキング JavaScript SDK を使用してブラウザからユーザーログを収集する - Simple Log Service

Webトラッキング JavaScript SDK を使用して、ブラウザの詳細、閲覧アクティビティ、購入履歴など、Web サイトからユーザー情報を収集して分析します。この SDK は、Web クライアントから Logstore にユーザーログを直接送信します。これにより、アプリケーションサーバーをバイパスし、その負荷を軽減します。このトピックでは、Webトラッキング JavaScript SDK を使用してログをアップロードする方法について説明します。

前提条件

Logstore で Webトラッキング機能が有効になっている必要があります。Webトラッキングの概要と有効化の方法については、「Webトラッキングを使用したフロントエンドログの収集」をご参照ください。

制限事項

Webトラッキング JavaScript SDK を使用してログをアップロードする場合、各書き込みリクエストは 3 MB または 4,096 ログエントリに制限されます。Webトラッキング JavaScript SDK の詳細については、「SLS Webトラッキング JavaScript SDK」をご参照ください。

操作手順

手順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}', // プロジェクトが配置されているリージョンのエンドポイント。例: cn-hangzhou.log.aliyuncs.com
  project: '${project}', // プロジェクト名。
  logstore: '${logstore}', // Logstore 名。
  time: 10, // ログを送信する時間間隔 (秒)。デフォルト値: 10
  count: 10, // 各バッチで送信するログ数。デフォルト値: 10
  topic: 'topic', // カスタムのログトピック。
  source: 'source',
  tags: {
    tags: 'tags',
  },
}
const tracker = new SlsTracker(opts)

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

CDN 方式

次のコードを HTML ファイルの <body> 要素に追加して、CDN から Webトラッキング JavaScript SDK をインポートします。CDN 方式を使用する場合、サポートされる最新の SDK バージョンは 0.3.5 です。他のバージョンについては、「SLS Webトラッキング JavaScript SDK」をご参照ください。
```
<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}', // プロジェクトが配置されているリージョンのエンドポイント。例: cn-hangzhou.log.aliyuncs.com
       project: '${project}', // プロジェクト名。
       logstore: '${logstore}', // Logstore 名。
       time: 10, // ログを送信する時間間隔 (秒)。デフォルト値: 10
       count: 10, // 各バッチで送信するログ数。デフォルト値: 10
       topic: 'topic', // カスタムのログトピック。
       source: 'source',
       tags: {
           tags: 'tags',
       },
    })
}

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

手順2：ログのアップロード

単一のログをアップロードするには、Object を渡します。複数のログをアップロードするには、Object の Array を渡します。

単一ログのアップロード：

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

単一ログの即時アップロード (time と count の設定をバイパス)：

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

ログバッチのアップロード：

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

ログバッチの即時アップロード (time と count の設定をバイパス)：

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

手順3：アップロード結果の表示

アップロードされたログは、コンソールまたは API を使用して表示できます。

コンソール

SLS コンソールにログインします。
[プロジェクト] セクションで、対象のプロジェクトをクリックします。
ログストレージ > Logstores タブで、対象の Logstore をクリックし、[消費プレビュー] をクリックしてログを表示します。

ログのクエリと分析については、「クエリと分析のクイックスタート」をご参照ください。

API

CreateIndex API を呼び出して、全文インデックスまたはフィールドインデックスを作成します。SELECT 文を使用する場合は、フィールドインデックスを作成する必要があります。
GetLogsV2 API を呼び出して、ログデータをクエリします。この API は、ログエントリの配列を返します。

よくある質問

デバッグ中に発生する "401 Authorization Required" エラーを解決するにはどうすればよいですか？

このエラーは、Logstore で Webトラッキングが有効になっていない場合に発生します。これを解決するには、Webトラッキング機能を有効にします。詳細については、「Webトラッキングの有効化」をご参照ください。

Simple Log Service:Webトラッキング JavaScript SDK