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

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

作成する内容

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

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

目的

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

前提条件

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

Inspect the ButtonおよびTeaser Schema

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 Clicked」と名前を付けます。

  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オブジェクトをパラメーターとして渡し、その後、eventという名前のLaunchで別の予約名で公開します。 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サイトで使用する環境にコードを昇格させます。

    メモ

    Adobe Experience Platform Debuggerを使用して、埋め込みコードを​開発​環境に切り替えると非常に役立ちます。

  12. WKND Siteに移動し、開発者ツールを開いてコンソールを表示します。 ログを保存​を選択します。

  13. ティーザー​または​ボタン​のCTAボタンの1つをクリックして、別のページに移動します。

    クリックするCTAボタン

  14. 開発者コンソールで、CTA Clicked​ルールが実行されたことを確認します。

    CTAボタンがクリックされました

データ要素の作成

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

コンポーネント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 Clicked​ルールのようなルール内で安全に使用できますが、​は他のコンテキストでは安全に使用できません。

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

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

  2. 名前​には、コンポーネントのタイトル​と入力します。

  3. データ要素のタイプ​に対して、カスタムコード​を選択します。

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

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

    変更内容を保存します。

CTAクリックルールへの条件の追加

次に、CTA Clicked​ルールを更新し、Teaser​または​Button​に対して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 Clicked​ルールは、単にコンソールステートメントを出力します。 次に、データ要素とAnalytics拡張機能を使用して、Analytics変数を​アクション​として設定します。 また、リンクを追跡​をトリガーし、収集したデータをAdobe Analyticsに送信する追加のアクションも設定します。

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

    「Remove custom code」アクション

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

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

  4. eVarsProps​および​Events​に次の値を設定します。

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

    eVarpropとイベントの設定

    メモ

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

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

    Launchアクションの追加

  6. Extension​タイプを​Adobe Analytics​に設定し、アクションタイプ​を​Send Beacon​に設定します。

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

  8. Link Type​には​Custom Link​を選択し、Link Name​には次の値を設定します。%Component Title%: CTA Clicked:

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

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

  9. 変更内容を保存します。CTA Clicked​ルールには、次の設定が含まれる必要があります。

    最終起動設定

    • 1. イベントをリッスン cmp:click します。
    • 2. イベントがボタンまたはティーザーによってトリガーされ ​たことを 確認します
    • 3. コンポーネントIDを eVarprop​およびイベン ​として追跡するには、のAnalytics変数を設 ​定します。
    • 4. Analyticsトラッキングリンクビーコンを送信します( ​ページビューとしては扱いません)。
  10. すべての変更を保存し、Launchライブラリをビルドして、適切な環境に昇格します。

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

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

  1. ブラウザーでWKND Siteを開きます。

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

  3. 前述のように、デバッガーがLaunchプロパティを​お使いの​開発環境にマッピングしていることを確認し、コンソールログ​を確認します。

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

    Analyticsタブデバッガー

  5. ブラウザーで、「ティーザー」または「ボタン」CTAボタンの1つをクリックして、別のページに移動します。

    クリックするCTAボタン

  6. Experience Platformデバッガーに戻り、下にスクロールして​ネットワークリクエスト / レポートスイート​を展開します。 eVarpropイベント​セットが見つかります。

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

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

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

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

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

    メモ

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

おめでとうございます。

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

このページ