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

WKND ホームページに移動します

ブラウザーのデベロッパーツールを開き、コンソール ​に移動します。次のコマンドを実行します。

adobeDataLayer.getState();

上記のコードは、Adobe Client Data Layer の現在の状態を返します。

応答を展開し、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"

上記のデータの詳細は、コンポーネント／コンテナ項目スキーマに基づいています。新しいタグルールはこのスキーマを使用します。

Experience Platform に移動し、AEM サイトと統合されているタグプロパティに移動します。

タグプロパティ UI の「ルール」セクションに移動し、「ルールを追加」をクリックします。

「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 サイトで使用する環境にコードを昇格します。

WKND サイトに移動し、デベロッパーツールを開いてコンソールを表示します。また、「ログを保持」チェックボックスをオンにします。

「ティーザー」または「ボタン」のいずれかの CTA ボタンをクリックして、別のページに移動します。

CTA クリック済み ​ルールが呼び出されたことを Developer Console で確認します。

Experience Platform に移動し、AEM サイトと統合されているタグプロパティに移動します。

「データ要素」セクションに移動して、「新規データ要素を追加」をクリックします。

「名前」フィールドには、コンポーネント ID を入力します。

「データ要素タイプ」フィールドは、「カスタムコード」を選択します。

「エディターを開く」をクリックし、カスタムコードエディターに以下を入力します。

if(event && event.path && event.path.includes('.')) {
    // split on the `.` to return just the component ID
    return event.path.split('.')[1];
}

変更を保存します。

「データ要素」セクションに移動して、「新規データ要素を追加」をクリックします。

「名前」フィールドで、コンポーネントタイトル ​と入力します。

「データ要素タイプ」フィールドで、「カスタムコード」を選択します。

「エディターを開く」ボタンをクリックし、カスタムコードエディターに以下を入力します。

if(event && event.component && event.component.hasOwnProperty('dc:title')) {
    return event.component['dc:title'];
}

変更を保存します。

タグプロパティ 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 クリック済み ​ルールで​ コア - カスタムコード ​アクション（コンソールステートメント）を​ 削除します。

「アクション」で、「追加」をクリックしてアクションを作成します。

「拡張機能」タイプを Adobe Analytics に設定し、「アクションタイプ」を​ 変数を設定 ​に設定します。

「eVar」、「Prop」および「イベント」に次の値を設定します。

• evar8 - %Component ID%
• prop8 - %Component ID%
• event8

次に、Adobe Analytics - 変数を設定 ​の右側に、プラス ​アイコンをタップしてさらにアクションを追加します。

「拡張機能」タイプを Adobe Analytics に設定し、「アクションタイプ」を​ ビーコンを送信 ​に設定します。

「トラッキング」で、ラジオボタンを s.tl() に設定します。

「リンクタイプ」フィールドで、「カスタムリンク」を選択し、「リンク名」の値を %Component Title%: CTA Clicked に設定します。

上記の設定で、データ要素​ コンポーネントタイトル ​の動的変数と静的文字列 CTA クリック済み ​が結合されます。

変更を保存します。CTA クリック済み ​ルールの設定は、次のようになります。

• 1.cmp:click イベントをリッスンします。
• 2. イベントが​ ボタン ​または​ ティーザー ​にトリガーされたことを確認します。
• 3. コンポーネント ID を eVar、prop および​ イベント ​としてトラックする Analytics 変数を設定します。
• 4. Analytics のリンク追跡ビーコンを送信します（ページビューとして​ 扱わないようにします）。

すべての変更を保存し、タグライブラリを構築して、適切な環境に昇格します。

ブラウザーで WKND サイトを開きます。

の「デバッガー」アイコンをクリックして Experience Platform Debugger を起動します。

前述のように、Debugger がタグプロパティを​ ご自身の ​開発環境にマッピングし、「コンソールログ」がオンになることを確認します。

Analytics メニューを開き、レポートスイートが​ 自分の ​レポートスイートに設定されていることを確認します。

ブラウザーで、ティーザー ​または​ ボタン ​のいずれかの CTA ボタンをクリックして、別のページに移動します。

Experience Platform デバッガーに戻り、下にスクロールして​ ネットワークリクエスト／レポートスイート ​を展開します。eVar、prop および​ イベント ​が設定されていることがわかります。

ブラウザーに戻り、デベロッパーコンソールを開きます。サイトのフッターに移動し、ナビゲーションリンクのいずれかをクリックします。

ルール「CTA クリック済み」の「カスタムコード」が満たされませんでした ​というメッセージがブラウザーコンソールに表示されます。

上記のメッセージは、ナビゲーションコンポーネントが cmp:click イベントをトリガーします​ が、リソースタイプを確認するルールの条件によりアクションが実行されないからです。