デバイス ID、ユーザープロパティ、ページビュー、イベント、バイラル共有に関する QuickTracking H5 SDK の API リファレンスです。
1. トラッキングプランの理解
トラッキングを実装する前に、トラッキングポイントを配置する箇所と収集するデータを定義します。QuickTracking は、そのための標準テンプレートを提供します。

トラッキングプランでは、次の要素を定義します:
1. イベントの主体:イベントをトリガーした "who" を識別します。デバイス ID または アカウント ID を指定できます。報告する各イベントには、これらの識別子のうち少なくとも 1 つを含める必要があります。
-
デバイス ID:QuickTracking は H5 ページ向けに自動生成します。H5 ページがミニプログラムに埋め込まれている場合は、デバイス ID をミニプログラムのデバイス ID と一致するように設定します。
-
アカウント ID:ログインしたユーザーを識別します。デバイス ID とは異なり、アカウント ID は複数のデバイス間で同一です。
2. ユーザープロパティ:アカウント ID に関連付けられる属性です。例:"Birthday"、"Membership Level"。
3. チャネルプロパティ:広告キャンペーンに関連する属性です。例:広告チャネル、配信方法、広告コンテンツ。
4. グローバルプロパティ:一度設定すると、以降のすべてのイベントに含まれる属性です。
5. ページビューイベント:ページの読み込み時に報告されます。トラッキングプランでは、ページコードとイベントコードは同一です。
6. クリック、露出、およびカスタムイベント:ユーザーがアプリケーションを操作したときに報告されるイベントです。
2. デバイス ID とアカウント ID の設定
2.1 デバイス ID の設定
Web のデバイス ID は、QuickTracking による自動生成 (デフォルト) または 開発者による手動設定 のいずれかです。
-
自動生成 (デフォルト):デバイス ID が再生成されるのは、ブラウザが変更された場合、またはユーザーが Cookie とキャッシュをクリアした場合のみです。ブラウザと IP アドレスが同一の場合、再生成された ID は変わりません。
-
手動設定:ID を手動で設定するには、
_dev_idに値を代入します。ID の長さは 24~36 文字である必要があります。
// まず、_hold を BLOCK に設定してデータ送信をブロックします。
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['_hold', 'BLOCK']
});
// _dev_id を設定します。
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['_dev_id', 'your_custom_device_id']
});
// 次に、_hold を START に設定してデータ送信を許可します。
// これにより、ブロックされていたログがデバイス ID とともに順次送信されます。
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['_hold', 'START']
});
2.2 アカウント ID の設定
アカウント ID は、ユーザーがログインしたとき と、ログインしたユーザーが H5 ページにアクセスしたとき に設定します。アカウント ID はページに再アクセスしても保持されないため、ログイン時と、ログインしたユーザーが H5 ページにアクセスするたび に設定する必要があります。
// ユーザーがログインしたら、ユーザーのアカウント情報を取得します。
// または、ユーザーがすでにログインしている場合は、Cookie またはローカルストレージからアカウント情報を取得します。
function demoLogin() {
/************************* 同期シナリオの場合 ***********************************/
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['_user_id', 'user_account_id']
});
/****************** ログがアカウント ID に依存する非同期シナリオの場合 ***********************/
// まず、_hold を BLOCK に設定してデータ収集をブロックします。
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['_hold', 'BLOCK']
});
...
function callback() {
// コールバック内で、非同期結果からユーザーのアカウント ID を取得します。
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['_user_id', 'user_account_id']
});
// 次に、_hold を START に設定してデータ収集を許可します。
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['_hold', 'START']
});
};
...
};
// ユーザーがログアウトしたら、アカウント ID をリセットします。
function demoLogOff() {
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['_user_id', '']
});
};
2.3 デバイス ID とアカウント ID の取得
デバイス ID の取得
自動生成されたデバイス ID を取得するには:
cna という名前の Cookie に保存されます。document.cookie を解析して取得できます。
手動で設定したデバイス ID を取得するには:
_dev_id を指定して setMetaInfo でカスタムデバイス ID を設定した場合は、aplus.getMetaInfo('_dev_id') を呼び出して取得できます。
アカウント ID の取得
_user_id を指定して setMetaInfo でカスタムアカウント ID を設定した場合は、aplus.getMetaInfo('_user_id') を呼び出して取得できます。
3. ユーザープロパティの設定
ユーザープロパティを報告するには、イベントタイプ OTHER と、事前定義されたイベントコード $$_user_profile を使用します。
アカウント ID を設定したら、ユーザープロパティを報告します。例:
// 例
aplus_queue.push({
'action': 'aplus.record',
'arguments': ['$$_user_profile', 'OTHER', {
name: 'sss', // ユーザープロパティ 1
gender: 'male', // ユーザープロパティ 2
class: '3', // ユーザープロパティ 3
}]
});
この例では、4 行目、5 行目、6 行目をカスタマイズできます。それ以外の行は変更しないでください。
4. チャネルプロパティ
デフォルトでは、チャネルプロパティはブラウザタブの SessionStorage のライフサイクルの間、保持されます。v2.0.7 以降では、UTM パラメータの有効期限 (日数) をカスタム設定できます。値は Cookie に保存され、ブラウザの Cookie ポリシーの影響を受けます。
有効期限を設定するには:
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['aplus-utm-expire-days', '1']
});
H5 のチャネルパラメータのユースケース:
4.1 H5 リンクからの起動
SDK は起動 URL からチャネルプロパティを自動的に取得します。プロパティキーは "utm_" で始まる必要があります。例:
qaplus/product?utm_channel=gzh
注:"utm_" プレフィックスを使用しないサードパーティ広告プラットフォームの場合は、グローバルプロパティ API を使用してチャネルプロパティを報告します。設定するキーは "utm_" で始まる必要があります。
4.2 アプリストア経由でのアプリ起動
H5 リンクに "utm_" パラメータを含めるだけでは、インストール後のアプリ起動をアトリビューションできません。システムは、IP アドレスとブラウザの User-Agent に基づいて、"H5 launch event" と "app start event" をあいまい一致させます。
-
ユーザーが H5 ページで "Launch/Download App" ボタンをクリックしたら、アプリリンクイベント (
$$_app_link) を報告します。このイベントには、対象アプリのappkeyとチャネルプロパティを含める必要があります。
// 例
aplus_queue.push({
action: 'aplus.recordAppLink',
arguments: [{
targetAppKey: 'appKey_of_the_target_app', // 必須。起動するアプリの appkey。
custom1: 'custom1', // 任意。カスタムパラメータ。
...
}]
})
-
QuickTracking App SDK は、インストール後の最初のアプリ起動イベントを自動的に収集します。これはアプリインストールイベント (
$$_app_install) です。 -
QuickTracking システムは、IP アドレスとブラウザの User-Agent に基づいて、アプリリンクイベント (
$$_app_link) とアプリインストールイベント ($$_app_install) をあいまい一致させます。その後、アプリ分析で"App Install (predefined)"イベントのチャネルプロパティを直接分析できます。
5. グローバルプロパティ
グローバルプロパティのライフサイクルは、API が最初に呼び出された時点で開始し、ブラウザタブが閉じられたとき、ブラウザが閉じられたとき、またはマルチページアプリケーションで URL が変更されたときに終了します。
5.1 グローバルプロパティの追加 (aplus.appendMetaInfo)
aplus.appendMetaInfo メソッドは、既存のグローバルプロパティの値を更新します。キーが存在しない場合は、新しいプロパティを追加します。
API:
aplus_queue.push({
action: 'aplus.appendMetaInfo', // グローバルプロパティを追加
arguments: ['globalproperty', {
xxx: xxx,
}]
});
例:
aplus_queue.push({
action: 'aplus.appendMetaInfo', // グローバルプロパティを追加
arguments: ['globalproperty', {
a: 3,
b: 4
}]
});
// 現在の globalproperty は {a: 3, b: 4} です
aplus_queue.push({
action: 'aplus.appendMetaInfo', // グローバルプロパティを追加
arguments: ['globalproperty', {
b: 2,
d: 4
}]
});
// 現在の globalproperty は {a: 3, b: 2, d: 4} です
グローバルプロパティを設定すると、以降のすべてのイベントに含まれます。ブラウザタブが閉じられたとき、ブラウザが閉じられたとき、またはマルチページアプリケーションで URL が変更されたときまで保持されます。
5.2 グローバルプロパティの上書き (aplus.setMetaInfo)
aplus.setMetaInfo は、既存のすべてのグローバルプロパティを新しいセットに置き換えます。
このメソッドは、ビジネスロジックに合致する場合にのみ使用してください。一般的なユースケースは、すべてのグローバルプロパティをクリアすることです。慎重に使用してください。
重要:このメソッドは、すべてのチャネルプロパティも上書きします。
API:
aplus_queue.push({
action: 'aplus.setMetaInfo', // グローバルプロパティを上書き
arguments: ['globalproperty', {
xxx: xxx
}]
});
例:
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['globalproperty', {
a: 1,
b: 2
}]
});
// 現在の globalproperty は {a: 1, b: 2} です
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['globalproperty', {
c: 1,
d: 2
}]
});
// 現在の globalproperty は {c: 1, d: 2} です。{a: 1, b: 2} は存在しません。
5.3 グローバルプロパティの取得
現在のすべてのグローバルプロパティとチャネルプロパティを取得するには、getMetaInfo を使用します。
aplus.getMetaInfo('globalproperty');
注:このメソッドは、SDK の初期化が完了した後に呼び出す必要があります。
6. ページビューイベント API
1. ページビューイベントは、自動トラッキングまたは手動トラッキングの 2 つの方法で追跡できます。デフォルトでは、ページビューイベントの自動トラッキングが有効になっています。
2. ページビューイベントで追跡する情報には、以下が含まれます:
-
イベントコード:ページビューイベントの場合、ページコードと同じです。

-
ページビューイベントのイベントプロパティ:詳細については、「トラッキングプラン」をご参照ください。
6.1 pageConfig
グローバルな pageConfig オブジェクトを使用して、ページコードを設定します。
<head>
...
<script>
...SDK 統合コード
// ページコードとページタイトルを設定します。
// pageConfig を設定します。SDK v1.7.7 以降で有効です。
// pageConfig が設定されていない場合、
// ページコードはデフォルトでパラメーターなしの現在のページ URL になり、
// ページタイトルはデフォルトで document.title になります。
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['pageConfig', {
hashMode: false, // デフォルトは false (ヒストリーモード) です。ハッシュモードを有効にするには true に設定します。
// hashMode=true の場合にのみ有効です。デフォルトは false です。true の場合、ハッシュモードの自動 PV は、完全な URL での同一性チェックをサポートします。
hashAutoPVSupportFullURL: false,
'/': {
pageName: 'home_page_test',
pageTitle: 'Home',
skipMe: true // このページビューイベントの自動報告をスキップします。デフォルトは undefined です。
},
'/search': { // location.pathname に基づいてマッチングします
pageName: 'search_page_test',
pageTitle: 'Search Page',
regRule: /\/search/ // (任意) 動的ルートを検証します。
},
'#/hash_page': { // location.hash に基づいてマッチングします
pageName: 'hash_page_test',
pageTitle: 'Hash Mode Page',
regRule: a_regex_to_match_current_hash_route // (任意) 正規表現で動的ルートを検証します。
},
'/demo.html': {
pageName: 'demo_test',
pageTitle: 'Demo Test Page'
}
}]
});
</script>
</head>
-
pageName
-
ページコードです。
-
-
pageTitle
-
ページタイトルです。
-
-
skipMe:ページの自動トラッキングを無効にします。-
無効にするには
true、有効にするにはfalseに設定します。 -
この設定は、グローバルな
aplus-disable-apvスイッチを上書きします。
-
-
hashMode-
自動ページビュー URL 検出がハッシュモードに基づくかどうかを指定します。デフォルトは
falseです。
-
-
hashAutoPVSupportFullURL
-
ハッシュモードで、パラメーターを含む URL が変更されたときに自動ページビューイベントを送信するかどうかを指定します。
-
デフォルトは
falseです。この設定は、hashModeがtrueの場合にのみ有効です。-
たとえば、
hashModeとこのプロパティの両方がtrueの場合、www.example.com/#/a?p=111からwww.example.com/#/a?p=222へのナビゲーションで、自動ページビューイベントがトリガーされます。
-
-
v2.4.3 以降でサポートされています。
-
6.2 自動ページビュートラッキング
SDK がページに読み込まれると、以下の情報を含むページビューイベントを報告します。
-
現在のクライアント時刻
-
ページパス
-
ページコード (デフォルトはページパス。
pageConfigが設定されている場合は、マッピングされたpageNameを使用します) -
ページタイトル (デフォルトはページタイトル。
pageConfigが設定されている場合は、マッピングされたpageTitleを使用します) -
ページの滞在時間:SDK はこのメトリックを収集しません。
6.2.1 自動ページビューの有効化または無効化
自動ページビュー報告はデフォルトで有効になっています。無効にするには、次の API 呼び出しを使用します。
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['aplus-disable-apv', true]
});
単一ページの自動報告を無効にするには、その pageConfig で skipMe を true に設定します。
6.2.2 自動ページビューのカスタムプロパティ
自動トラッキングモードでは、pageConfig の extData オブジェクトを使用して、ページビューイベントにカスタムプロパティを追加します。extData オブジェクトまたはそのフィールドには関数を設定できます。
注:この機能は v2.0.17 以降でサポートされています。
使用例:
<head>
...
<script>
...SDK 統合コード
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['pageConfig', {
'/page1': {
pageTitle: '',
pageName: '',
skipMe: true,
extData: {
customData1: 1,
customData2: 1,
},
},
'/page2': {
extData: {
customData1: 1,
customData2: function () {
return 1342;
}
}
},
'/page3': {
extData: function () {
return {
customData1: 1,
customData2: 1342
}
}
},
}]
});
</script>
</head>
6.3 手動ページビュートラッキング
API
sendPV メソッドを使用して、手動ページビューイベントを報告します。
aplus_queue.push({
action: 'aplus.sendPV',
arguments: [pageEventConfig, userData]
});
各要素の説明:
-
pageEventConfigはページイベントの設定です。これを{ is_auto: false }に設定します。 -
userDataは、このページビューイベントのカスタムパラメーター用のオブジェクトです。このオブジェクトは、フラットな JSON オブジェクト (ネストされたオブジェクトなし) である必要があります。渡すパラメーターがない場合は、空のオブジェクト{}を使用します。
例:
// 簡単なデモ
aplus_queue.push({
'action': 'aplus.sendPV',
'arguments': [{
is_auto: false
}, {
page_title: "Home", // (任意) デフォルトでは pageConfig の値が使用されますが、この値で上書きできます。
page_name: "yourCurrentPageName", // (任意) デフォルトでは pageConfig の値が使用されますが、この値で上書きできます。
// duration パラメーターはミリ秒単位で設定します。この値は秒に変換され、分析時に「イベントプロパティ - 期間 (s)」として使用されます。入力と出力で単位が異なる点にご注意ください。
duration: 1111111,
// カスタムイベントプロパティ
x: 111,
y: 222
}]
});
この値は、pageConfig で設定された pageTitle の値を上書きします。
この値は、pageConfig で設定された pageName の値を上書きします。
7. イベントトラッキング
ページビュー以外のすべてのイベントについては、'action': 'aplus.record' メソッドを使用します。イベントで追跡する情報には、次のものが含まれます。
-
イベントコード:

-
イベントプロパティ:

-
ページコード (任意):SDK はデフォルトでページパスを収集します。パスが
pageConfigでpage_nameにマッピングされている場合、SDK はその値を使用します。page_nameがイベントプロパティとしても設定されている場合、イベントプロパティが優先されます。優先順位は次のとおりです。
イベントプロパティの page_name > pageConfig の page_name > ページパス

-
ページタイトル (任意):SDK はデフォルトでページタイトルを収集します。パスが
pageConfigでpage_titleにマッピングされている場合、SDK はその値を使用します。page_titleがイベントプロパティとしても設定されている場合、イベントプロパティが優先されます。優先順位は次のとおりです。
イベントプロパティの page_title > pageConfig の page_title > ページタイトル
イベントトラッキングは、自動または手動で行うことができます。デフォルトでは、クリックイベントと露出イベントの自動トラッキングは無効になっています。
注:
ネイティブアプリは厳格なデータ型を強制しますが、H5 は弱い型付けを使用します。H5 ページがネイティブアプリに埋め込まれている場合、null などの型の不一致がエラーを引き起こす可能性があります。H5 からデータを渡す際は、適切なデータ型 (数値、文字列、または文字列の配列) を使用してください。
イベントプロパティには、文字列、数値、ブール値、日付 (文字列形式)、または文字列の配列のいずれかの型を使用できます。
7.1 露出イベント
EXP は露出イベントを指します。
aplus_queue.push({
'action': 'aplus.record',
'arguments': ['event_code_from_tracking_plan', 'EXP', {
x: '111',
y: '222',
z: 333,
page_name: "demoPageName", // 任意。現在のページのカスタムページコード。
}]
});
7.2 クリックイベント
CLK はクリックイベントを指します。
aplus_queue.push({
'action': 'aplus.record',
'arguments': ['event_code_from_tracking_plan', 'CLK', {
x: '111',
y: '222',
z: 333,
page_name: "demoPageName", // 任意。現在のページのカスタムページコード。
}]
});
7.3 その他のカスタムイベント
OTHER は、クリックイベントまたは露出イベントではないカスタムイベントを指します。
aplus_queue.push({
'action': 'aplus.record',
'arguments': ['event_code_from_tracking_plan', 'OTHER', {
x: '111',
y: '222',
z: 333,
page_name: "demoPageName", // 任意。現在のページのカスタムページコード。
}]
});
データ型リファレンス:
|
型 |
値 |
システム認識型 |
制限 |
|
number |
12 または 12.0 |
<Number: Integer, Long, Float, Short, Double> |
なし |
|
boolean |
true または false |
<Boolean> |
なし |
|
string |
"This is test Text" |
<String> |
UTF-8 エンコーディング後、最大長 1024 バイト。この制限を超えたフィールドはシステムによって破棄されます。 |
|
string[] |
["ABC","123"] |
<Array (String)> |
文字列要素の配列 (重複は削除されません)。要素の最大数は 100 です。各要素の最大長は、UTF-8 エンコーディング後 255 バイトです。 |
|
date (as string) |
|
<Datetime> |
推奨される形式は
|
7.4 自動露出トラッキング
SDK は要素の露出を自動的に検出します。要素の 50% 以上が 300 ms を超えてビューポートに表示されると、露出がトリガーされます。
<body>
<div id="root">
<h1 class="title">demo</h1>
<!-- パラメーターを渡すには、小文字の名前を持つ data-* 属性を使用します。 -->
<button class="autoexp-component-css"
data-pagename="custom_page_code_for_this_event"
data-page_title="custom_page_title_for_this_event">Test Exposure</button>
<List>
<List.Item class="autoexp-list-item" data-name={"a"}>a</List.Item>
<List.Item class="autoexp-list-item" data-name={"b"}>b</List.Item>
<List.Item class="autoexp-list-item" data-name={"c"}>c</List.Item>
<List.Item
class='autotrack_exp_web'
data-itemname={'Reading'}
data-itemzoon={'abc'}
data-itemid={'a_product_id'}
data-promotioninformation={'abc'}
data-pagename={'Home'}>Automatic Tracking - Auto Exposure</List.Item>
</List>
</div>
</body>
SDK の設定:
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['aplus-auto-exp', [
// ボタン要素の露出を追跡します。
{
cssSelector: '.autoexp-component-css', // 追跡する要素のクラス。
logkey: 'auto-exp-id', // トラッキングプランに対応するイベントコード。
props: ['data-pagename', 'data-page_title'], // 追跡する要素のカスタム属性。
},
// リスト要素の露出を追跡します。
{
cssSelector: '.autoexp-list-item',
logkey: 'auto-exp-item', // トラッキングプランに対応するイベントコード。
props: ['data-name'], // 自動露出トラッキングで、アイテムの name フィールドが使用されます。
},
],
],
});
// 自動露出トラッキング用の事前コールバック関数。キャメルケース名などのカスタムパラメーターに対応できます (data 属性は小文字のみをサポートするため)。
// v1.9.25 以降でサポートされています。
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['aplus-auto-exp-userfn', function (e) {
if (e.className.indexOf('autotrack_exp_web') != -1) {
var dataset = e.dataset;
var obj = {};
obj.itemID = dataset.itemid;
obj.itemName = dataset.itemname;
obj.itemZoon = dataset.itemzoon;
obj.promotionInformation = dataset.promotioninformation;
obj.pageName = dataset.pagename;
return {
userdata: obj
};
}
}]
});
要素がコンテナー (独自のスクロールバーを持つブロック) 内でスクロールする場合、以下のように positionSelector 設定を追加する必要があります:
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['aplus-auto-exp', [{
positionSelector: '.content-wrap', // スクロール可能なコンテナーのクラス。
cssSelector: '.autoclk-app-option', // 追跡する要素のクラス。
logkey: 'auto-exp-id', // トラッキングプランに対応するイベントコード。
props: ['data-name'], // 要素のカスタム属性。
},
],
],
});
シングルページアプリケーション (SPA) では、ユーザーがページを離れて戻ってきたときに、SDK が露出を再報告することがあります。これを無効にするには:
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['aplus-exposure-event-can-repeat', false]
});
デフォルトは true (露出イベントの繰り返しが許可されます) です。
注:この API は v1.10.2 以降でのみ有効です。以前のバージョンでは、SDK は完全なリロードなしでページに再アクセスした際に、すでに露出した要素を再追跡しません。
7.5 自動クリックトラッキング
v1.7.0 以降、SDK は自動クリックイベント収集をサポートしています。
<body>
<div id="root">
<h1 class="title">Demo</h1>
<!-- 1. まず、追跡する HTML 要素のクラスを特定します。 -->
<!-- 2. パラメーターを渡すには、小文字の名前を持つ data-* 属性を使用します。 -->
<button
class='autoclk-component-css'
data-aparam="1"
data-pagename="custom_page_code_for_this_event"
data-page_title="custom_page_title_for_this_event">
Test Click
</button>
<li
className='autotrack_clk_web'
data-itemname='Reading'
data-itemzoon='abc'
data-itemid='a_product_id'
data-promotioninformation='abc'
data-pagename='Home'>Automatic Click</li>
</div>
</body>
SDK の設定:
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['aplus-auto-clk', [{
cssSelector: '.autoclk-component-css', // 要素のクラス。
logkey: 'auto-clk-id', // トラッキングプランに対応するイベントコード。
props: ['data-aparam', 'data-pagename', 'data-page_title'], // 要素のカスタム属性。
},
],
],
});
// 自動クリックトラッキング用の事前コールバック関数。キャメルケース名などのカスタムパラメーターに対応できます (data 属性は小文字のみをサポートするため)。
// v1.9.25 以降でサポートされています。
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['aplus-auto-clk-userfn', function (e) {
if (e.className.indexOf('autotrack_clk_web') != -1) {
var dataset = e.dataset;
var obj = {};
obj.itemID = dataset.itemid;
obj.itemName = dataset.itemname;
obj.itemZoon = dataset.itemzoon;
obj.promotionInformation = dataset.promotioninformation;
obj.pageName = dataset.pagename;
return {
userdata: obj
};
}
}]
});
7.6 自動クリックキャプチャ
7.6.1 自動クリックキャプチャの有効化または無効化
aplus-autotrack-enabled パラメーターは、自動クリックキャプチャ機能を制御します。デフォルトでは true です。
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['aplus-autotrack-enabled', true]
});
7.6.2 自動キャプチャ対象要素の設定
デフォルトでは、SDK は a、button、textarea、input 要素のクリックイベントのみをキャプチャします。他の要素タイプのクリックをキャプチャするには、aplus-autotrack-config を使用して設定します。
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['aplus-autotrack-config', {
collect_tags: {
li: true, // 要素をキャプチャ
img: true,// 要素をキャプチャ
svg: true,// 要素をキャプチャ
div: true,// 要素をキャプチャ
span: true,// 要素をキャプチャ
path: true,// 要素をキャプチャ
p: true // 要素をキャプチャ
},
collect_input: true, // 入力フィールドのコンテンツをキャプチャします。デフォルトは false です。
element_capture_enable: true // 自動クリックトラッキングのイベントキャプチャモードを有効にします。デフォルトはバブリングモード (false) です。
}]
});
7.6.3 自動クリックイベントのプロパティ報告
他の自動イベントと同様に、HTML の data 属性を使用してプロパティを報告できます。
<body>
<div id="root">
<!-- パラメーターを渡すには、data-* 属性を使用します。 -->
<button data-aparam="1">Test Click</button>
</div>
</body>
7.6.4 単一要素の自動トラッキング無効化
特定の要素のイベント報告を無効にするには、aplus-autotrack-off="true" 属性を追加します。
<body>
<div id="root">
<!-- パラメーターを渡すには、data-* 属性を使用します。 -->
<button data-aparam="1" aplus-autotrack-off="true">
aplus-autotrack-off を持つコンポーネントは追跡されません
</button>
</div>
</body>
7.6.5 要素のカスタムイベントコード設定
data-clk-logkey を使用して、カスタムイベントコードを設定します。
<button data-clk-logkey="demoEventCode">data-clk-logkey でカスタムイベントコードを設定</button>
8. ヒートマップ
8.1 ヒートマップの有効化または無効化
ヒートマップ機能はデフォルトで無効になっています。有効にするには、次のいずれかの設定を使用します:
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['aplus-heatmap-enabled', true]
});
または:
<meta name="aplus-heatmap-enabled" content="1">
8.2 ヒートマップのサンプリングレート設定
ヒートマップイベントのサンプリングレートを設定できます。最小値は 0.001 で、小数点以下 3 桁までの精度がサポートされます。
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['aplus-rate-ahot', 0.001] // ヒートマップイベントのサンプリングレート。最小値は 0.001 です。
});
または:
<meta name="aplus-rate-ahot" content="0.001">
9. バイラル共有
バイラル共有は、社会的つながりを活用して情報を拡散し、新規ユーザーを獲得するものです。
SDK のバイラル共有機能を統合することで、QuickTracking プラットフォームでシェアトレンドモデルを使用し、シェア獲得メトリクスを通じてユーザー獲得の有効性を測定できます。
-
さまざまなレベルで、上位の共有ユーザーとシェア獲得メトリクスのビューを表示します。
-
獲得メトリクスを組み合わせて、キーオピニオンリーダーを特定します。共有パスと関係を追跡します。
9.1 ソース共有パラメーターの取得
window.aplus.getRefShareParams();
バージョン要件
H5 SDK v2.2.0 以降。
目的
共有された H5 ページを開くと、この API はソースシェア ID とソースシェア URL を取得します。
リクエストパラメータ
なし
戻りパラメーター
オブジェクト
|
パラメーター |
タイプ |
デフォルト |
説明 |
備考 |
|
$$_ref_share_url |
文字列 |
"" |
共有 ID を除いたソース共有 URL。 |
なし |
|
$$_ref_share_id |
文字列 |
"" |
ソース共有 ID。 |
なし |
使用例
Promise ベースの戻り値
// プロミスベースの戻り値
function onShare(options) {
const {
$$_ref_share_url,
$$_ref_share_id
} = window.aplus.getRefShareParams();
const promise = window.aplus.requestShareParams({
title: 'キャンペーンページを共有',
path: 'https://www.taobao.com/productId?utm_test=test',
campaign: 'これは共有キャンペーンです',
shareId: $$_ref_share_id
}).then(res => {
const { $sid } = res;
if ($sid) {
window.aplus.record("$$_share", "CLK", {
$$_share_title: "これは共有タイトルです",
$$_share_id: $sid,
$$_share_campaign_id: "これはカスタム共有キャンペーンです",
$$_share_type: "ユーザー定義の共有プラットフォーム",
$$_share_url: "これは共有 URL です"
});
} else {
console.log("共有パラメーターの取得に失敗しました。"); // DEBUG モードでは、失敗の理由がコンソールに出力されます。
}
});
}
コールバックベースの戻り値
// コールバックベースの戻り値
function onShare() {
const {
$$_ref_share_url,
$$_ref_share_id
} = window.aplus.getRefShareParams();
window.aplus.requestShareParams({
title: 'Share Campaign Page',
path: '/pages/share/shareCampaign?utm_test=test',
campaign: 'This is a share campaign',
shareId: $$_ref_share_id
}, (res) => {
const { $sid } = res;
if ($sid) {
window.aplus.record("$$_share", "CLK", {
$$_share_title: "This is a share title",
$$_share_id: $sid,
$$_share_campaign_id: "This is a custom share campaign",
$$_share_type: "User-defined share target platform",
$$_share_url: "This is a share URL"
});
} else {
console.log("Failed to get share parameters."); // デバッグモードでは、失敗の理由がコンソールに表示されます。
}
});
}
9.2 共有リクエストパラメーター
window.aplus.requestShareParams(Object params, Function callback);
バージョン
H5 SDK v2.2.0 以降。
目的
共有リンクの作成に必要な共有 ID をリクエストします。
リクエストパラメータ
|
パラメーター |
タイプ |
デフォルト |
説明 |
備考 |
|
params |
オブジェクト |
なし |
共有パラメーターを格納するオブジェクトです。 |
|
|
callback |
関数 |
undefined |
Promise をサポートしない環境向けのコールバック関数です。 |
コールバック関数を指定した場合、結果はコールバック経由で返されます。 |
戻り値パラメータ
リクエストに コールバック が含まれていない場合、Promise.resolve(Object result); を返します。
|
パラメータ |
タイプ |
デフォルト |
説明 |
備考 |
|
$sid |
文字列 |
undefined |
共有アクションの一意の識別子です。 |
なし |
リクエストに コールバック が含まれる場合、オブジェクトの結果 を返します。
|
パラメーター |
タイプ |
デフォルト |
説明 |
備考 |
|
$sid |
文字列 |
undefined |
共有 ID。現在の共有アクションを一意に識別する識別子です。 |
なし |
使用例
Promise ベースの戻り値
// Promise ベースの戻り値
function onShare(options) {
const promise = window.aplus.requestShareParams({
title: 'Share Campaign Page',
path: 'https://www.taobao.com/productId?utm_test=test',
campaign: 'This is a share campaign',
shareId: "this_is_a_source_share_id"
}).then(res => {
const { $sid } = res;
if ($sid) {
window.aplus.record("$$_share", "CLK", {
$$_share_title: "This is a share title",
$$_share_id: $sid,
$$_share_campaign_id: "This is a custom share campaign",
$$_share_type: "User-defined share target platform",
$$_share_url: "This is a share URL"
});
} else {
console.log("Failed to get share parameters."); // シェアパラメーターの取得に失敗した旨のメッセージをコンソールに出力します。
}
});
}
コールバックベースの戻り値
function onShare() {
window.aplus.requestShareParams({
title: 'Share Campaign Page',
path: '/pages/share/shareCampaign?utm_test=test',
campaign: 'This is a share campaign',
shareId: "this_is_a_source_share_id"
}, (res) => {
const { $sid } = res;
if ($sid) {
window.aplus.record("$$_share", "CLK", {
$$_share_title: "This is a share title",
$$_share_id: $sid,
$$_share_campaign_id: "This is a custom share campaign",
$$_share_type: "User-defined share target platform",
$$_share_url: "This is a share URL"
});
} else {
console.log("Failed to get share parameters."); // デバッグモードでは、失敗の理由をコンソールに出力します。
}
});
}
9.3 シェア イベントのレポート
事前定義のイベントコード $$_share とイベントタイプ CLK を使用して、共有イベントを報告してください。
例:
window.aplus.record("$$_share", "CLK", {
$$_share_title: "これはシェアのタイトルです",
$$_share_id: "リクエストAPIから取得したシェアID",
$$_share_campaign_id: "これはカスタムシェアキャンペーンです",
$$_share_type: "ユーザー定義のシェアターゲット プラットフォーム",
$$_share_url: "これはシェアのURLです"
});
注:宛先 URL には $sid パラメーターを含める必要があり、その値は共有 ID となります。例: https://example.aliyun.com/path/to/content?$sid=123456
H5 リンクから別のアプリケーションを起動する例:
const {
$$_ref_share_url,
$$_ref_share_id
} = window.aplus.getRefShareParams();
window.aplus.requestShareParams({
title: '共有キャンペーンページ',
path: '/pages/share/shareCampaign?utm_test=test',
campaign: 'これは共有キャンペーンです',
shareId: $$_ref_share_id
}, (res) => {
const { $sid } = res;
if ($sid) {
window.aplus.record("$$_share", "CLK", {
$$_share_title: "これは共有タイトルです",
$$_share_id: $sid,
$$_share_campaign_id: "これはカスタム共有キャンペーンです",
$$_share_type: "ユーザー定義の共有ターゲットプラットフォーム",
$$_share_url: "これは共有 URL です"
});
setTimeout(() => {
var urlScheme = "https://example.aliyun.com/path/to/content?utm_source=utm_test&$sid=" + $sid;
window.location.href = urlScheme;
}, 1000)
} else {
console.log("共有パラメーターの取得に失敗しました。"); // DEBUG モードでは、失敗の理由がコンソールに出力されます。
}
});