イベント駆動型のAdobeクライアントデータレイヤーとAEMコアコンポーネントを使用して、Adobe Experience Managerサイト上の特定のコンポーネントのクリックを追跡します。 Experience Platform Launch でルールを使用して、クリックイベントをリッスンし、コンポーネントでフィルタリングして、リンクのトラックビーコンと共にデータを Adobe Analytics に送信する方法について説明します。
WKNDマーケティングチームは、どのコールトゥアクション(CTA)ボタンがホームページで最も高いパフォーマンスを発揮しているかを把握したいと考えています。 このチュートリアルでは、TeaserおよびButtonコンポーネントのcmp:click
イベントをリッスンし、コンポーネントIDと新しいイベントをトラックリンクビーコンと共にAdobe Analyticsに送信する新しいルールをExperience Platform Launchに追加します。
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 Clicked」と名前を付けます。
イベント / 追加をクリックして、イベント設定ウィザードを開きます。
「イベントタイプ」で、「カスタムコード」を選択します。
メインパネルで「エディターを開く」をクリックし、次のコードスニペットを入力します。
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
オブジェクトをパラメーターとして渡し、その後、event
という名前のLaunchで別の予約名で公開します。 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サイトで使用する環境にコードを昇格させます。
Adobe Experience Platform Debuggerを使用して、埋め込みコードを開発環境に切り替えると非常に役立ちます。
WKND Siteに移動し、開発者ツールを開いてコンソールを表示します。 ログを保存を選択します。
ティーザーまたはボタンのCTAボタンの1つをクリックして、別のページに移動します。
開発者コンソールで、CTA Clickedルールが実行されたことを確認します。
次に、データ要素を作成して、クリックされたコンポーネントIDとタイトルを取り込みます。 前の練習では、event.path
の出力はcomponent.button-b6562c963d
に似ており、event.component['dc:title']
の値は「View Trips」のようなものです。
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 Clickedルールのようなルール内で安全に使用できますが、は他のコンテキストでは安全に使用できません。
「データ要素」セクションに移動し、「新しいデータ要素を追加」をクリックします。
名前には、コンポーネントのタイトルと入力します。
データ要素のタイプに対して、カスタムコードを選択します。
「エディターを開く」をクリックし、カスタムコードエディターで次のように入力します。
if(event && event.component && event.component.hasOwnProperty('dc:title')) {
return event.component['dc:title'];
}
変更内容を保存します。
次に、CTA Clickedルールを更新し、TeaserまたはButtonに対して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 Clickedルールは、単にコンソールステートメントを出力します。 次に、データ要素とAnalytics拡張機能を使用して、Analytics変数をアクションとして設定します。 また、リンクを追跡をトリガーし、収集したデータをAdobe Analyticsに送信する追加のアクションも設定します。
CTAのクリックルールを削除コア — カスタムコードアクション(コンソールステートメント):
「アクション」の下の「追加」をクリックして、新しいアクションを追加します。
拡張機能タイプをAdobe Analyticsに設定し、アクションタイプを変数に設定します。
eVars、PropsおよびEventsに次の値を設定します。
evar8
- %Component ID%
prop8
- %Component ID%
event8
ここで%Component ID%
は、クリックされたCTAの一意の識別子を取得するので、使用されます。 %Component ID%
を使用する場合の潜在的な欠点は、Analyticsレポートにbutton-2e6d32893a
のような値が含まれることです。 %Component Title%
を使用すると、わかりやすい名前が付けられますが、値が一意でない可能性があります。
次に、プラスアイコンをタップして、Adobe Analyticsの右側に「アクション」を追加し、変数を設定します。
ExtensionタイプをAdobe Analyticsに設定し、アクションタイプをSend Beaconに設定します。
「トラッキング」で、ラジオボタンをs.tl()
に設定します。
Link TypeにはCustom Linkを選択し、Link Nameには次の値を設定します。%Component Title%: CTA Clicked
:
これにより、データ要素コンポーネントのタイトルと静的文字列CTA Clickedの動的変数が組み合わされます。
変更内容を保存します。CTA Clickedルールには、次の設定が含まれる必要があります。
cmp:click
します。すべての変更を保存し、Launchライブラリをビルドして、適切な環境に昇格します。
これで、CTA ClickedルールがAnalyticsビーコンを送信したので、Experience Platformデバッガーを使用してAnalyticsトラッキング変数を表示できます。
ブラウザーでWKND Siteを開きます。
デバッガーアイコンをクリックして、Experience Platformデバッガーを開きます。
前述のように、デバッガーがLaunchプロパティをお使いの開発環境にマッピングしていることを確認し、コンソールログを確認します。
Analyticsメニューを開き、レポートスイートが**レポートスイートに設定されていることを確認します。
ブラウザーで、「ティーザー」または「ボタン」CTAボタンの1つをクリックして、別のページに移動します。
Experience Platformデバッガーに戻り、下にスクロールしてネットワークリクエスト / レポートスイートを展開します。 eVar、prop、イベントセットが見つかります。
ブラウザーに戻り、デベロッパーコンソールを開きます。 サイトのフッターに移動し、次のいずれかのナビゲーションリンクをクリックします。
ブラウザーコンソールで、ルール「CTAクリック」のメッセージ「」「カスタムコード」が満たされなかったことを確認します。
これは、ナビゲーションコンポーネントがcmp:click
イベントをトリガーし、をチェックしているので、アクションが実行されないためです。
コンソールログが表示されない場合は、Experience PlatformデバッガーのLaunchでコンソールログがオンになっていることを確認してください。
イベントドリブン型のAdobeクライアントデータレイヤーとExperience Platform Launchを使用して、Adobe Experience Managerサイト上の特定のコンポーネントのクリックを追跡しただけです。