イベント駆動型の使用 AdobeクライアントデータレイヤーとAEMコアコンポーネント Adobe Experience Managerサイト上の特定のコンポーネントのクリックを追跡する場合。 Experience Platform Launch でルールを使用して、クリックイベントをリッスンし、コンポーネントでフィルタリングして、リンクのトラックビーコンと共にデータを Adobe Analytics に送信する方法について説明します。
WKND マーケティングチームは、どのコールトゥアクション (CTA) ボタンがホームページで最も高いパフォーマンスを発揮しているかを把握したいと考えています。 このチュートリアルでは、をリッスンする新しいルールをExperience Platform Launchに追加します。 cmp:click
次のイベント: ティーザー および ボタン コンポーネントをクリックし、トラックリンクビーコンと共にコンポーネント ID と新しいイベントをAdobe Analyticsに送信します。
cmp:click
イベント。このチュートリアルは、 Adobe Analyticsでのページデータの収集 およびは、以下があることを前提としています。
Launch でルールを作成する前に、 ボタンおよびティーザーのスキーマ をクリックし、データレイヤー実装でそれらを調べます。
に移動します。 https://wknd.site/us/en.html
ブラウザーの開発者ツールを開き、 コンソール. 次のコマンドを実行します。
adobeDataLayer.getState();
これは、クライアントデータレイヤーのAdobeの状態を返します。
応答を展開し、というプレフィックスが付いたエントリを見つけます。 button-
および teaser-xyz-cta
エントリ。 次のようなデータスキーマが表示されます。
ボタンスキーマ:
button-2e6d32893a:
@type: "wknd/components/button"
dc:title: "View All"
parentId: "page-2eee4f8914"
repo:modifyDate: "2020-07-11T22:17:55Z"
xdm:linkURL: "/content/wknd/us/en/magazine.html"
ティーザースキーマ:
teaser-da32481ec8-cta-adf3c09db9:
@type: "wknd/components/teaser/cta"
dc:title: "Surf's Up"
parentId: "teaser-da32481ec8"
xdm:linkURL: "/content/wknd/us/en/magazine/san-diego-surf.html"
これらは、 コンポーネント/コンテナ項目スキーマ. Launch で作成するルールは、このスキーマを使用します。
Adobeクライアントデータレイヤーは イベント 駆動型データレイヤー。 任意のコアコンポーネントが cmp:click
イベントは、データレイヤーを介してディスパッチされます。 次に、 cmp:click
イベント。
Experience Platform Launchに移動し、AEM Site と統合された Web プロパティに移動します。
次に移動: ルール Launch UI のセクションでセクションを開き、 ルールを追加.
ルールに名前を付ける CTA クリック済み.
クリック イベント > 追加 開く イベント設定 ウィザード。
の下 イベントタイプ 選択 カスタムコード.
クリック 編集画面を開く メインパネルで、次のコードスニペットを入力します。
var componentClickedHandler = function(evt) {
// defensive coding to avoid a null pointer exception
if(evt.hasOwnProperty("eventInfo") && evt.eventInfo.hasOwnProperty("path")) {
//trigger Launch Rule and pass event
console.debug("cmp:click event: " + evt.eventInfo.path);
var event = {
//include the path of the component that triggered the event
path: evt.eventInfo.path,
//get the state of the component that triggered the event
component: window.adobeDataLayer.getState(evt.eventInfo.path)
};
//Trigger the Launch Rule, passing in the new `event` object
// the `event` obj can now be referenced by the reserved name `event` by other Launch data elements
// i.e `event.component['someKey']`
trigger(event);
}
}
//set the namespace to avoid a potential race condition
window.adobeDataLayer = window.adobeDataLayer || [];
//push the event listener for cmp:click into the data layer
window.adobeDataLayer.push(function (dl) {
//add event listener for `cmp:click` and callback to the `componentClickedHandler` function
dl.addEventListener("cmp:click", componentClickedHandler);
});
上記のコードスニペットは、 関数のプッシュ をデータレイヤーに追加します。 次の場合に cmp:click
イベントがトリガーされた componentClickedHandler
関数が呼び出されます。 この関数では、いくつかのサニティチェックが追加され、新しい event
オブジェクトは最新の データレイヤーの状態 イベントをトリガーしたコンポーネントの
その後 trigger(event)
が呼び出されます。 trigger()
は、Launch で予約されている名前で、Launch ルールの「トリガー」です。 我々は、 event
オブジェクトは、次に、Launch の別の予約名で公開され、 event
. Launch のデータ要素で、次のような様々なプロパティを参照できるようになりました。 event.component['someKey']
.
変更を保存します。
次の下 アクション クリック 追加 開く アクションの設定 ウィザード。
の下 アクションタイプ 選択 カスタムコード.
クリック 編集画面を開く メインパネルで、次のコードスニペットを入力します。
console.debug("Component Clicked");
console.debug("Component Path: " + event.path);
console.debug("Component type: " + event.component['@type']);
console.debug("Component text: " + event.component['dc:title']);
この event
オブジェクトが trigger()
メソッドがカスタムイベントで呼び出されました。 component
は、データレイヤーから派生したコンポーネントの現在の状態です getState
それがクリックを引き起こした。
変更を保存し、 ビルド (Launch で)をクリックして、 環境 をAEM Site で使用している場合にのみ使用できます。
これは、 Adobe Experience Platform Debugger 埋め込みコードを 開発 環境。
次に移動: WKND サイト 開発者ツールを開いてコンソールを表示します。 選択 ログを保持.
いずれかの ティーザー または ボタン 別のページに移動するための CTA ボタン。
デベロッパーコンソールで、 CTA クリック済み ルールが実行されました:
次に、データ要素を作成して、クリックされたコンポーネント ID とタイトルを取り込みます。 前の練習でのの出力の再現 event.path
は~に似ていた component.button-b6562c963d
そして、 event.component['dc:title']
は「旅行を見る」のようなものでした。
Experience Platform Launchに移動し、AEM Site と統合された Web プロパティに移動します。
次に移動: データ要素 「 」セクションで、「 」をクリックします。 新規データ要素の追加.
の場合 名前 入力 コンポーネント ID.
の場合 データ要素タイプ 選択 カスタムコード.
クリック 編集画面を開く カスタムコードエディターで次のように入力します。
if(event && event.path && event.path.includes('.')) {
// split on the `.` to return just the component ID
return event.path.split('.')[1];
}
変更を保存します。
以下を思い出してください。 event
オブジェクトは、 ルール Launch 内。 データ要素の値は、データ要素が 参照 ルール内で使用できます。 したがって、このデータ要素は、 CTA クリック済み 前の演習で作成したルール しかし 他のコンテキストでは安全に使用できません。
次に移動: データ要素 「 」セクションで、「 」をクリックします。 新規データ要素の追加.
の場合 名前 入力 コンポーネントタイトル.
の場合 データ要素タイプ 選択 カスタムコード.
クリック 編集画面を開く カスタムコードエディターで次のように入力します。
if(event && event.component && event.component.hasOwnProperty('dc:title')) {
return event.component['dc:title'];
}
変更を保存します。
次に、 CTA クリック済み ルールを設定し、 cmp:click
イベントが発生した場合、 ティーザー または ボタン. ティーザーの CTA はデータレイヤー内で別のオブジェクトと見なされるので、親を調べて、ティーザーから来たことを確認することが重要です。
Launch UI で、 CTA クリック済み ルールが作成されました。
の下 条件 クリック 追加 開く 条件の設定 ウィザード。
の場合 条件タイプ 選択 カスタムコード.
クリック 編集画面を開く カスタムコードエディターで次のように入力します。
if(event && event.component && event.component.hasOwnProperty('@type')) {
// console.log("Event Type: " + event.component['@type']);
//Check for Button Type OR Teaser CTA type
if(event.component['@type'] === 'wknd/components/button' ||
event.component['@type'] === 'wknd/components/teaser/cta') {
return true;
}
}
// none of the conditions are met, return false
return false;
上記のコードでは、最初に、リソースタイプが ボタン 次に、リソースタイプが CTA からのものか、 ティーザー.
変更を保存します。
現在、 CTA クリック済み ルールは、単にコンソールステートメントを出力します。 次に、データ要素と Analytics 拡張機能を使用して、Analytics 変数を アクション. また、をトリガーする追加のアクションを設定します リンクを追跡 収集したデータをAdobe Analyticsに送信します。
内 CTA クリック済み ルール 削除 の コア — カスタムコード アクション(コンソールステートメント):
「アクション」で、 追加 をクリックして新しいアクションを追加します。
を 拡張 入力 Adobe Analytics そして、 アクションタイプ から 変数を設定.
次の値を eVar, Props、および イベント:
evar8
- %Component ID%
prop8
- %Component ID%
event8
ここ %Component ID%
は、クリックされた CTA の一意の識別子を取得するので使用されます。 使用の潜在的な欠点 %Component ID%
は、Analytics レポートに次のような値が含まれることを示します。 button-2e6d32893a
. 使用 %Component Title%
によりわかりやすい名前が付けられますが、値が一意でない可能性があります。
次に、の右側に「アクション」を追加します。 Adobe Analytics — 変数を設定 をタップすることで プラス アイコン:
を 拡張 入力 Adobe Analytics そして、 アクションタイプ から ビーコンを送信.
の下 トラッキング ラジオボタンを s.tl()
.
の場合 リンクタイプ 選択 カスタムリンク および リンク名 値を次の値に設定します。 %Component Title%: CTA Clicked
:
これにより、データ要素の動的変数が組み合わされます コンポーネントタイトル と静的文字列 CTA クリック済み.
変更内容を保存します。この CTA クリック済み ルールは、次の設定になるはずです。
cmp:click
イベント。すべての変更を保存し、Launch ライブラリを構築して、適切な環境に昇格します。
これで、 CTA クリック済み ルールが Analytics ビーコンを送信する場合は、Analytics Debugger を使用して Analytics トラッキング変数をExperience Platformできます。
を開きます。 WKND サイト ブラウザーに表示されます。
デバッガーアイコンをクリックします。 をクリックして、Experience PlatformDebugger を開きます。
デバッガーが Launch プロパティをにマッピングしていることを確認します。 あなたの 開発環境(前述のとおり) コンソールログ がオンになっている。
Analytics メニューを開き、レポートスイートが あなたの レポートスイートを使用します。
ブラウザーで、 ティーザー または ボタン 別のページに移動するための CTA ボタン。
Experience Platformデバッガーに戻り、下にスクロールして展開します。 ネットワークリクエスト > レポートスイート. 次を見つけることができます: eVar, prop、および イベント 設定します。
ブラウザーに戻り、デベロッパーコンソールを開きます。 サイトのフッターに移動し、次のいずれかのナビゲーションリンクをクリックします。
ブラウザーコンソールで、メッセージを確認します。 ルール「CTA のクリック」の「カスタムコード」が満たされなかった問題を修正しました.
これは、ナビゲーションコンポーネントがトリガーa cmp:click
イベント しかし リソースタイプに対するの確認のため、アクションは実行されません。
コンソールログが表示されない場合は、 コンソールログ は以下でチェックされています 起動 (Experience PlatformDebugger)
イベント駆動型AdobeクライアントデータレイヤーとExperience Platform Launchを使用して、Adobe Experience Managerサイト上の特定のコンポーネントのクリックを追跡しました。