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
    1. loghub-tracking.jswebディレクトリにコピーし、次のスクリプトをページに追加します。

      こちらをクリックしてダウンロード

      <script type="text/javascript" src="loghub-tracking.js" async></script>
      ページ読み込みを中断させることのないよう、スクリプトは HTTP リクエストを非同期に送信します。ページの読み込み中に何度もデータを送信する必要がある場合、前の HTTP リクエストは後続のリクエストに上書きされ、ブラウザには追跡リクエストを終了した旨が示されます。この問題は、同期リクエストを送信することにより、防ぐことができます。同期リクエストを送信するには、スクリプトの次の文を変更します。

      元のスクリプト

      this.httpRequest_.open("GET", url, true)

      最後のパラメータを変更

      this.httpRequest_.open("GET", url, false)
    2. 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 のデータを読み込むこともできます。