トラッキングスキームに基づいて適切なトラッキング API を選択します。
1. トラッキングプランの表示方法
トラッキングを行う前に、どこで何をトラッキングするかを決定する必要があります。つまり、トラッキングの明確な要件を整理する必要があります。 QuickTracking プラットフォームでは、トラッキングの明示的な要件はトラッキングプランと呼ばれ、トラッキングプランには仕様テンプレートが設計されています。例:
トラッキングプランでは、必要なトラッキングは次のとおりです。
1. イベントの主体:イベントをトリガーした「誰が」。イベントは、デバイス ID とアカウント ID に分けることができます。イベントには、これらのいずれかが必要です。
デバイス ID:通常、H5 の QT では自動的に生成されます。 H5 ページがアプレットに埋め込まれている場合は、デバイス ID をアプレットのデバイス ID に設定する必要があります。
アカウント ID:ログイン後のクライアントユーザーのアカウント ID。ユーザーが異なるデバイスからログインすると、デバイス ID は変わりますが、アカウント ID は変わりません。たとえば、ユーザーが携帯電話とパッドを使用して別々にログインする場合などです。
2. ユーザー プロパティ:アカウント ID のプロパティ。たとえば、アカウント ID が「testdemo@111」、誕生日が「1999-02-13」、メンバーレベルが「プラチナ」のユーザーなど。「誕生日」と「メンバーシップ」の評価はユーザー プロパティです。
3. チャンネル プロパティ:広告配信のプロパティ。たとえば、配信チャンネル、配信方法、配信コンテンツなどです。
4. グローバル プロパティ:一度グローバル設定した後に各イベントに付与されるプロパティ
5. ページ閲覧イベント:ページの読み込み時に報告されるイベント(ページコードはトラッキングスキームのイベントコードと同じで、青色でマークされたイベントでもあります)
6. クリック、露出、カスタムイベント:クライアントユーザーがクライアントと対話したときに報告されるイベント。
2. デバイス ID とアカウント ID を設定する
2.1 デバイス ID の設定
Web デバイス ID は、Quicktracking によって自動的に生成されるか、開発者によって手動でアップロードされることができます。デフォルト値:Quicktracking によって自動的に生成される。
自動生成:デフォルトでは、Web サイトのデバイス ID は、ブラウザが変更された場合、またはユーザーが Cookie とキャッシュをクリアした場合にのみ再生成されます。ユーザーのブラウザと IP アドレスが変更されない場合、再生成されたデバイス ID は変更されません。
手動アップロード:_dev_id に値を割り当てます。アップロードの長さは 24 ~ 36 文字である必要があります。
// ユーザーIDが非同期で追跡される場合は、SDKがレポートされないようにし、BLOCKトラッキングを設定する必要があります。
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['_hold', 'BLOCK']
});
// _dev_idパラメータを設定します。
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['_dev_id', 'カスタムデバイスID']
});
// ユーザーIDの追跡は非同期であるため、最初にBLOCKを設定してからSTARTを設定する必要があります。
// _hold = STARTが設定されると、以前にブロックされたログはユーザー情報とともに1つずつ送信されます。
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['_hold', 'START']
});
2.2 アカウント ID の設定
ログインまたはH5 にログインする場合は、アカウント ID を指定する必要があります。これは、設定後の各ログにアカウント ID が含まれるためですが、H5 を終了してから H5 に再度入った後にトリガーされるイベントにはアカウント ID が含まれません。したがって、H5 インスタンスにログインするとき、または H5 インスタンスにログインするときにアカウント ID を設定する必要があります。
// ユーザーがログインすると、ログインアカウント情報が取得されるか、ユーザーがログイン済みになります。Cookieまたはlocalstorageを使用してログインアカウントを取得できます。
function demoLogin() {
/*************************** 同期シーンの場合 ************************************* /
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['_user_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', 'アカウント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 を取得する
次のいずれかの方法を使用して、SDK によって自動的に生成されるデバイス ID を取得できます。
cna という名前のフィールドが現在のドメインの Cookie に保存されます。 document.cookie ファイルを解析して、cna フィールドの値を取得できます。
_dev_id メソッドを使用して、アップロードされたデバイスの ID を次のように取得できます。
開発者は setMetaInfo を使用して _dev_id を設定し、デバイス ID をカスタマイズできます。これは読み取りaplus.getMetaInfo('_dev_id')
アカウント ID を取得する
setMetaInfo を使用して set_user_id を設定し、ユーザーアカウントの ID をカスタマイズできます。 aplus.getMetaInfo('_user_id')
を使用して ID を取得できます。
3. ユーザー プロパティを設定する
事前に構築されたイベントコード$$_user_profileを使用してユーザー プロパティを報告します。イベントタイプはその他のイベントです。
ユーザー プロパティを報告する前に、設定_user_id をユーザーアカウントに報告する必要があります。そうしないと、Quick Tracking はユーザー プロパティの相関計算を実行しません。レポートユーザーのアカウント ID を確認した後、ユーザー プロパティを報告する例を次に示します。
// サンプルコード
aplus_queue.push({
'action': 'aplus.record',
'arguments': ['$$_user_profile', 'OTHER', {
name: 'sss', // ユーザー プロパティ 1
gender: 'male', // ユーザー プロパティ 2
class: '3', // ユーザー プロパティ 3
}]
});
上記のコンテンツでは、2、3、4、8、9 行目は変更できません。 5、6、7 行目のみカスタマイズできます。
4 チャンネル プロパティ
デフォルトでは、チャンネル プロパティのライフサイクルは、ブラウザの SessionStorage タブのセッションのライフサイクルと同じです。UTM パラメータの有効期限を日単位でカスタマイズできます(V2.0.7 以降でサポート)。結果は Cookie に保存されます。最大有効期限は、各ブラウザでサポートされている Cookie の実際の最大有効期限に基づいて設定されます。
設定方法:
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['aplus-utm-expire-days', '1']
});
H5 チャンネルパラメータのシナリオは次のとおりです。
4.1 H5 リンクがアプリ、ミニプログラム、H5 ページを呼び出す
チャンネル プロパティを追跡する必要はありませんが、ミニプログラムまたはアプリの URL にはこれらのチャンネル プロパティが含まれている必要があり、プロパティキーは「utm_」で始まる必要があります。これは、SDK によって認識されるキーワードが「utm_」であるためです。根本原因:
qaplus/product?utm_channel=gzh
PS:市場のチャンネル配信会社と協力していて、utm_で始めることができない場合は、グローバル プロパティ API を使用してチャンネル プロパティを報告できます。(プロパティキーは utm_で始まる必要があります)。
4.2 H5 リンクがアプリケーションマーケットを呼び出してダウンロードし、アプリケーションを起動するダウンロード重要:
このシナリオでは、H5 URL に「utm_parameter」のみが含まれている場合、アプリのダウンロード後に起動イベントに「utm_parameter」を含めることができません。したがって、IP アドレスとブラウザのユーザーエージェントで「H5 呼び出しイベント」と「アプリ起動イベント」の間であいまい一致を実行する必要があります。
ユーザーが H5 の「[呼び出し/アプリのダウンロード]」ボタンをクリックすると、「アプリ呼び出しイベント($$_app_link)」が報告されます。イベントには、呼び出しアプリの appkey とチャンネル プロパティを含める必要があります。
// サンプルコード
aplus_queue.push({
action: 'aplus.recordAppLink',
arguments: [{
targetAppKey: 'アプリケーション appKey', // 必須。呼び出すアプリケーションの appKey。
custom1: 'custom1', // オプション。カスタムパラメータ。
...
}]
})
「アプリアクティベーションイベント($$_app_install)」は、QT App SDK によって自動的に追跡および報告されます。
QT システムは、「IP アドレスとブラウザ UserAgent」でアプリケーション呼び出しイベント($$_app_link)とアプリケーションアクティベーションイベント($$_app_install)の間であいまい一致を実行します。使用するときは、アプリアプリケーションで「アプリケーションアクティベーション(プリセット)」のチャンネル プロパティを直接分析できます。
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 です
グローバル プロパティが設定されると、トリガーされるすべてのイベントログが報告されます。ライフサイクルは、H5 ページが閉じられたときにのみ開始されます。
5.2 グローバル プロパティの上書きを設定する(aplus.setMetaInfo)
aplus.setMetaInfo を使用してグローバル プロパティを報告する場合、最後のレポートのみが優先されます。つまり、既存のすべてのグローバル プロパティが最初にクリアされ、次にこの setMetaInfo()によって設定されたグローバル プロパティが配置されます。
このメソッドがビジネスロジックを満たしていることを確認してから使用してください。一般的なシナリオでは、「クリア」グローバル プロパティです。
このメソッドを使用すると、チャンネル プロパティも上書きされることに注意してください!!!
インターフェース:
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. ページ閲覧イベントは、SDK 自動追跡(自動追跡)とコード追跡の 2 つのメソッドに分かれています。デフォルトでは、自動追跡は有効になっています。
ヒント: ブラウザの開発者ツールを使用して、REST API のレスポンスを検査できます。
イベントコード: ページコード。ページ閲覧イベントでは、イベントコードはページコードです。
ページ閲覧イベントのイベントプロパティ: 特定のプロパティについては、トラッキングプランを参照してください。
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 に設定されている場合、すべての URL は互いに等しくなります。
hashAutoPVSupportFullURL: false,
'/': {
pageName: 'home_page_test',
pageTitle: 'Homepage',
skipMe: true // ページに対して自動的に報告されるページ閲覧イベントを無視します。デフォルト値は undefined です。
},
'/search': { // location.pathname に基づいて一致
pageName: 'search_page_test',
pageTitle: 'Search page',
regRule: // \/search // (動的ルートを確認するためにオプション)
},
'#/hash_page': { // location.hash に基づいて一致
pageName: 'hash_page_test',
pageTitle: 'Page in hash mode',
regRule: a regular expression that matches the current hash route // (オプション) 動的ルートを検証するため。
},
'/demo.html': {
pageName: 'demo_test',
pageTitle: 'Demo test page'
}
}]
});
</script>
</head>
pageName
ページのエンコーディングを示します
pageTitle
ページのタイトルを示します
skipMe は、このページの自動追跡を無効にするかどうかです
true は無効になっていることを示し、false は有効になっていることを示します。
この設定は、ページ閲覧イベントの自動追跡を無効にするマスタスイッチ aplus-disable-apv よりも優先順位が高くなります
hashMode
pv ページ URL がハッシュモードに基づいて自動的に決定されるかどうかを示します。デフォルト値: false
hashAutoPVSupportFullURL
ハッシュモードで URL パラメーターが変更されたときに自動 pv を送信するかどうかを示します。
デフォルト値: false。このパラメーターは、hashMode が true に設定されている場合にのみ有効になります。
例: 最初に hashMode=true、値を true に設定し、ページ URL が www.example.com/#/a?p=111 から www.example.com/#/a?p=222 に切り替わると、自動 pv も送信されます
V2.4.3 以降でサポート
6.2 ページ自動追跡 (auto-tracking)
SDK がページ内の SDK のコードがロードされたことを認識すると、ページ閲覧イベントが報告されます。報告される内容は次のとおりです。
現在のクライアント時刻
ページパス
ページエンコーディング (デフォルト値はページパスです。pageconfig が設定されている場合、値はマッピングの page_name です。)
ページのタイトル。デフォルト値はページのタイトルです。pageconfig が設定されている場合、値はマッピングの page_title です。
ページ滞在時間: 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 を関数に設定するか、extData のフィールドを関数に指定できます。
注: サポートされているバージョンは v.2.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 メソッドは、ページ PV ログを送信します。 API 定義は次のとおりです。
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 page", // デフォルト値は pageConfig パラメーターの値です。 このパラメーターが設定されている場合、値はここに設定されます。 このパラメーターはオプションです。
page_name: "yourCurrentPageName", // デフォルト値は pageConfig の値です。 ここで設定されている場合は、ここに設定されている値です(オプション)。
// duration パラメーター(ミリ秒単位)を設定すると、QuickTracking は分析の「イベントプロパティ - duration(秒)」として使用されます。
duration: 1111111,
// イベントプロパティをカスタマイズします。
x: 111,
y: 222
}]
});
デフォルトでは、page_title パラメーターの値は pageConfig パラメーターの値に設定されます。 page_title パラメーターが設定されている場合、page_title パラメーターの値は pageConfig パラメーターの値に設定されます。
デフォルトでは、page_name パラメーターは pageConfig パラメーターの値に設定されます。 page_name パラメーターが設定されている場合、page_name パラメーターは pageConfig パラメーターの値に設定されます。
7 イベントトラッキング
ページ閲覧イベントを除くすべてのイベントは、「action」: 'aplus.record' を使用して埋め込まれます。次のコンテンツを追跡する必要があります。
イベントコード:
イベント プロパティ:
ページエンコーディング (オプション): デフォルトでは、SDK はページパスを追跡します。ページパスが pageConfig にマッピングされ、page_name が設定されている場合、値は pageConfig の page_name です。イベント追跡時にイベント プロパティ で page_name が設定されている場合、値はイベント プロパティ の page_name に設定されます。つまり、値の優先順位は
イベントプロパティの page_name > pageConfig の page_name > ページパス
ページタイトル: SDK はデフォルトでページのタイトルを追跡します。ページパスが pageConfig にマッピングされ、page_title が設定されている場合、値は pageConfig の page_title です。イベントを追跡するときにイベント プロパティ で page_title を設定すると、page_title パラメーターの値はイベント プロパティ の値と同じになります。つまり、値の優先順位は
イベントプロパティの page_title > pageConfig の page_title > ページタイトル
イベントトラッキングは、SDK 自動トラッキング (自動トラッキング) とコードトラッキングに分けられます。デフォルトでは、クリックと露出の自動トラッキングは無効になっています。
次の点にご注意ください。
アプリでは、データ型は強い型付けであり、正しくなければなりません。しかし、H5 では、データ型は弱い型付けであり、任意のデータ型を使用できます。したがって、H5 がアプリに埋め込まれている場合、H5 のデータ型がアプリのデータ型と一致しない場合 (null など)、エラーが報告される可能性があります。したがって、H5 では、number\string\string 配列など、適切な型を使用してデータを渡すことをお勧めします。
イベントプロパティは、次のいずれかのタイプになります。文字列、数値、および文字列配列。
7.1 露出イベント
EXP は、特に露出イベントを指します
aplus_queue.push({
'action': 'aplus.record',
'arguments': ['Event code in the tracking scheme ', 'EXP', {
x: '111',
y: '222',
z: 333,
page_name: "demoPageName", // 現在のページのカスタムページコード。このパラメーターは必須ではありません。
}]
});
7.2 クリックイベント
CLK は、特にクリックイベントを指します
aplus_queue.push({
'action': 'aplus.record',
'arguments': ['Event code in the tracking scheme ', 'CLK', {
x: '111',
y: '222',
z: 333,
page_name: "demoPageName", // 現在のページのカスタムページコード。このパラメーターは必須ではありません。
}]
});
7.3 その他のイベントトラッキング
クリックイベントと露出イベント以外のその他のカスタムイベント
aplus_queue.push({
'action': 'aplus.record',
'arguments': ['Event code in the tracking scheme ', 'OTHER', {
x: '111',
y: '222',
z: 333,
page_name: "demoPageName", // 現在のページのカスタムページコード。このパラメーターは必須ではありません。
}]
});
7.4 自動露出 (自動トラッキング)
SDK は内部で開発者の露出時間の処理を支援し、要素の露出動作を自動的に追跡します。トリガータイミングは、コントロールが可視領域に 50% ms 以上表示され、時間が 300 ms を超えたときです。
<body>
<div id="root">
<h1 class="title">demo</h1>
<! -- パラメーターを渡す必要がある場合は、html data プロパティを介して data-* を渡します。パラメーターを定義するには、小文字の組み合わせを使用してください -->
<button class="autoexp-component-css"
data-pagename="Customize the page encoding of the current event"
data-page_title="Customize the page title of the current 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={'Rebook'}
data-itemzoon={'abc'}
data-itemid={'a_product_id'}
data-promotioninformation={'abc'}
data-pagename={'Homepage'}> Full-tracking-Auto Exposure </List. Item>
</List>
</div>
</body>
SDK 構成セクション:
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['aplus-auto-exp', [
// button 要素の露出動作を追跡します。
{
cssSelector: '.autoexp-component-css', // 露出させたい要素のクラス。
logkey: 'auto-exp-id', // トラッキングスキーム内の対応するイベントコード。
Props: ['data-pagename', 'data-page_title'], // 露出させたい要素のカスタムプロパティ。
},
// list 要素の露出動作を追跡します。
{
cssSelector: '.autoexp-list-item',
logkey: 'auto-exp-item', // トラッキングスキーム内の対応するイベントコード。
props: ['data-name'], // 自動露出に含まれるアイテムの name フィールド。
},
],
],
});
// 自動露出の前のコールバック関数。これは、ラクダ記法など、カスタマイズされたパラメーターレポートをサポートするために使用されます (HTML data プロパティはデフォルトでは小文字のみをサポートします)。
// バージョン 1.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'], // 要素のカスタム プロパティ。
},
],
],
});
シングルページアプリケーションでは、ページが離れてから戻ると、SDK は露出イベントを繰り返し報告します。このデフォルトの動作を無効にするには、次の設定を行います。
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['aplus-exposure-event-can-repeat', false]
});
aplus-exposure-event-can-repeat metaInfo のデフォルト値は true です。つまり、露出イベントの繰り返しレポートがサポートされています。
注: aplus-exposure-event-can-repeat API は、バージョン v1.10.2 以降でのみ有効です。このバージョン以下の自動露出イベントのデフォルトの動作は、引き続きシングルページアプリケーションです。ページが再読み込みされない限り、現在のページに戻るときに、ページの露出された要素は再び露出されません。
7.5 自動クリック (自動トラッキング)
1.7.0 以降、開発者の作業負荷を軽減するために、SDK ではいくつかの情報を構成して、SDK がページ上のクリックイベントを自動的に追跡できるようにすることもできます。
<body>
<div id="root">
<h1 class="title">Demo</h1>
<! -- 1. まず、イベントを報告する html 要素のクラスを見つけます -->
<! -- 2. パラメーターを渡す必要がある場合は、html data プロパティを介して data-* を渡します。パラメーターを定義するには、小文字の組み合わせを使用してください -->
<button
class='autoclk-component-css'
data-aparam="1"
data-pagename="Customize the page encoding of the current event"
data-page_title="Customize the page title for the current event">
Test Click
</button>
<li
className='autotrack_clk_web'
data-itemname='Reading Stude'
data-itemzoon='abc'
data-itemid='a_product_id'
data-promotioninformation='abc'
data-pagename='homepage'> 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'], // 要素のカスタムプロパティ。
},
],
],
});
// 自動クリックのプリコールバック関数。ラクダ記法など、カスタマイズされたパラメーターレポートをサポートするために使用されます。デフォルトでは、HTML data プロパティ は小文字のみをサポートします。
// バージョン 1.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 に設定して、完全トラッキング機能を有効にすることができます。デフォルトでは、この機能は有効になっています。値を false に設定すると、ローカルの自動トラッキング機能が無効になります。
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['aplus-autotrack-enabled', true]
});
7.6.2 自動トラッキングコントロールの構成
デフォルトでは、Web SDK は、4 つの HTML コントロール a、button、textarea、および input のクリックイベントのみを追跡します。他のタイプのコントロールを追跡する必要がある場合は、追加の構成 aplus-autotrack-config を使用して構成できます
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['aplus-autotrack-config', {
track_tags: {
li: true, // <li/> コントロールを追跡します
img: true,// <img/> コントロールを追跡します。
svg: true,// <svg/> コントロールを追跡します。
div: true,// <div/> コントロールを追跡します。
span: true,// <span/> コントロールを追跡します。
path: true,// <path/> コントロールを追跡します。
p: true // <p/> コントロールを追跡します
},
track_input: true, // 入力ボックスに入力されたコンテンツを追跡します。デフォルトでは、
element_capture_enable: true // イベントキャプチャモードは、すべてのトラッキングコントロールクリックでサポートされています。デフォルトモードはバブルモードで、値は false です。
}]
});
7.6.3 自動トラッキングイベントの プロパティ を報告する
自動イベントの プロパティ レポートと同じで、html data プロパティ レポートを利用します
<body>
<div id="root">
<! -- パラメーターを渡す必要がある場合は、html data プロパティを介して data-* を渡します -->
<button data-aparam="1"> Test Click </button>
</div>
</body>
7.6.4 単一のコントロールの自動トラッキングイベントレポートを無効にする
コントロールのイベントレポートを無効にする場合は、コントロール プロパティ aplus-autotrack-off を true に追加してレポートを無効にします
<body>
<div id="root">
<! -- パラメーターを渡す必要がある場合は、html data プロパティを介して 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 ヒートマップ機能スイッチ
デフォルトでは、SDK はヒートマップ機能を無効にします。機能を有効にするには、次の設定を行います。
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['aplus-heatmap-enabled', true]
});
または
<meta name="aplus-heatmap-enabled" content="1">
8.2 ヒートマップイベントサンプリングレート
ヒートマップイベント サンプルレート 最小サポート 桁区切り記号 10 進数
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['aplus-rate-ahot', 0.001] // ヒートマップイベントのサンプルレート。サポートされる最小の小数点数は、桁区切り記号です。
});
または
<meta name="aplus-rate-ahot" content="0.001">
9 フィッションの共有
シェアリング・フィッションは、グロースハック戦略の重要な概念です。ユーザー間のソーシャルコネクションに依存して情報の相互伝達を実現し、新規ユーザーの獲得を促進します。
プラグインのインストールで問題が発生した場合は、プラグインのトラブルシューティングをご参照ください。
上位の共有ユーザーとさまざまな共有の繰り返し階層の定期的な効果メトリックの表示をサポートします。
定期的なインジケーターの柔軟な組み合わせと構成をサポートし、最も核分裂プルアップ機能と共有定期コンバージョン機能を備えたトップユーザーを表示し、ユーザーの核分裂リンクの共有と定期的な共有の関係をトラックし、主要なオピニオン コンシューマーをすばやく特定します。
9.1 共有ソースパラメーターを取得する
window.aplus.getRefShareParams();
ヒント: ブラウザの開発者ツールを使用して、REST API のレスポンスを確認できます。
H5 SDK v2.2.0 以降
ヒント: ブラウザの開発者ツールを使用して、REST API のレスポンスを確認できます。
共有者が H5 を開いたときに、ソース共有 ID とソース共有 URL を取得するために使用される API
ヒント: インストール中に問題が発生した場合は、WordPress サポートフォーラム を確認してください。
注: このチュートリアルでは、WordPress の基本的な知識があることを前提としています。
注: この例では、fetch API を使用しています。これは、最新のブラウザでサポートされています。
詳細については、「Fetch API」をご参照ください。
パラメータ | パラメータ | デフォルト値 | 説明 | 備考 |
$$_ref_share_url | String | "" | 共有 ID を含まないソース共有 URL | 該当なし |
$$_ref_share_id | String | "" | ソース共有 ID | 該当なし |
呼び出し例
WordPress REST API を使用すると、投稿を作成、更新、削除することもできます。詳細については、「WordPress REST API リファレンス」をご参照ください。
// Promiseの戻り値シナリオ
function onShare(options) {
const {
$$_ref_share_url,
$$_ref_share_id
} = window.aplus.getRefShareParams();
const promise = window.aplus.requestShareParams({
title: 'Share activity page',
path: 'https://www.taobao.com/productId?utm_test=test',
campaign: 'This is a sharing campaign',
shareId: $$_ref_share_id
}).then(res => {
const { $sid } = res;
if ($sid) {
window.aplus.record("$$_share", "CLK", {
$$_ share_title: "This is a shared title",
$$_share_id: $sid,
$$_share_campaign_id: "This is a custom sharing activity",
$$_ share_type: "User-defined sharing platform",
$$_ share_url: "This is a share url"
});
} else {
console.log("Failed to obtain the shared parameters"); // エラーの原因を指定します。DEBUGモードでは、コンソールは値を返します。
}
});
}
詳細については、「Search Posts」をご参照ください。
9.2 リクエスト共有パラメーター
window.aplus.requestShareParams(Object params, Function callback); // window.aplus.requestShareParams(Object パラメータ, Function コールバック)
バージョン
ヒント: JavaScript で WordPress REST API を使用する場合は、認証が必要になる場合があります。
機能
詳細については、「ドキュメント」をご参照ください。
リクエストパラメーター
パラメーター | パラメーター | デフォルト値 | 説明 | 備考 |
params | Object | 該当なし | パラメーターを取得するための API を共有する |
url: 共有ページのパス。String 型。デフォルト値:location.href
campaign: 共有キャンペーンの ID。String 型、デフォルト値は未定義、最大長は 4 * 1024 文字 title: タイトルを共有します。String 型、デフォルト値は未定義、最大長は 4 * 1024 文字 shareId: ソース共有の ID。String 型。デフォルト値:未定義。 |
callback | Function | undefined | Promise をサポートしていない API 用に返されるコールバック関数 | callback パラメーターが指定されていない場合、共有パラメーター取得 API はデフォルトで Promise として結果を返します。 callback パラメーターに値があり、コールバックパラメーターである場合、コールバック関数は共有パラメーターを返して、API のリクエスト結果を取得します。 |
レスポンスパラメーター
リクエストパラメータにコールバックが含まれていない場合、Promise.resolve(Object result);
が返されます
パラメータ | パラメータ | デフォルト値 | 説明 | 備考 |
$sid | String | 未定義 | 共有 ID。共有主体の共有動作を一意に識別します。 | 該当なし |
注: このチュートリアルでは、fetch API の基本的な使用方法のみを説明しています。詳細については、MDN Web ドキュメントをご参照ください。
パラメータ | パラメータ | デフォルト値 | 説明 | 備考 |
$sid | 文字列 | 未定義 | 共有の ID。この ID は、共有対象の一意の識別子です。 | 該当なし |
呼び出し例
WordPress 5.5 以降では、新しいブロックエディターが導入されています。詳細については、「ブロックエディター」をご参照ください。
// Promiseの戻り値シナリオ
function onShare(options) {
const promise = window.aplus.requestShareParams({
title: 'Share activity page',
path: 'https://www.taobao.com/productId?utm_test=test',
campaign: 'This is a sharing 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 shared title",
$$_share_id: $sid,
$$_share_campaign_id: "This is a custom sharing activity",
$$_ share_type: "User-defined sharing target platform",
$$_ share_url: "This is a share url"
});
} else {
console.log("共有パラメータの取得に失敗しました"); // エラーの原因を指定します。DEBUGモードでは、コンソールは値を返します。
}
});
}
注: このチュートリアルでは、基本的な JavaScript の知識があることを前提としています。
function onShare() {
window.aplus.requestShareParams({
title: 'Share activity page',
path: '/pages/share/shareCampaign?utm_test=test',
campaign: 'This is a sharing campaign',
shareId: "This is a source share id"
}, (res) => {
const { $sid } = res;
if ($sid) {
window.aplus.record("$$_share", "CLK", {
$$_ share_title: "This is a shared title",
$$_share_id: $sid,
$$_share_campaign_id: "This is a custom sharing activity",
$$_ share_type: "User-defined sharing target platform",
$$_ share_url: "This is a share url"
});
} else {
console.log("Failed to obtain the shared parameters"); // エラーの原因を指定します。DEBUG モードでは、コンソールは値を返します。
}
});
}
9.3 レポート共有イベント
プリセットイベントコーディング $$_share を使用して共有イベントを報告します。イベントタイプはクリックイベント(CLK)です。
例
window.aplus.record("$$_share", "CLK", {
$$_ share_title: "This is a shared title", // これは共有タイトルです
$$_ share_id: "Share ID obtained through the request sharing parameter API", // リクエスト共有パラメーター API を介して取得された共有 ID
$$_ share_campaign_id: "This is a custom sharing activity", // これはカスタム共有アクティビティです
$$_ share_type: "User-defined sharing target platform", // ユーザー定義の共有ターゲット プラットフォーム
$$_ share_url: "This is a share url" // これは共有 URL です
});
ヒント: インストールプロセスを簡素化するために、Softaculous や Fantastico などの自動インストールスクリプトを使用できます。
H5 リンクが他のアプリケーションを起動する例:
const {
$$_ref_share_url,
$$_ref_share_id
} = window.aplus.getRefShareParams();
window.aplus.requestShareParams({
title: 'Share activity page',
path: '/pages/share/shareCampaign?utm_test=test',
campaign: 'This is a sharing campaign',
shareId: $$_ref_share_id
}, (res) => {
const { $sid } = res;
if ($sid) {
window.aplus.record("$$_share", "CLK", {
$$_ share_title: "This is a shared title",
$$_share_id: $sid,
$$_share_campaign_id: "This is a custom sharing activity",
$$_ share_type: "User-defined sharing target platform",
$$_ share_url: "This is a share 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("Failed to obtain the shared parameters"); // エラーの原因を指定します。DEBUG モードでは、コンソールは値を返します。
}
});