統合

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

最終更新日: 2024-01-29
  • 作成対象:
  • Intermediate
    Developer
メモ

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 に送信します。

クリックの追跡を作成する方法

目的

  1. cmp:click イベントをキャプチャするイベント駆動型のルールをタグプロパティに作成します。
  2. コンポーネントリソースタイプで様々なイベントをフィルタリングします。
  3. コンポーネント ID を設定し、リンクのトラックビーコンとイベントを Adobe Analytics に送信します。

前提条件

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

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

ボタンとティーザーのスキーマの検査

タグプロパティでルールを作成する前に、ボタンとティーザーのスキーマを確認して、データレイヤーの実装で検査します。

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

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

    adobeDataLayer.getState();
    

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

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

  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"
    

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

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

Adobe Client Data Layer は、イベント​駆動型のデータレイヤーです。任意のコアコンポーネントがクリックされると、データレイヤーを介して cmp:click イベントがディスパッチされます。cmp:click イベントをリッスンするために、ルールを作成しましょう。

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

  2. タグプロパティ 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 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'] などのコードスニペットを使用して様々なプロパティを参照できるようになりました。

  7. 変更を保存します。

  8. 次に、アクション​で「追加」をクリックして、アクションの設定​ウィザードを開きます。

  9. アクションタイプ」フィールドで、「カスタムコード」を選択します。

    カスタムコードアクションタイプ

  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. 変更を保存し、タグプロパティでビルドを実行して、AEM サイトで使用する環境にコードを昇格します。

    メモ

    Adobe Experience Platform Debugger を使用して埋め込みコードを​開発​環境に切り替えると便利です。

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

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

    CTA クリックするボタン

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

    CTA ボタンクリック済み

データ要素の作成

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

コンポーネント ID

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

  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];
    }
    
  6. 変更を保存します。

    メモ

    event オブジェクトは、タグプロパティの​ルール​をトリガーしたイベントに基づいて利用可能になり、スコープが設定されることを思い出してください。データ要素の値は、データ要素がルール内で​参照​されるまで設定されません。したがって、このデータ要素は、前のステップで作成された​ページの読み込み​ルールなどのルール内で安全に使用できます。ただし、他のコンテキストでは安全に使用できません。

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

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

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

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

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

    if(event && event.component && event.component.hasOwnProperty('dc:title')) {
        return event.component['dc:title'];
    }
    
  5. 変更を保存します。

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

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

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

    カスタムコードアクションを削除

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

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

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

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

    eVar、Prop およびイベントの設定

    メモ

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

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

    タグルールにさらにアクションを追加

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

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

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

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

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

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

    最終的なタグルール設定

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

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

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

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

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

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

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

    デバッガーの「Analytics」タブ

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

    クリックする CTA ボタン

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

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

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

    フッターのナビゲーションリンクのクリック

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

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

    メモ

    コンソールログが表示されない場合は、Experience Platform Debugger の Experience Platform タグ​で「コンソールログ」がオンになっていることを確認します。

おめでとうございます。

イベント駆動型の Adobe Client Data Layer と Experience Platform のタグを使用して、AEM サイト上にある特定のコンポーネントのクリックをトラックしました。

このページ