イベント追跡の拡張

AEM Analytics では、Web サイトでのユーザーインタラクションを追跡できます。開発者は次の作業が必要になる場合があります。

メモ

この情報は基本的に汎用的ですが、特定の例にはAdobe Analyticsが使われています。

コンポーネントとダイアログボックスの開発に関する一般的な情報については、コンポーネントの開発を参照してください。

カスタムイベント

カスタムイベントはページ内の特定のコンポーネントの可用性に依存する要素を追跡します。これにはテンプレート特有のイベントも含まれます。ページコンポーネントは別のコンポーネントとして扱われています。

ページの読み込み時のカスタムイベントの追跡

これは、擬似属性data-trackingを使って行うことができます(古いレコード属性は、後方互換性を維持するためにサポートされています)。 これは任意の HTML タグに追加できます。

data-trackingの構文は次のとおりです。

  • data-tracking="{'event': ['eventName'], 'values': {'key': 'value', 'nextKey': 'nextValue'}, componentPath: 'myapp/component/mycomponent'}"

キーと値のペアは、2番目のパラメーター(ペイロードと呼ばれる)として任意の数だけ渡すことができます。

次に例を示します。

<span data-tracking="{event:'blogEntryView', 
                                values:{
                                   'blogEntryContentType': 'blog', 
                                   'blogEntryUniqueID': '<%= xssAPI.encodeForJSString(entry.getId()) %>',
                                   'blogEntryTitle': '<%= xssAPI.encodeForJSString(entry.getTitle()) %>',
                                   'blogEntryAuthor':'<%= xssAPI.encodeForJSString(entry.getAuthor()) %>',
                                   'blogEntryPageLanguage':'<%= currentPage.getLanguage(true) %>'
                                },
                                componentPath:'myapp/component/mycomponent'}">
</span>

ページの読み込み時に、すべてのdata-tracking属性が収集され、ContextHubのイベントストアに追加されます。ここで、これらの属性をAdobe Analyticsイベントにマッピングできます。 マッピングされていないイベントは、Adobe Analyticsでは追跡されません。 イベントのマッピングの詳細については、Adobe Analyticsへの接続を参照してください。

ページの読み込み後のカスタムイベントの追跡

ページの読み込み後に発生するイベント(ユーザーインタラクションなど)を追跡するには、JavaScript 関数 CQ_Analytics.record を使用します。

  • CQ_Analytics.record({event: 'eventName', values: { valueName: 'VALUE' }, collect: false, options: { obj: this, defaultLinkType: 'X' }, componentPath: '<%=resource.getResourceType()%>'})

場所

  • events:文字列、または文字列の配列(イベントが複数の場合)。

  • values:追跡するすべての値を格納します。

  • collect:オプションで、イベントおよびデータオブジェクトを格納する配列を返します。

  • options はオプションで、HTML要素やなどのリンクトラッキングオプション obj が含まれ [defaultLinkType](https://microsite.omniture.com/t2/help/en_US/sc/implement/index.html#linkType)ます。

  • componentPath が必要な属性であり、 <%=resource.getResourceType()%>

例えば、次のように定義した場合、「Jump to top」リンクをクリックすると jumptopheadlineclick の 2 つのイベントが実行されます。

<h1 data-tracking="{event: 'headline', values: {level:'1'}, componentPath: '<%=resource.getResourceType()%>'}">
  My Headline <a href="#" onclick="CQ_Analytics.record({event: ['jumptop','headlineclick'],  values: {level:'1'}, componentPath: '<%=resource.getResourceType()%>'})">Jump to top</a>
</h1>

ContextHubの値へのアクセス

ContextHub JavaScript APIには、指定されたストア(存在する場合)を返すgetStore(name)関数があります。 ストアには、指定したキーの値(ある場合)を返すgetItem(key)関数があります。 getKeys()関数を使うと、特定のストアに対して定義されたキーの配列を取得できます。

ContextHub.getStore(name).eventing.on(ContextHub.Constants.EVENT_STORE_UPDATED, handler, selector, triggerForPastEvents)関数を使用して関数をバインドすると、ストアで値の変更を通知できます。

ContextHubの初期利用可能性を通知する最善の方法は、ContextHub.eventing.on(ContextHub.Constants.EVENT_ALL_STORES_READY, handler, selector, triggerForPastEvents);関数を使用することです。

ContextHubの追加イベント:

すべてのストアに対応:

ContextHub.eventing.on(ContextHub.Constants.EVENT_ALL_STORES_READY, handler, selector, triggerForPastEvents);

ストア固有:

ContextHub.getStore(store).eventing.on(ContextHub.Constants.EVENT_STORE_READY, handler, selector, triggerForPastEvents)

メモ

ContextHub APIリファレンスも参照してください。

レコードコールバックの追加

コールバックを登録する前と後に、関数CQ_Analytics.registerBeforeCallback(callback,rank)CQ_Analytics.registerAfterCallback(callback,rank)を使用します。

どちらの関数も、先頭の引数では関数を、2 番目の引数ではランクを受け取ります。このランクによって、コールバックの実行順序が決定されます。

コールバックが false を返す場合、実行チェーンの後続のコールバックは実行されません。

このページ

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now