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

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

  • ユーザーが使用しているブラウザ、オペレーティングシステム、および解像度
  • ユーザーの閲覧行動パターン (ユーザーのクリック動作や Web サイトの購入行動など)
  • ユーザーのアプリケーション使用時間、アクティブ/非アクティブ
Web Tracking を使用すると、この LogStore によってインターネット上で匿名での書き込み許可が有効にされ、不正データが生成される可能性があります。

注意事項

  • Web Tracking を使用すると、この LogStore によってインターネット上で匿名での書き込み許可が有効にされ、不正データが生成される可能性があります。

  • Get リクエストのみがサポートされます。 16 KB を超えるリクエストボディはアップロードできません。

手順

ステップ 1. Web Tracking の有効化

コンソールまたは Java SDK を使用して、Webトラッキングを有効にできます。

  • コンソールで Web Tracking を有効にします
    1. Web Tracking 機能を有効にする必要がある [変更] をクリックします。
    2. Web Tracking のスイッチをオンにします。
  • Java SDK を使用して Web Tracking を有効にします

    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 {
              //Enable the Web Tracking function on the created Logstore.
              LogStore logSt = client.GetLogStore(project, logStore). GetLogStore();
              client.UpdateLogStore(project, new LogStore(logStore, logSt.GetTtl(), logSt.GetShardCount(), true));
              //Disable the Web Tracking function.
              //client.UpdateLogStore(project, new LogStore(logStore, logSt.GetTtl(), logSt.GetShardCount(), false));
              //Create a Logstore that supports the Web Tracking function.
              //client.UpdateLogStore(project, new LogStore(logStore, 1, 1, true));
          }
          catch (LogException e){
              e.printStackTrace();
          }
      }
    }

ステップ 2. ログの収集

Logstoreに Web Tracking 機能を有効にした後、次の 3 つの方法のいずれかを使用して、データを Logstore にアップロードできます。
ログのアップロードには SDK の使用を推奨します。
  • JS SDK を使用する
    1. loghub-tracking.jsweb ディレクトリにコピーし、ページ上に次のスクリプトを実行します。

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

      <script type="text/javascript" src="loghub-tracking.js" async></script>
      ページロードの実行を維持するために、スクリプトは HTTP リクエストを非同期で送信します。 ページの読み込みプロセスでデータを複数回送信する必要がある場合、前に送信された HTTP リクエストは後から送信されたリクエストに上書きされ、ブラウザは追跡リクエストの終了を示します。 リクエストを同期送信することで、この問題を回避できます。 リクエストを同期送信するには、スクリプトの次の文を置換します。

      元のスクリプト:

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

      リクエスト送信するsために、最後のパラメータを置き換えます。

      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 Tracking 機能が有効になっているLogStoreの名前。
      前述のステートメントが実行されると、次の 2 つのログが Log Service に表示されます。前述のコマンドを実行すると、Log Service に次の 2 つのログが表示されます。
      customer:zhangsan
      product:iphone 6s
      price:5500
      customer:lisi
      product:ipod
      price:3000
  • 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 Tracking 機能が有効になっている Log Store の名前。
    APIVersion=0.6.0 予約済みフィールド (必須)
    __topic__=yourtopic ログトピック、予約フィールドを指定します(オプション)。
    key1=val1, key2=val2 Log Service にアップロードされるキーと値のペア。 複数のペアがサポートされていますが、URL の長さが 16 KB 未満であることを確認する必要があります。
  • HTML の img タグを使用
    <img src='http://${project}.${host}/logstores/${logstore}/track.gif? APIVersion=0.6.0&key1=val1&key2=val2'/>
    <img 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 ページの referer を収集するには、前述の Web Tracking のリンクが HTTPS タイプでなければなりません。

データが Log Service にアップロードされた後、Log Service の LogSearch/Analytics を使用してリアルタイムでログデータの検索 / 分析を行ったり、さまざまな視覚化ソリューションによってリアルタイム分析結果を表示することができます。 また、Log Service によって提供される Consumer Library を使用してデータを消費することもできます。