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

上図に示されているように、Web Tracking を使用することにより、あらゆるブラウザ、iOS アプリ、および Android アプリからユーザー情報を収集できます (iOS/Android SDK を除く) 。 たとえば、
- ユーザーが使用しているブラウザ、オペレーティングシステム、および解像度
- ユーザーの閲覧行動パターン (ユーザーのクリック動作や Web サイトの購入行動など)
- ユーザーのアプリケーション使用時間、アクティブ/非アクティブ
注意事項
-
Web Tracking を使用すると、この LogStore によってインターネット上で匿名での書き込み許可が有効にされ、不正データが生成される可能性があります。
-
Get リクエストのみがサポートされます。 16 KB を超えるリクエストボディはアップロードできません。
手順
ステップ 1. Web Tracking の有効化
コンソールまたは Java SDK を使用して、Webトラッキングを有効にできます。
- コンソールで Web Tracking を有効にします
- Web Tracking 機能を有効にする必要がある [変更] をクリックします。
- Web Tracking のスイッチをオンにします。
- Java SDK を使用して Web Tracking を有効にします
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. ログの収集
- JS SDK を使用する
- loghub-tracking.js を web ディレクトリにコピーし、ページ上に次のスクリプトを実行します。
<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)
- 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
- loghub-tracking.js を web ディレクトリにコピーし、ページ上に次のスクリプトを実行します。
- 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 を使用してデータを消費することもできます。