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

メモ

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 でページデータを収集の続きであり、以下があることを前提としています。

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

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

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

  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"
    

    上記のデータの詳細は、 コンポーネント/コンテナ項目スキーマ. 新しいタグルールでは、このスキーマが使用されます。

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

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

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

  2. 次に移動: ルール 」セクションをクリックし、 ルールを追加.

  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 Site で使用している場合にのみ使用できます。

    メモ

    これは、 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 Site と統合されたタグプロパティに移動します。

  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 オブジェクトは、 ルール タグプロパティ内。 データ要素の値は、データ要素がルール内で​参照​されるまで設定されません。したがって、このデータ要素は、 Page Loaded 前の手順で作成されたルール しかし 他のコンテキストでは安全に使用できません。

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

  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;
    

    上記のコードでは、最初に、リソースタイプが ボタン リソースタイプが ティーザー.

  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 の一意の識別子を保証するので、使用されます。 使用の潜在的な欠点 %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. 追跡する Analytics 変数を設定 コンポーネント ID as a eVar, prop、および イベント.
    • 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タグ (Experience PlatformDebugger)

おめでとうございます。

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

このページ