Adobe Target at.js 2.0をシングルページアプリケーション（SPA）に実装する
Adobe Targetのat.js 2.0には、次世代のクライアントサイドのテクノロジーでパーソナライゼーションを実行するための豊富な機能セットが用意されています。 このバージョンは、at.jsをアップグレードして、シングルページアプリケーション（SPA）との調和のとれたインタラクションを実現することに重点を置いています。
SPAでのat.js 2.0の実装方法
- シングル ページ アプリケーションの<head>に
at.js2.0を実装します。 - SPAでビューが変更されるたびに
adobe.target.triggerView()関数を実装します。 これを行うには、URL ハッシュの変更をリッスンする、SPAによって実行されるカスタムイベントをリッスンする、triggerView()コードをアプリケーションに直接埋め込むなど、さまざまなテクニックを使用できます。 特定のシングルページアプリケーションに最適なオプションを選択する必要があります。 - ビュー名は、
triggerView()関数の最初のパラメーターです。 シンプルで明確、かつ一意の名前を使用することで、TargetのVisual Experience Composerで簡単に選択できます。 - ビューは、小さなビューの変更時だけでなく、SPA以外のコンテキスト（半方向下や無限スクロール ページなど）でもトリガーできます。
at.js2.0とtriggerView()は、Adobe Experience Platform Launchなどのタグ管理ソリューションを介して実装できます。
at.js 2.0の制限
アップグレードする前に、at.js 2.0の次の制限に注意してください。
at.js2.0では、クロスドメインの追跡はサポートされていません- mboxOverride.browserIpおよびmboxSession URL パラメーターは、
at.js2.0ではサポートされていません - レガシー関数mboxCreate、mboxDefine、mboxUpdateは
at.js2.0で非推奨（廃止予定）です。 デフォルトのコンテンツが表示され、ネットワークリクエストは行われません。
ビデオで使用されるライブラリフッターコード
以下のコードは、ビデオ中にat.js ライブラリの「ライブラリフッター」セクションに追加されました。 アプリが最初に読み込まれてから、アプリ内のハッシュ変更で実行されます。 ビュー名としてハッシュのクリーンアップ版を使用し、ハッシュが空の場合は「home」を使用します。 SPAを識別するために、コードはURL内のテキスト「react/」を探します。これは、サイトで更新する必要がある可能性が最も高くなります。 また、SPAでカスタムイベントからtriggerView()を削除するか、コードをアプリに直接埋め込む方が適切な場合があることに注意してください。
function sanitizeViewName(viewName) {
if (viewName.startsWith('#')) {
viewName = viewName.substr(1);
}
if (viewName.startsWith('/')) {
viewName = viewName.substr(1);
}
return viewName;
}
function triggerView(viewName) {
viewName = sanitizeViewName(viewName) || 'home';
// Validate if the Target Libraries are available on your website
if (typeof adobe != 'undefined' && adobe.target && typeof adobe.target.triggerView === 'function') {
adobe.target.triggerView(viewName);
console.log('AT: View triggered on page load: '+viewName)
}
}
//fire triggerView when the SPA loads and when the hash changes in the SPA
if(window.location.pathname.indexOf('react/') >-1){
triggerView(location.hash);
}
window.onhashchange = function() {
if(window.location.pathname.indexOf('react/') >-1){
triggerView(location.hash);
}
}
その他のリソース
recommendation-more-help
target-learn-help-toc