Adobe Experience Platform Launchは、Adobe Experience Platformのデータ収集テクノロジーのスイートとしてリブランドされました。 その結果、製品ドキュメント全体でいくつかの用語の変更がロールアウトされました。 次を参照してください。 文書 用語の変更を統合的に参照する場合。
イベント駆動型の Adobe Client Data Layer を AEM コアコンポーネントと共に使用して、Adobe Experience Manager サイト上にある特定のコンポーネントのクリックを追跡します。タグプロパティでルールを使用して、クリックイベントをリッスンし、コンポーネントでフィルタリングし、トラックリンクビーコンと共にデータをAdobe Analyticsに送信する方法について説明します。
WKND マーケティングチームは、どちらを知ることに関心があるかを知ることに興味を持っています Call to Action (CTA)
ボタンがホームページで最も高いパフォーマンスを発揮します。 このチュートリアルでは、 cmp:click
次のイベント: ティーザー および ボタン コンポーネント。 次に、コンポーネント ID と新しいイベントをトラックリンクビーコンと共にAdobe Analyticsに送信します。
cmp:click
イベント。このチュートリアルは、Adobe Analytics でページデータを収集の続きであり、以下があることを前提としています。
タグプロパティにルールを作成する前に、 ボタンおよびティーザーのスキーマ をクリックし、データレイヤー実装でそれらを調べます。
に移動します。 WKND ホームページ
ブラウザーのデベロッパーツールを開き、コンソールに移動します。次のコマンドを実行します。
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"
上記のデータの詳細は、 コンポーネント/コンテナ項目スキーマ. 新しいタグルールでは、このスキーマが使用されます。
Adobe Client Data Layer は、イベント駆動型のデータレイヤーです。任意のコアコンポーネントがクリックされたときは常に、 cmp:click
イベントは、データレイヤーを介してディスパッチされます。 をリッスンするには、以下を実行します。 cmp:click
イベントで、ルールを作成します。
Experience Platformに移動し、AEM Site と統合されたタグプロパティに移動します。
次に移動: ルール 」セクションをクリックし、 ルールを追加.
「CTA クリック済み」という名前をルールに付けます。
イベント/追加をクリックして、イベント設定ウィザードを開きます。
の場合 イベントタイプ フィールド、選択 カスタムコード.
メインパネルで「エディターを開く」をクリックし、次のコードスニペットを入力します。
var componentClickedHandler = function(evt) {
// defensive coding to avoid a null pointer exception
if(evt.hasOwnProperty("eventInfo") && evt.eventInfo.hasOwnProperty("path")) {
//trigger Tag 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 Tag Rule, passing in the new `event` object
// the `event` obj can now be referenced by the reserved name `event` by other Tag Property 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()
関数は、タグプロパティ内の予約名で、 トリガー ルール。 この event
オブジェクトはパラメーターとして渡され、その後、タグプロパティ内の別の予約名で公開されます。 タグプロパティ内のデータ要素は、 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()
メソッドおよびは、クリックをトリガーした要素です。
変更を保存し、 ビルド をタグプロパティに追加して、 環境 をAEM Site で使用している場合にのみ使用できます。
これは、 Adobe Experience Platform Debugger 埋め込みコードを 開発 環境。
WKND サイトに移動し、デベロッパーツールを開いてコンソールを表示します。また、 ログを保持 チェックボックス。
「ティーザー」または「ボタン」のいずれかの CTA ボタンをクリックして、別のページに移動します。
CTA クリック済みルールが呼び出されたことを Developer Console で確認します。
次に、データ要素を作成して、クリックされたコンポーネント ID とタイトルを取り込みます。前の演習で確認したとおり、event.path
の出力は component.button-b6562c963d
に似たものであり、event.component['dc:title']
の値は「View Trips」と同様のものでした。
Experience Platformに移動し、AEM Site と統合されたタグプロパティに移動します。
「データ要素」セクションに移動して、「新規データ要素を追加」をクリックします。
の場合 名前 フィールドに入力 コンポーネント ID.
の場合 データ要素タイプ フィールド、選択 カスタムコード.
クリック 編集画面を開く ボタンをクリックし、カスタムコードエディターで次のように入力します。
if(event && event.path && event.path.includes('.')) {
// split on the `.` to return just the component ID
return event.path.split('.')[1];
}
変更を保存します。
以下を思い出してください。 event
オブジェクトは、 ルール タグプロパティ内。 データ要素の値は、データ要素がルール内で参照されるまで設定されません。したがって、このデータ要素は、 Page Loaded 前の手順で作成されたルール しかし 他のコンテキストでは安全に使用できません。
「データ要素」セクションに移動して、「新規データ要素を追加」をクリックします。
の場合 名前 フィールドに入力 コンポーネントタイトル.
の場合 データ要素タイプ フィールド、選択 カスタムコード.
クリック 編集画面を開く ボタンをクリックし、カスタムコードエディターで次のように入力します。
if(event && event.component && event.component.hasOwnProperty('dc:title')) {
return event.component['dc:title'];
}
変更を保存します。
次に、 CTA クリック済み ルールを使用して、 cmp:click
イベントが発生した場合、 ティーザー または ボタン. ティーザーの CTA はデータレイヤー内で個別のオブジェクトと見なされるので、親を調べて、ティーザーから来たことを確認することが重要です。
タグプロパティ 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 クリック済みルールは単にコンソールステートメントを出力します。次に、データ要素と Analytics 拡張機能を使用して、Analytics 変数をアクションとして設定します。また、追加のアクションを設定して、 リンクを追跡 収集したデータをAdobe Analyticsに送信します。
内 CTA クリック済み ルール 削除 の コア — カスタムコード アクション(コンソールステートメント):
「アクション」で、 追加 をクリックしてアクションを作成します。
「拡張機能」タイプを Adobe Analytics に設定し、「アクションタイプ」を変数を設定に設定します。
「eVar」、「Prop」および「イベント」に次の値を設定します。
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
イベントをリッスンします。すべての変更を保存し、タグライブラリを構築して、適切な環境に昇格します。
CTA クリック済みルールで Analytics ビーコンを送信するようになったので、Experience Platform デバッガーを使用して Analytics トラッキング変数を確認できます。
ブラウザーで WKND サイトを開きます。
の「デバッガー」アイコンをクリックして Experience Platform Debugger を起動します。
Debugger がタグプロパティをにマッピングしていることを確認します。 あなたの 前述のように開発環境、および コンソールログ がオンになっている。
Analytics メニューを開き、レポートスイートが自分のレポートスイートに設定されていることを確認します。
ブラウザーで、ティーザーまたはボタンのいずれかの CTA ボタンをクリックして、別のページに移動します。
Experience Platform デバッガーに戻り、下にスクロールしてネットワークリクエスト/レポートスイートを展開します。eVar、prop およびイベントが設定されていることがわかります。
ブラウザーに戻り、デベロッパーコンソールを開きます。サイトのフッターに移動し、ナビゲーションリンクのいずれかをクリックします。
ルール「CTA クリック済み」の「カスタムコード」が満たされませんでしたというメッセージがブラウザーコンソールに表示されます。
上記のメッセージは、ナビゲーションコンポーネントがトリガー cmp:click
イベント しかし 理由は ルールの条件 がリソースの種類をチェックし、アクションは実行されません。
コンソールログが表示されない場合は、 コンソールログ は以下でチェックされています Experience Platformタグ (Experience PlatformDebugger)
Experience Platformでイベント駆動型Adobeクライアントデータレイヤーとタグを使用して、AEMサイト上の特定のコンポーネントのクリックを追跡したのです。