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

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

作成する内容

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

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

目的

  1. Launch で、 cmp:click イベント。
  2. コンポーネントリソースタイプで様々なイベントをフィルタリングします。
  3. クリックしたコンポーネント ID を設定し、トラッキングリンクビーコンでイベントAdobe Analyticsを送信します。

前提条件

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

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

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

  1. に移動します。 https://wknd.site/us/en.html

  2. ブラウザーの開発者ツールを開き、 コンソール. 次のコマンドを実行します。

    adobeDataLayer.getState();
    

    これは、クライアントデータレイヤーのAdobeの状態を返します。

    ブラウザーコンソールを使用したデータレイヤーの状態

  3. 応答を展開し、というプレフィックスが付いたエントリを見つけます。 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 イベント。

  1. Experience Platform Launchに移動し、AEM Site と統合された Web プロパティに移動します。

  2. 次に移動: ルール Launch UI のセクションでセクションを開き、 ルールを追加.

  3. ルールに名前を付ける CTA クリック済み.

  4. クリック イベント > 追加 開く イベント設定 ウィザード。

  5. の下 イベントタイプ 選択 カスタムコード.

    ルールに「CTA クリック済み」という名前を付け、カスタムコードイベントを追加します。

  6. クリック 編集画面を開く メインパネルで、次のコードスニペットを入力します。

    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 オブジェクトは、次に、Launch の別の予約名で公開され、 event. Launch のデータ要素で、次のような様々なプロパティを参照できるようになりました。 event.component['someKey'].

  7. 変更を保存します。

  8. 次の下 アクション クリック 追加 開く アクションの設定 ウィザード。

  9. の下 アクションタイプ 選択 カスタムコード.

    「Custom Code」アクションタイプ

  10. クリック 編集画面を開く メインパネルで、次のコードスニペットを入力します。

    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 それがクリックを引き起こした。

  11. 変更を保存し、 ビルド (Launch で)をクリックして、 環境 をAEM Site で使用している場合にのみ使用できます。

    メモ

    これは、 Adobe Experience Platform Debugger 埋め込みコードを 開発 環境。

  12. 次に移動: WKND サイト 開発者ツールを開いてコンソールを表示します。 選択 ログを保持.

  13. いずれかの ティーザー または ボタン 別のページに移動するための CTA ボタン。

    クリックする CTA ボタン

  14. デベロッパーコンソールで、 CTA クリック済み ルールが実行されました:

    CTA ボタンのクリック

データ要素の作成

次に、データ要素を作成して、クリックされたコンポーネント ID とタイトルを取り込みます。 前の練習でのの出力の再現 event.path は~に似ていた component.button-b6562c963d そして、 event.component['dc:title'] は「旅行を見る」のようなものでした。

コンポーネント ID

  1. Experience Platform Launchに移動し、AEM Site と統合された Web プロパティに移動します。

  2. 次に移動: データ要素 「 」セクションで、「 」をクリックします。 新規データ要素の追加.

  3. の場合 名前 入力 コンポーネント ID.

  4. の場合 データ要素タイプ 選択 カスタムコード.

    コンポーネント ID データ要素フォーム

  5. クリック 編集画面を開く カスタムコードエディターで次のように入力します。

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

    変更を保存します。

    メモ

    以下を思い出してください。 event オブジェクトは、 ルール Launch 内。 データ要素の値は、データ要素が 参照 ルール内で使用できます。 したがって、このデータ要素は、 CTA クリック済み 前の演習で作成したルール しかし 他のコンテキストでは安全に使用できません。

コンポーネントのタイトル

  1. 次に移動: データ要素 「 」セクションで、「 」をクリックします。 新規データ要素の追加.

  2. の場合 名前 入力 コンポーネントタイトル.

  3. の場合 データ要素タイプ 選択 カスタムコード.

  4. クリック 編集画面を開く カスタムコードエディターで次のように入力します。

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

    変更を保存します。

CTA クリック済みルールに条件を追加する

次に、 CTA クリック済み ルールを設定し、 cmp:click イベントが発生した場合、 ティーザー または ボタン. ティーザーの CTA はデータレイヤー内で別のオブジェクトと見なされるので、親を調べて、ティーザーから来たことを確認することが重要です。

  1. Launch UI で、 CTA クリック済み ルールが作成されました。

  2. の下 条件 クリック 追加 開く 条件の設定 ウィザード。

  3. の場合 条件タイプ 選択 カスタムコード.

    CTA クリック条件のカスタムコード

  4. クリック 編集画面を開く カスタムコードエディターで次のように入力します。

    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 からのものか、 ティーザー.

  5. 変更を保存します。

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

現在、 CTA クリック済み ルールは、単にコンソールステートメントを出力します。 次に、データ要素と Analytics 拡張機能を使用して、Analytics 変数を アクション. また、をトリガーする追加のアクションを設定します リンクを追跡 収集したデータをAdobe Analyticsに送信します。

  1. CTA クリック済み ルール 削除コア — カスタムコード アクション(コンソールステートメント):

    「Remove custom code」アクション

  2. 「アクション」で、 追加 をクリックして新しいアクションを追加します。

  3. 拡張 入力 Adobe Analytics そして、 アクションタイプ から 変数を設定.

  4. 次の値を eVar, Props、および イベント:

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

    eVarProp とイベントの設定

    メモ

    ここ %Component ID% は、クリックされた CTA の一意の識別子を取得するので使用されます。 使用の潜在的な欠点 %Component ID% は、Analytics レポートに次のような値が含まれることを示します。 button-2e6d32893a. 使用 %Component Title% によりわかりやすい名前が付けられますが、値が一意でない可能性があります。

  5. 次に、の右側に「アクション」を追加します。 Adobe Analytics — 変数を設定 をタップすることで プラス アイコン:

    Launch アクションの追加

  6. 拡張 入力 Adobe Analytics そして、 アクションタイプ から ビーコンを送信.

  7. の下 トラッキング ラジオボタンを s.tl().

  8. の場合 リンクタイプ 選択 カスタムリンク および リンク名 値を次の値に設定します。 %Component Title%: CTA Clicked:

    リンク送信ビーコンの設定

    これにより、データ要素の動的変数が組み合わされます コンポーネントタイトル と静的文字列 CTA クリック済み.

  9. 変更内容を保存します。この CTA クリック済み ルールは、次の設定になるはずです。

    最終起動設定

    • 1. をリッスンします。 cmp:click イベント。
    • 2. イベントが ボタン または ティーザー.
    • 3. を追跡するためにの Analytics 変数を設定 コンポーネント ID as a eVar, prop、および イベント.
    • 4. Analytics トラッキングリンクビーコンを送信する(および実行する) not ページビューとして扱います )。
  10. すべての変更を保存し、Launch ライブラリを構築して、適切な環境に昇格します。

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

これで、 CTA クリック済み ルールが Analytics ビーコンを送信する場合は、Analytics Debugger を使用して Analytics トラッキング変数をExperience Platformできます。

  1. を開きます。 WKND サイト ブラウザーに表示されます。

  2. デバッガーアイコンをクリックします。 Experience Platform Debugger アイコン をクリックして、Experience PlatformDebugger を開きます。

  3. デバッガーが Launch プロパティをにマッピングしていることを確認します。 あなたの 開発環境(前述のとおり) コンソールログ がオンになっている。

  4. Analytics メニューを開き、レポートスイートが あなたの レポートスイートを使用します。

    「Analytics」タブデバッガー

  5. ブラウザーで、 ティーザー または ボタン 別のページに移動するための CTA ボタン。

    クリックする CTA ボタン

  6. Experience Platformデバッガーに戻り、下にスクロールして展開します。 ネットワークリクエスト > レポートスイート. 次を見つけることができます: eVar, prop、および イベント 設定します。

    クリック時に追跡される Analytics のイベント、eVar および prop

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

    フッターのナビゲーションリンクをクリックします。

  8. ブラウザーコンソールで、メッセージを確認します。 ルール「CTA のクリック」の「カスタムコード」が満たされなかった問題を修正しました.

    これは、ナビゲーションコンポーネントがトリガーa cmp:click イベント しかし リソースタイプに対するの確認のため、アクションは実行されません。

    メモ

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

おめでとうございます。

イベント駆動型AdobeクライアントデータレイヤーとExperience Platform Launchを使用して、Adobe Experience Managerサイト上の特定のコンポーネントのクリックを追跡しました。

このページ