Quick Tracking Web SDK 統合ガイド - Quick Tracking - Alibaba Cloud ドキュメントセンター

Quick Tracking Web SDK をインポートして初期化することで、Web アプリケーションまたは H5 アプリケーションでのデータ収集を有効にします。すべての手順が必須です。いずれかの手順をスキップすると、データ損失が発生します。

SDK 情報

SDK 名

バージョン

MD5

Quick Tracking Web SDK

最新バージョン: 2.4.25

リリースノート: Web SDK リリースノート

qt_web.umd.js: cb036261b8f0996ef4dd3abfe26796bb

qt_web.cjs.js: f67788cee3bca2a357e9d7152a7d7e24

qt_web.iife.js: 9562dd302dce901242ceb0c3efc3fc63

qt_web.amd.js: e5dd1994abc6c2da3096ef1bfc62e5db

統合方法

1. クイック統合

Quick Tracking 管理コンソールは、各 Web アプリケーション用に一意の統合コードスニペットを生成します。製品内ガイドに従って統合を完了してください。

コンソールパス

[Quick Tracking] > [Home] > [Management Console] > [Organization List] に移動します。アプリケーションの組織を見つけて [Manage Applications] をクリックし、アプリケーションのエントリで [Integrate] をクリックします。

統合ページで、一意の統合コードをコピーします。[Next] をクリックし、[Integration Verification] ガイドに従って成功を確認します。

2. 手動統合

クイック統合ページにアクセスできない場合は、以下のコードスニペットを使用して SDK を手動で統合してください。

2.1. パラメーターの準備

appKey: アプリケーションリストで確認できます。

データ収集ドメイン: [Management Console] > [Collection Information] で確認できます。

SDK URL: [Management Console] > [Collection Information] で確認できます。

2.2. SDK のインポートと初期化

初期化により、データ収集が有効になります。SDK URL を取得したら、ページの <head> タグ内に統合コードを追加します。aplus_queue オブジェクトが上書きされないようにしてください。

(function(w, d, s, q) { 
 w[q] =w[q] || []; 
 var f=d.getElementsByTagName(s)[0],
 j=d.createElement(s); 
 j.async=true; 
 j.id='beacon-aplus'; 
 j.src='YOUR_SDK_URL'; 
 f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'aplus_queue');

ドメインと appKey を設定します。SDK インポートコードの直後に、次のコードを追加します。

// アプリケーションの appKey
aplus_queue.push({ 
    action: 'aplus.setMetaInfo', 
    arguments: ['appKey', 'YOUR_APPKEY'] 
});

// プライベートクラウドデプロイの場合、前述の JavaScript コードの直後にログサーバードメインも設定する必要があります。
// プライベートクラウドのログサーバードメインは、通常 `xxx-web-api.xxx.com.cn` の形式です。具体的なドメインは、管理コンソールの [Collection Information] モジュールから取得してください。
aplus_queue.push({ 
    action: 'aplus.setMetaInfo', 
    arguments: ['trackDomain', 'YOUR_DATA_COLLECTION_DOMAIN']  
});

2.3. 初期化ステータスのリスニング

SDK が完全に初期化された後にのみイベントトラッキングデータを送信するには、aplusReady のリスナーを追加します。

サンプルコード：

aplus_queue.push({
    action: "aplus.aplus_pubsub.subscribe",
    arguments: ["aplusReady", function(status) {
        if (status === 'complete') {
        }
    }]
})

2.4. イベントレポートコールバック

イベントレポートコールバックを受信するには、POST モードを有効にし、aplus_error_listener プロパティを設定します。

エラーコールバックのプロパティ	値と説明	デフォルト
aplus-post-mode	`true`: POST モードを有効にします。`aplus_error_listener` が設定されている場合、エラー情報を受信します。 `false`: POST モードを無効にします。エラーコールバックは利用できません。	false
aplus_error_listener	エラーコールバック関数	null

コールバックの説明：

aplus-post-mode を有効にすると、エラーコールバックは aplus_error_listener プロパティまたは onError メソッドを通じて渡されます。

コールバックのパラメーター	タイプ	説明
err	string	ネットワークエラーコード
data	string	レポートされたペイロード
url	string	レポート URL

サンプルコード：

// POST モードを有効にする
aplus_queue.push({
  action: 'aplus.setMetaInfo',
  arguments: ['aplus-post-mode', true],
});
// エラーリスナーを有効にする
aplus_queue.push({
  action: 'aplus.setMetaInfo',
  arguments: ['aplus_error_listener', (err,data,url)=>{
    // err: ネットワークエラーコード
    // data: レポートされるペイロード
    // url: レポート URL
  }]
});

データの再送信

メソッド	パラメーター
retrySendData	url: レポート URL
retrySendData	data: レポートするデータ

サンプルコード：

// データ送信の再試行をトリガーする
aplus_queue.push({
  action: 'aplus.retrySendData',
  arguments: [url, data] // レポート URL、レポートするデータ
});
  
// 代替メソッド
aplus.retrySendData(url, data) // レポート URL、レポートするデータ

推奨事項：エラートレースにのみ使用してください。コアビジネスロジックや高頻度ループでは使用しないでください。
リソースの消費： XHR リクエストは、非同期であってもネットワークリソースを消費します。
パフォーマンスの問題： sendBeacon とは異なり、XHR はアンロード時の送信をサポートしていません。ページが閉じられるとリクエストが中止される可能性があるため、100%の配信は保証されません。
ネットワーク依存性：ネットワーク状態が悪い場合、再試行も失敗する可能性が高くなります。
ブラウザの互換性： XHR の動作はブラウザによって異なります。この機能はすべての環境で期待どおりに動作しない可能性があります。

3. よくある質問

3.1. オフライン SDK を取得するにはどうすればよいですか?

[Management Console] > [Collection Information] から SDK URL を取得してください。ブラウザで URL を開き、Ctrl+S (macOS では Cmd+S) を押してファイルをローカルに保存してください。