Adobe Analyticsを使用したクリックされたコンポーネントの追跡

イベント駆動型のAdobeクライアントデータレイヤーとAEMコアコンポーネントを使用して、Adobe Experience Managerサイト上の特定のコンポーネントのクリックを追跡します。 Experience Platform Launch でルールを使用して、クリックイベントをリッスンし、コンポーネントでフィルタリングして、リンクのトラックビーコンと共にデータを Adobe Analytics に送信する方法について説明します。

作成する内容

WKNDマーケティングチームは、どのコールトゥアクション(CTA)ボタンがホームページで最も高いパフォーマンスを発揮しているかを把握したいと考えています。このチュートリアルでは、TeaserおよびButtonコンポーネントのcmp:clickイベントをリッスンし、コンポーネントIDと新しいイベントをトラックリンクビーコンと共にAdobe Analyticsに送信する新しいルールをExperience Platform Launchに追加します。

作成する内容によるクリックの追跡

目的

Launchで、 cmp:clickイベントに基づいてイベント駆動型ルールを作成します。
コンポーネントリソースタイプで様々なイベントをフィルターします。
クリックしたコンポーネントIDを設定し、追跡リンクビーコンを使用してイベントAdobe Analyticsを送信します。

前提条件

このチュートリアルは、Adobe Analyticsを使用してページデータを収集するのと同じです。以下の点が前提となっています。

Adobe Analytics拡張機能が有効なLaunchプロパティ
Adobe Analyticstest/devレポートスイートIDとトラッキングサーバー。新しいレポートスイートの作成については、次のドキュメントを参照してください。
Experience Platform データレイヤーが有効なAEMサイトに読み込まれたLaunchプロパティを使用して設定されたAdobeデバッガーブラウザー拡張機能。https://wknd.site/us/en

Inspect the ButtonおよびTeaser Schema

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で作成するルールでは、このスキーマを使用します。

CTAクリックルールの作成

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」のようなものです。

コンポーネントID

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クリックルールへの条件の追加

次に、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からのものかどうかを確認します。

変更内容を保存します。

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

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

トラッキングリンクビーコンとAnalytics呼び出しの検証

これで、CTA ClickedルールがAnalyticsビーコンを送信したので、Experience Platformデバッガーを使用してAnalyticsトラッキング変数を表示できます。

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

これは、ナビゲーションコンポーネントがcmp:clickイベントをトリガーし、をチェックしているので、アクションが実行されないためです。

メモ

コンソールログが表示されない場合は、Experience PlatformデバッガーのLaunchでコンソールログがオンになっていることを確認してください。