この 5 部構成のビデオシリーズでは、Adobe Launch を介してデプロイされた Experience Manager 用のアセットインサイトのセットアップと設定について順を追って説明します。
アセットインサイトの概要。 コアコンポーネント、サンプル画像コンポーネントおよびその他のコンテンツパッケージをインストールして、環境を準備します。
実装のために、必ずコアコンポーネントの最新バージョンをダウンロードしてください。
このビデオでは、最新バージョンではないコアコンポーネント v2.2.2 を使用しています。次の節に進む前に、必ず最新バージョンを使用してください。
コアコンポーネントの機能強化と、アセットインサイトのプロキシコンポーネント(サンプル画像コンポーネント)の使用。コンテンツページテンプレートポリシーを編集して、リファレンスサイトに対してサンプル画像コンポーネントを有効にします。
画像コアコンポーネントには、アセットの UUID(JCR 内で作成されたノードの一意の ID の値)の追跡を無効にして UUID のトラッキングを無効にする機能が含まれています。
コア画像コンポーネントは、画像タグの親 <div> 内で data-asset-id 属性を使用して、この機能を有効または無効にします。プロキシコンポーネントは、以下の変更でコアコンポーネントを上書きします。
data-aem-asset-id='image.UUID' と data-trackable='true' は、アセットインプレッションのために存在する必要がある主要な属性です。アセットクリックインサイトの場合、<img> タグに存在する上記のデータ属性に加えて、有効な href 値が親の <a> タグに必要です。
リアルタイムデータ収集を伴うレポートスイートが、アセットトラッキング用に作成されます。 AEM アセットインサイトの設定は、Adobe Analytics 資格情報を使用してセットアップされます。
Adobe Analytics レポートスイート用に、リアルタイムデータ収集と AEM アセットレポートを有効にする必要があります。AEM アセットレポートを有効にすると、アセットインサイトを追跡するための Analytics 変数が予約されます。
AEM アセットインサイトの設定の場合は、以下の資格情報が必要です。
Adobe Analytics 拡張機能の追加、ページ読み込みルールの作成および Adobe IMS テクニカルアカウントを使用した AEMと Launch の統合。
必ず、すべての変更をオーサーインスタンスからパブリッシュインスタンスにレプリケートしてください。
//For AEM 6.3
<script type="text/javascript" src="http://localhost:4503/etc/clientlibs/foundation/assetinsights/pagetracker.js"></script>
//For AEM 6.4
<script type="text/javascript" src="http://localhost:4503/etc.clientlibs/dam/clientlibs/assetinsights/pagetracker.js"></script>
ページトラッカーは(asset-embed-code に登録されている)2 つのコールバックを実装しています。
最後に、ページトラッカーは以下のような初期化関数を実装します。
/*
* AEM Asset Insights
*/
var sObj = window.s;
_satellite.notify('in assetAnalytics customInit');
(function initializeAssetAnalytics() {
if ((!!window.assetAnalytics) && (!!assetAnalytics.dispatcher)) {
_satellite.notify('assetAnalytics ready');
/** NOTE:
Copy over the call to 'assetAnalytics.dispatcher.init()' from Assets Pagetracker
Be mindful about changing the AppMeasurement object as retrieved above.
*/
assetAnalytics.dispatcher.init(
"", /** RSID to send tracking-call to */
"", /** Tracking Server to send tracking-call to */
"", /** Visitor Namespace to send tracking-call to */
"", /** listVar to put comma-separated-list of Asset IDs for Asset Impression Events in tracking-call, e.g. 'listVar1' */
"", /** eVar to put Asset ID for Asset Click Events in, e.g. 'eVar3' */
"", /** event to include in tracking-calls for Asset Impression Events, e.g. 'event8' */
"", /** event to include in tracking-calls for Asset Click Events, e.g. 'event7' */
sObj /** [OPTIONAL] if the webpage already has an AppMeasurement object, please include the object here. If unspecified, Pagetracker Core shall create its own AppMeasurement object */
);
sObj.usePlugins = true;
sObj.doPlugins = assetAnalytics.core.updateContextData;
}
else {
_satellite.notify('assetAnalytics not available. Consider updating the Custom Page Code', 4);
}
})();
/*
* AEM Asset Insights
*/
document.querySelectorAll('[data-aem-asset-id]').forEach(function(element) {
assetAnalytics.core.assetLoaded(element);
var parent = element.parentElement;
if (parent.nodeName == "A") {
parent.addEventListener("click", function() {
assetAnalytics.core.assetClicked(this)
});
}
});
//Launch Build Info
_satellite.buildInfo
//Enables debug messages
_satellite.setDebug(true);
//Asset Insight JS Object
assetAnalytics
//List of trackable images
document.querySelectorAll(".cmp-image__image");
ビデオでは、Analytics をデバッグする方法として、2 つの Google Chrome ブラウザー拡張機能に言及しています。その他のブラウザーでも同様の拡張機能を使用できます。
Chrome 拡張機能「Launch と DTM の切り替え」を使用して、DTM をデバッグモードに切り替えることもできます。これにより、DTM のデプロイメントに関連するエラーが発生したかどうかを簡単に確認できます。さらに、次のスニペットを追加することで、任意のブラウザーから開発者ツール/JS コンソールを通じて DTM を手動でデバッグモードに切り替えることができます。
AEM Asset レポート同期ジョブスケジューラーとアセットインサイトレポートの設定