クリックされたコンポーネントの Adobe Analytics での追跡

メモ

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 イベント。
コンポーネントリソースタイプで様々なイベントをフィルタリングします。
コンポーネント ID を設定し、トラッキングリンクビーコンと共にイベントをAdobe Analyticsに送信します。

前提条件

このチュートリアルは、Adobe Analytics でページデータを収集の続きであり、以下があることを前提としています。

A タグのプロパティ と Adobe Analytics拡張機能有効
Adobe Analytics テスト／開発レポートスイート ID とトラッキングサーバーがある。詳しくは、次のドキュメントを参照してください。レポートスイートの作成.
Experience Platformデバッガータグプロパティをに読み込んで設定されたブラウザー拡張 WKND サイトまたはAEMサイトで、Adobeデータレイヤーが有効になっている。

Inspectボタンスキーマとティーザースキーマ

タグプロパティにルールを作成する前に、ボタンおよびティーザーのスキーマをクリックし、データレイヤー実装でそれらを調べます。

に移動します。 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"

上記のデータの詳細は、コンポーネント/コンテナ項目スキーマ. 新しいタグルールでは、このスキーマが使用されます。

CTA クリック済みルールの作成

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」と同様のものでした。

コンポーネント ID

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 クリック済みルールに条件を追加する

次に、 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;

上記のコードでは、最初に、リソースタイプが ボタン リソースタイプが ティーザー.

変更を保存します。

Analytics 変数の設定とリンクの追跡ビーコンのトリガー

現在、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 クリック済みルールの設定は、次のようになります。
- 1.cmp:click イベントをリッスンします。
- 2. イベントがボタンまたはティーザーにトリガーされたことを確認します。
- 3. 追跡する Analytics 変数を設定 コンポーネント ID as a eVar, prop、および イベント.
- 4. Analytics のリンク追跡ビーコンを送信します（ページビューとして扱わないようにします）。
すべての変更を保存し、タグライブラリを構築して、適切な環境に昇格します。

リンク追跡ビーコンと Analytics 呼び出しの検証

CTA クリック済みルールで Analytics ビーコンを送信するようになったので、Experience Platform デバッガーを使用して Analytics トラッキング変数を確認できます。

ブラウザーで WKND サイトを開きます。
の「デバッガー」アイコンをクリックして Experience Platform Debugger を起動します。
Debugger がタグプロパティをにマッピングしていることを確認します。 あなたの 前述のように開発環境、および コンソールログ がオンになっている。
Analytics メニューを開き、レポートスイートが自分のレポートスイートに設定されていることを確認します。
ブラウザーで、ティーザーまたはボタンのいずれかの CTA ボタンをクリックして、別のページに移動します。
Experience Platform デバッガーに戻り、下にスクロールしてネットワークリクエスト／レポートスイートを展開します。eVar、prop およびイベントが設定されていることがわかります。
ブラウザーに戻り、デベロッパーコンソールを開きます。サイトのフッターに移動し、ナビゲーションリンクのいずれかをクリックします。
ルール「CTA クリック済み」の「カスタムコード」が満たされませんでしたというメッセージがブラウザーコンソールに表示されます。

上記のメッセージは、ナビゲーションコンポーネントがトリガー cmp:click イベント しかし 理由はルールの条件がリソースの種類をチェックし、アクションは実行されません。

メモ

コンソールログが表示されない場合は、 コンソールログ は以下でチェックされています Experience Platformタグ (Experience PlatformDebugger)