シングルページアプリケーションの実装
作成対象:
- 開発者
従来の Web サイトは、「ページ間」ナビゲーションモデル(別名マルチページアプリケーション)を使用していました。このモデルでは、Web サイトデザインは URL と密接に結合され、ある Web ページから別のページへのトランジションにはページ読み込みが必要になります。シングルページアプリケーション(SPA)などの最新型 Web アプリケーションは、代わりにブラウザの UI レンダリングの迅速な使用を推進するモデルを採用しています。多くの場合、ブラウザの UI レンダリングは、ページの再読み込みとは独立しています。これらのエクスペリエンスは、スクロール、クリック、カーソル移動などの顧客のインタラクションによってトリガーされることがよくあります。最新の Web の枠組みが進化するにつれて、パーソナライゼーションと実験をデプロイするためのページ読み込みなどの従来の汎用イベントは機能しなくなりました。
at.js 2.x は、次世代のクライアントサイドテクノロジーでパーソナライゼーションを実行するための機能を提供します。このバージョンは、SPA と調和したインタラクションを実現するための at.js の改善に焦点を当てています。
以前のバージョンでは利用できない at.js 2.x を使用するメリットを紹介します。
- ページ読み込み時にすべてのオファーをキャッシュし、複数のサーバー呼び出しを単一のサーバー呼び出しに減らす機能。
- 従来のサーバー呼び出しで発生する遅延時間なしで、キャッシュ経由でオファーが即座に表示されるため、サイトでのエンドユーザーのエクスペリエンスが著しく向上します。
- 1 行のシンプルなコードと開発者による 1 回限りのセットアップで、マーケターは SPA 上で VEC を使用して A/B およびエクスペリエンスターゲティング(XT)アクティビティを作成し、実行できます。
Adobe Target ビューと単一ページアプリケーション
SPA用の Adobe Target VEC では、ビューと呼ばれる新しい概念を利用します。ビューは、SPA エクスペリエンスを構成するビジュアル要素の論理的なグループです。 このため SPA は、URL ではなくユーザーのインタラクションによりビュー間を移行するものと考えられます。通常、ビューはサイト全体またはサイト内のグループ化されたビジュアル要素を表せます。
ビューとは何かをさらに説明するために、React で実装された架空のオンライン e コマースサイトを操作して、いくつかのビューの例を見てみましょう。 下のリンクをクリックして、このサイトを新しいブラウザータブで開きます。
リンク: ホームサイト
ホームサイトに移動すると、イースターセールを宣伝するヒーロー画像やこのサイトで販売されている最新の製品がすぐに表示されます。この場合、ビューはホームサイト全体として定義できます。これは、以下の Adobe Target ビューの実装の節で詳しく説明するので、注意が必要です。
リンク: 製品サイト
販売されている製品に興味を引かれたため、「Products」リンクをクリックすることにします。ホームサイトと同様、製品サイト全体をビューとして定義できます。このビューには https://target.enablementadobe.com/react/demo/#/products)
のパス名と同様に「products」という名前を付けられます。
このセクションの冒頭は、ビューをサイト全体またはサイト上の視覚要素のグループとして定義しました。上記のように、サイトに表示されている 4 つの製品をグループ化して、ビューとしても考えられます。このビューに名前を付ける場合、「Products」という名前を使用できます。
「Load More」ボタンをクリックして、サイト上のより多くの製品を見てみることにします。この場合、Web サイトの URL は変化しません。ただし、ここにあるビューは、上に示されている製品の 2 列目のみを表示できます。このビューは「PRODUCTS-PAGE-2」と呼べます。
リンク: チェックアウト
サイトに表示されている製品が気に入ったので、いくつかを購入することにしました。現在、チェックアウトサイトでは、通常配送または速達配送を選択できるようになっています。ビューはサイト上のビジュアル要素のグループにできるため、これに「View Delivery Preferences」という名前を付けられます。
さらに、ビューの概念を大きく拡張することもできます。マーケターが選択された配送設定に応じてサイト上のコンテンツをパーソナライズする場合、配送設定ごとにビューを作成できます。この例では、「Normal Delivery」を選択する場合、ビューに「Normal Delivery」という名前を付けられます。「Express Delivery」を選択する場合、ビューに「Express Delivery」という名前を付けることができます。
次に、マーケターは、A/B テストを実行して、どちらの配送オプションでもボタンの色を青のままにするのに対して、速達が選択されたときに色を青から赤に変更することでコンバージョンを上昇させることができるかどうかを確認したいと思うかもしれません。
Adobe Target ビューの実装
Adobe Target Views とは何かを説明したので、マーケターが VEC を介してSPAで A/B テストと XT テストを実行で Target るようにするために、このコンセプトを活用できます。 これには開発者による 1 回限りの設定が必要です。これを設定する手順を説明します。
-
at.js 2 のインストール**。
まず、at.js 2 をインストールする必要があります。x を通じてクロスドメイントラッキングを使用している場合です。このバージョンの at.js は、SPAを念頭に置いて開発されました。 at.js の以前のバージョンでは、Adobe Target Views とSPA用の VEC はサポートされていません。
at.js をダウンロード 2.x Administration/Implementation にある Adobe Target UI を使用します。 at.js 2.x は、Adobe Experience Platform のタグを使用してデプロイすることもできます。
-
at.js の実装 2.x 関数を使用する
[triggerView()](https://experienceleague.adobe.com/docs/target-dev/developer/client-side/at-js-implementation/functions-overview/adobe-target-triggerview-atjs-2.html?lang=ja)
、サイト上で実行できます。A/B テストまたは XT テストを実行するSPAのビューを定義したら、at.js 2 を実装します。x パラメーターとして渡されたビューを持つ
triggerView()
関数。 これにより、マーケターは VEC を使用し、定義されたビューに対して A/B テストと XT テストを設計して実行できます。これらのビューに対してtriggerView()
関数が定義されていない場合、VEC はビューを検出しません。そのため、マーケターは VEC を使用して A/B テストや XT テストを設計して実行できません。NOTE
at.js でビューがサポートされるようにするには、viewsEnabled を true に設定する必要があります。そうしないと、すべてのビュー機能が無効になります。adobe.target.triggerView(viewName, options)
パラメータータイプ必須?検証説明viewName文字列○1. 末尾にスペースは入れられません。
2.空にはできません。
3.ビュー名はすべてのページに対して一意である必要があります。
4.警告: ビュー名の先頭または末尾を「/
」にしないでください。これは、顧客は URL パスから表示名を一般的に抽出するためです。「home」と「/home
」は区別されます。
5.警告:{page: true}
オプションを使用して同じビューを連続してトリガーしないでください。ビューを表す文字列型として任意の名前を渡します。このビュー名は、マーケターがアクションを作成して A/B および XT アクティビティを実行できるように、VEC の Modifications パネルに表示されます。optionsオブジェクト×options > pageブール値×TRUE: ページのデフォルト値は true です。page=true
の場合、インプレッション数を増分するために Edge サーバーに通知が送信されます。
FALSE:page=false
の場合、インプレッション数を増分するための通知は送信されません。オファーを含むページ上のコンポーネントを再レンダリングする場合にのみ使用します。次に、模擬 e コマース SPA用に React で
triggerView()
関数を呼び出す方法について、いくつかの例を見てみましょう。リンク: ホームサイト
マーケターの立場からホームサイト全体で A/B テストを実行する場合、ビューに「home」という名前を付けられます。
function targetView() {
var viewName = window.location.hash; // or use window.location.pathName if router works on path and not hash
viewName = viewName || 'home'; // view name cannot be empty
// Sanitize viewName to get rid of any trailing symbols derived from URL
if (viewName.startsWith('#') || viewName.startsWith('/')) {
viewName = viewName.substr(1);
}
// 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);
}
}
// react router v4
const history = syncHistoryWithStore(createBrowserHistory(), store);
history.listen(targetView);
// react router v3
<Router history={hashHistory} onUpdate={targetView} >
リンク: 製品サイト
それでは、もう少し複雑な例を見てみましょう。 例えば、ユーザーが「さらに読み込む」ボタンをクリックした後に「価格」ラベルカラーを赤に変更して、2 行目にある製品をパーソナライズするマーケターを考えましょう。
function targetView(viewName) {
// 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);
}
}
class Products extends Component {
render() {
return (
<button type="button" onClick={this.handleLoadMoreClicked}>Load more</button>
);
}
handleLoadMoreClicked() {
var page = this.state.page + 1; // assuming page number is derived from component's state
this.setState({page: page});
targetView('PRODUCTS-PAGE-' + page);
}
}
リンク: チェックアウト
マーケターが選択された配送設定に応じてサイト上のコンテンツをパーソナライズする場合、配送設定ごとにビューを作成できます。この例では、「Normal Delivery」を選択する場合、ビューに「Normal Delivery」という名前を付けられます。「Express Delivery」を選択する場合、ビューに「Express Delivery」という名前を付けることができます。
マーケターは、A/B テストを実行して、どちらの配送オプションでもボタンの色を青のままにするのに対して、速達が選択されたときに色を青から赤に変更することでコンバージョンを上昇させることができるかどうかを確認したいと思うようになるかもしれません。
function targetView(viewName) {
// 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);
}
}
class Checkout extends Component {
render() {
return (
<div onChange={this.onDeliveryPreferenceChanged}>
<label>
<input type="radio" id="normal" name="deliveryPreference" value={"Normal Delivery"} defaultChecked={true}/>
<span> Normal Delivery (7-10 business days)</span>
</label>
<label>
<input type="radio" id="express" name="deliveryPreference" value={"Express Delivery"}/>
<span> Express Delivery* (2-3 business days)</span>
</label>
</div>
);
}
onDeliveryPreferenceChanged(evt) {
var selectedPreferenceValue = evt.target.value;
targetView(selectedPreferenceValue);
}
}
at.js 2.x のシステム図
次の図は、ビューを使用した at.js 2 ワークフローと、これが SPA 統合をどのように強化するかについて説明しています。at.js 2.x で使用されている概念に関するより詳しい概要については、「シングルページアプリケーションの実装」を参照してください。
at.js は、ページに実装されているスニペットを非表示にするオプションを使用して非同期で読み込むこともできます。
顧客属性がバッチ処理でプロファイルストアに送信されます。
デフォルトコンテンツがちらつくことなく、可能な限り迅速に現在のページ上のターゲットコンテンツが表示されます。
SPA でのユーザーアクションの結果として表示されるビューのターゲットコンテンツは、ブラウザーにキャッシュされます。そのため、
triggerView()
を介してビューがトリガーされたときに追加のサーバー呼び出しをおこなわずに即座にターゲットコンテンツを適用できます。A4T レポートの Analytics を使用して、Analytics データが Analytics と Target の両方に表示され Target ようになります。
これで、triggerView()
が SPA のどこに 実装されているかに関わらず、ビューとアクションはキャッシュから取得され、サーバー呼び出しなしでユーザーに表示されるようになります。triggerView()
は、インプレッション数を増分して記録するために、Target バックエンド に通知リクエストもおこないます。
triggerView()
は SPA で呼び出され、ビューをレンダリングし、ビジュアル要素を変更ためのアクションを適用します。シングルページアプリケーションの Visual Experience Composer
at.js 2.x のインストールを完了し、サイトに triggerView()
を追加した後、VEC を使用して A/B および XT アクティビティを実行します。詳細については、「シングルページアプリケーション(SPA)の Visual Experience Composer」を参照してください。
triggerView()
の実装されたシングルページアプリケーションを開く際に利用できる機能がいくつか追加されています。トリガービューを使用して、A4T が at.js 2.x およびSPAで正しく動作することを確認します
Analytics for Target (A4T)が at.js 2.x で正しく動作することを確認するには、Target リクエストと Analytics リクエストで同じ SDID を送信してください。
SPA に関するベストプラクティスは次のとおりです。
- カスタムイベントを使用して、アプリケーションへの注目を喚起する通知をおこなう
- ビューのレンダリングが開始する前にカスタムイベントを発生させる
- ビューのレンダリングが終了したらカスタムイベントを発生させる
at.js 2.x には、新しい API 関数 triggerView() が追加されました。triggerView()
を使用して、ビューのレンダリングが開始したことを at.js に通知する必要があります。
カスタムイベント、at.js 2.x、Analytics を組み合わせる方法については、次の例を参照してください。この例では、HTML ページに訪問者 API、at.js 2.x、AppMeasurement がこの順に含まれていると仮定します。
次のカスタムイベントがあるとしましょう。
at-view-start
- ビューのレンダリングが開始したときに発生at-view-end
- ビューのレンダリングが終了したときに発生
A4T と at.js 2.x を確実に連携させるには、
ビュー開始ハンドラーは次のようになります。
document.addEventListener("at-view-start", function(e) {
var visitor = Visitor.getInstance("<your Adobe Org ID>");
visitor.resetState();
adobe.target.triggerView("<view name>");
});
ビュー終了ハンドラーは次のようになります。
document.addEventListener("at-view-end", function(e) {
// s - is the AppMeasurement tracker object
s.t();
});
at-view-start
および at-view-end
イベントを発生させる必要があります。これらのイベントは、at.js カスタムイベントには含まれていません。これらの例ではJavaScript コードを使用しますが、Adobe Experience Platform のタグなどのタグマネージャーを使用している場合、これらすべてを簡略化できます。
上記の手順に従う場合は、SPA 用の堅牢な A4T ソリューションが必要です。
実装のベストプラクティス
at.js 2.x API を使用すると、様々な方法で Target 実装をカスタマイズできますが、このプロセスでは正しい操作の順序に従うことが重要です。
以下の情報は、単一ページアプリケーションをブラウザーで初めて読み込む場合、およびそれ以降に発生するビューの変更の場合に従う必要がある操作の順序を説明します。
最初のページ読み込みの操作順序
データレイヤーがある場合は、Target リクエストを実行する前に、Target に送信する必要がある重要なデータを読み込むことをお勧めします。 これにより、targetPageParams
を使用して、ターゲティングに使用するデータを含めることができます。
targetGlobalSettings で pageLoadEnabled
と viewsEnabled
が true に設定されている場合、at.js は手順 2 ですべての VEC Target オファーを自動的に要求します。
ページの読み込み後に VEC オファーを取得する getOffers
合にも使用できます。 それには、リクエストの API 呼び出しに execute>pageLoad
と prefetch>views
が含まれていることを確認してください。
triggerView()
に電話triggerView()
が呼び出されることを確認します。 この手順は、ビューごとに 1 回だけ実行する必要があります。triggerView({"page": false})
SPA表示変更の操作の順序(ページ全体の再読み込みなし)
visitor.resetState()
に電話getOffers()
API を呼び出してキャッシュを更新しますtriggerView()
に電話triggerView()
に電話triggerView({"page": false})
トレーニングビデオ
詳細は次のビデオで説明されています。
at.js 2.x の仕組みについて
詳しくは、at.js 2.x の仕組みについてを参照してください。
SPA での at.js 2.x の実装
詳しくは、 シングルページアプリケーション(SPA)でのAdobe Targetの at.js 2.x の実装を参照してください。