Web トラッキング - データ収集| Alibaba Cloud ドキュメントセンター

Web トラッキングを使用することにより、HTML、H5、iOS、または Android プラットフォームからデータを収集し、Log Service でディメンションおよび指標をカスタマイズできます。

上図に示されているように、Web トラッキング機能を使用することにより、あらゆるブラウザ、iOS アプリ、および Android アプリよりユーザー情報を収集できます (iOS / Android SDK を除く)。たとえば、

ユーザーの使用しているブラウザ、オペレーティングシステム、および解像度
ユーザーの閲覧行動パターン (ユーザーのクリック行動や Web サイトの購入行動など)
ユーザーのアプリケーション使用時間、アクティブ/非アクティブ

注 Web トラッキングを使用すると、インターネットの匿名による Logstore への書き込みが可能になります。不正なデータが生成される危険性があります。

手順

ステップ1 Web トラッキングを有効化

Web トラッキングは、コンソールまたは Java SDK より有効にします。

コンソールより Web トラッキングを有効化
1. Logstore リストページで、 Web トラッキング機能を有効にする Logstore 名の右側の変更をクリックします。
2. Webトラッキングをオンにします。

Java SDK より Web トラッキングを有効化

Java SDK

import com.aliyun.openservices.log.Client;
import com.aliyun.openservices.log.common.LogStore;
import com.aliyun.openservices.log.exception.LogException;
public class WebTracking {
  static private String accessId = "your accesskey id";
  static private String accessKey = "your accesskey";
  static private String project = "your project";
  static private String host = "log service data address";
  static private String logStore = "your logstore";
  static private Client client = new Client(host, accessId, accessKey);
  public static void main(String[] args) {
      try {
          //作成した Logstore の Web Tracking 機能を有効化
          LogStore logSt = client.GetLogStore(project, logStore). GetLogStore();
          client.UpdateLogStore(project, new LogStore(logStore, logSt.GetTtl(), logSt.GetShardCount(), true));
          //Web Tracking 機能を無効化
          //client.UpdateLogStore(project, new LogStore(logStore, logSt.GetTtl(), logSt.GetShardCount(), false));
          //Web Tracking 機能を有効にした Logstore を生成
          //client.UpdateLogStore(project, new LogStore(logStore, 1, 1, true));
      }
      catch (LogException e){
          e.printStackTrace();
      }
  }
}

ステップ2 ログを収集

Logstore の Web トラッキング機能を有効にしたら、次の 3 つのいずれかの方法で、データを Logstore にアップロードします。

HTTP GET リクエスト

curl --request GET 'http://${project}.${host}/logstores/${logstore}/track? APIVersion=0.6.0&key1=val1&key2=val2'

パラメータの定義


フィールド	定義
`$ {project}`	Log Service に作成したプロジェクトの名前
`${host}`	Log Service のデプロイされているリージョンのドメイン名
`${logstore}`	`${project}`下で Web トラッキング機能が有効になっている Logstore の名前
`APIVersion=0.6.0`	予約フィールド (必須)
`__topic__=yourtopic`	ログトピックを指定します (オプションの予約フィールド)
`key1=val1`, `key2=val2`	Logstore にアップロードされるキーと値のペア (複数ペア指定可、URL は 16 KB 未満)

HTML の img タグ
```
<img class="img-responsive"src='http://${project}.${host}/logstores/${logstore}/track.gif? APIVersion=0.6.0&key1=val1&key2=val2'/>
<img class="img-responsive"src='http://${project}.${host}/logstores/${logstore}/track_ua.gif? APIVersion=0.6.0&key1=val1&key2=val2'/>
```
パラメータの定義は、 HTTP GET リクエストと同様です。track_ua.gif は、カスタムパラメータをアップロードするだけでなく、HTTP ヘッダーの UserAgent および referer をサーバーのログフィールドとして送信します。

注 HTTPS ページのリファラーを収集するには、前述の WebトラッキングのリンクがHTTPS タイプでなければなりません。

JS SDK

loghub-tracking.jsを webディレクトリにコピーし、次のスクリプトをページに追加します。
こちらをクリックしてダウンロード
```
<script type="text/javascript" src="loghub-tracking.js" async></script>
```
注ページ読み込みを中断させることのないよう、スクリプトは HTTP リクエストを非同期に送信します。ページの読み込み中に何度もデータを送信する必要がある場合、前の HTTP リクエストは後続のリクエストに上書きされ、ブラウザには追跡リクエストを終了した旨が示されます。この問題は、同期リクエストを送信することにより、防ぐことができます。同期リクエストを送信するには、スクリプトの次の文を変更します。
元のスクリプト
```
this.httpRequest_.open("GET", url, true)
```
最後のパラメータを変更
```
this.httpRequest_.open("GET", url, false)
```

Tracker オブジェクトを作成します。

var logger = new window.Tracker('${host}','${project}','${logstore}');
logger.push('customer', 'zhangsan');
logger.push('product', 'iphone 6s');
logger.push('price', 5500);
logger.logger();
logger.push('customer', 'lisi');
logger.push('product', 'ipod');
logger.push('price', 3000);
logger.logger();

パラメータの意味は次のとおりです。


フィールド	定義
`${host}`	Log Service のデプロイされているリージョンのドメイン名
`${project}`	Log Service に作成したプロジェクトの名前
`${logstore}`	`${project}`下で Web トラッキング機能が有効になっている Logstore の名前

上記ステートメントが実行されると、Log Service に、以下の 2 つのログが表示されます。

customer:zhangsan
product:iphone 6s
price:5500

customer:lisi
product:ipod
price:3000

Log Service にデータがアップロードされたら、Log Service のLogSearch/Analyticsでリアルタイムにログデータを検索/分析し、さまざまな可視化ソリューションによって分析結果をリアルタイムに表示させることができます。また、Log Service に用意されている LogHub クライアントライブラリを使用して Log Service のデータを読み込むこともできます。