Adobe Target ビューの実装
ここまで Adobe Target ビューの内容について説明しました。Target ではこのビューの概念を活用することで、マーケターが SPA での A/B テストや XT テストを VEC を通じて実行できるようにしています。これには開発者による 1 回限りの設定が必要です。これを設定する手順を説明します。
-
at.js 2.x をインストールします。
まず、at.js 2.x をインストールする必要があります。このバージョンの at.js は、SPA を考慮して開発されました。at.js の以前のバージョンでは、Adobe Target ビューと SPA VEC はサポートされていません。
Adobe Target UI を使用して at.js 2.x を Administration > Implementation からダウンロードします。 at.js 2.x は、Adobe Experience Platform のタグを使用してデプロイすることもできます。 ただし、Adobe Target の拡張機能は現在最新ではなく、サポートされていません。
-
サイトに at.js 2.x の最新の関数 triggerView ()を実装します。
A/B または XT テストを実行するSPAのビューを定義したら、パラメーターとして渡されたビューを使用して at.js 2.x の
triggerView()
関数を実装します。 これにより、マーケターは VEC を使用し、定義されたビューに対して A/B テストと XT テストを設計して実行できます。これらのビューに対してtriggerView()
関数が定義されていない場合、VEC はビューを検出しません。そのため、マーケターは VEC を使用して A/B テストや XT テストを設計して実行できません。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 テストを実行したい場合、URL から取り出せるビューに「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」と名前を付けることができます。速達配送を選択した場合には、ビューを「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); } }
-
VEC 経由で A/B アクティビティまたは XT アクティビティを起動します。
SPA で、
adobe.target.triggerView()
にビュー名をパラメーターとして指定して実装した場合、VEC でそれらのビューを検出でき、ユーザーがアクションを作成して A/B アクティビティや XT アクティビティを修正できるようになります。NOTE
SPA VEC は、通常の web ページで使用する VEC と同じものですが、triggerView()
の実装されたシングルページアプリケーションを開く際に利用できる機能がいくつか追加されています。
VEC が SPA で適切に動作できるように、VEC の変更パネルとアクションで、大きな改善が 2 点行われました。
変更パネル
次に示すように、Modifications パネルは、特定のビュー用に作成されたアクションをキャプチャします。 ビューのすべてのアクションが、ビューの下にグループ化されています。
アクション
アクションをクリックすると、このアクションが適用されるサイトの要素がハイライトされます。ビューに作成された各 VEC アクションには、以下のように、情報、編集、複製、移動および削除のアイコンがあります。
次の表で、各アクションについて説明します。
ページ | 説明 |
---|---|
情報 | アクションの詳細を表示します。 |
編集 | アクションのプロパティを直接編集できます。 |
複製 | Modifications パネルに存在する 1 つ以上のビュー、または VEC で参照および移動した 1 つ以上のビューにアクションのクローンを作成します。 アクションは、必ずしも Modifications パネルに存在する必要はありません。 注意:複製操作を行ったら、Browse を使用して VEC のビューに移動し、複製されたアクションが有効な操作かどうかを確認します。 アクションがビューに適用できない場合、エラーが表示されます。 |
移動 | 変更パネルに既に存在するページの読み込みイベントまたはその他のビューにアクションを移動します。 Page Load Event - ページの読み込みイベントに対応するアクションが web アプリケーションの最初のページ読み込みに適用されます。 注意:移動操作を行ったら、参照を使用して VEC のビューに移動し、移動が有効な操作かどうかを確認します。アクションがビューに適用できない場合、エラーが表示されます。 |
削除 | アクションを削除します。 |
例 1
上の例で、ホームビューを作成した例を見てみましょう。 このビューに対して 2 つの目標があります。
- 「買い物かごに追加」ボタンと「いいね」ボタンを薄い青色に変更します。ヘッダーのコンポーネントを変更しているので、これは「ページ読み込み」になります。
- テキストの色が紫に変更された状態で、「2019 年の最新製品」ラベルを「2019 年の人気製品」に変更します。
これらの目標を実行するには、VEC で「Compose」をクリックして、ホームビューでこれらの変更を適用します。
例 2
上の例を見て、PRODUCTS-PAGE-2 ビューを作成しました。 「価格」のラベルを赤い色の「セール価格」に変更することが目標です。
- 「Browse」をクリックし、ヘッダーにある「Products」リンクをクリックします。
- 2 行目の製品に移動するには、Load More を 1 回クリックします。
- Compose をクリックします。
- アクションを適用して、テキストラベルを「セール価格」に変更し、色を赤に変更します。
例 3
前述のように、ビューはより細かいレベルで定義できます。ラジオボタンの選択などの状態もビューとして定義することができます。ここまでで、「チェックアウト時に速達配送を選択」と「チェックアウト時に通常配送を選択」をビューとして作成しました。ここでは、「チェックアウト時に速達配送を選択」のボタンの色を赤に変更します。
- Browse をクリックします。
- 買い物かごに製品を数点追加します。
- 右上隅の買い物かごアイコンをクリックします。
- 注文のチェックアウトをクリックします。
- 「速達配送」のラジオボタンをクリックします。
- Compose をクリックします。
- 「支払い」ボタンを「注文の完了」ボタンに変更し、色を赤に変えます。
triggerView()
関数がトリガーされるのは、「速達配送」のラジオボタンが選択され、変更パネルに表示されるビューがあることを VEC が認識したときのみであるためです。at.js および SPA の詳細
SPA で、最初のページ読み込みの後に、アクションによって生じた最新のオーディエンスデータのビューを取得する方法を教えてください。
at.js 2.x の一般的なワークフローは、サイトの読み込み時に、サイト上の後続のユーザーのアクションがオファーを取得するためのサーバー呼び出しをトリガーにしないように、すべてのビューとアクションがキャッシュされることです。 後続のユーザーアクションによって更新された可能性のある最新のプロファイルデータに合わせてビューを取得するには、最新のオーディエンスユーザーまたは渡されたプロファイルデータで getOffers()
および applyOffers()
を呼び出します。
例えば、通信会社の SPA で at.js 2.x を使用しているとします。ビジネスとしての達成目標は、次のとおりです。
- ログアウトしたユーザーまたは匿名ユーザーの場合は、最新の会社のプロモーションを表示します(
http://www.telecom.com/home
での「1 か月目無料」のヒーローオファーなど)。 - ログインユーザーで契約が近づいている場合に、「無料で電話が手に入ります」などのアップグレードのプロモーションを表示する (
http://www.telecom.com/loggedIn/home
)。
ここでは、デベロッパー名が表示された状態で、次のように triggerView()
を呼び出します。
http://www.telecom.com/home
の場合のビュー名は、「ログアウトホーム」です。triggerView("Logged Out Home")
が呼び出されます。
http://www.telecom.com/loggedIn/home
の場合のビュー名は、「ログインホーム」です。triggerView("Logged In Home")
がルートの変更時に呼び出されます。
マーケターが VEC を通じて次の A/B アクティビティを実行します。
http://www.telecom.com/home
で表示される「loggedIn= false
」パラメーターを持つオーディエンス向けの、「最初の 1 か月無料」オファーを含む A/B アクティビティ(ビュー名はログアウトホームである)。- 「無料の電話を利用できます」という A/B アクティビティ パラメーター「
loggedIn=true
」を持つオーディエンス向けオファーを、http://www.telecom.com/loggedIn/home
で表示します。この場合、ビュー名は「Logged In Hero Offer」になります。
次に、このときのユーザーフローについて考えてみましょう。
- 匿名のログアウトユーザーがページにアクセスします。
- at.js 2.x を使用しているので、ページ読み込み時にパラメーター「
loggedIn = false
」を渡して、オーディエンスにパラメーター「loggedIn = false
」がある場合に適格となる、アクティブなアクティビティに存在するすべてのビューを取得します。 - at.js 2.x は次に、ログアウトされたホームビューとアクションを取得して、「1 か月目の無料」オファーを表示し、キャッシュに保存します。
triggerView("Logged Out Home")
を呼び出すと、「1 か月目の空き時間」オファーがキャッシュから取得され、オファーはサーバーコールなしで表示されます。- ユーザーは「ログイン」をクリックし、資格情報を入力します。
- Web サイトは SPA なので、すべてのページは読み込まず、代わりにユーザーを
http://www.telecom.com/loggedIn/home
にルーティングします。
ここで問題が発生します。このコードをルート変更時に配置しているため、ユーザーがログインすると、triggerView("Logged In Home")
が発生します。その結果、at.js 2.x ではキャッシュからビューとアクションが取得されますが、キャッシュに存在するビューはログアウトホームのみです。
そのため、ログイン済みビューを取得して「無料の電話を受ける資格があります」と表示するにはどうすればよいでしょうか。 offer? サイト上でのすべての後続のアクションは、ログインユーザーの視点で行われます。つまり、すべてのアクションが最終的にログインユーザー用にパーソナライズされたオファーとなるようにするには、どうすればいいでしょうか。
at.js 2.x でサポートされている新しい getOffers()
関数と applyOffers()
関数を使用できます。
adobe.target.getOffers({
request: {
prefetch: {
"views": [
{
"parameters": {
"loggedIn": true
},
}
]
},
});
getOffers()
の応答を applyOffers()
に渡すと、「loggedIn = true」に関連付けられたすべてのビューとアクションで at.js キャッシュが更新されるようになりました。
つまり、at.js 2.x では、最新のオーディエンスデータを使用したビュー、アクション、オファーをオンデマンドで取得する方法がサポートされているわけです。
at.js 2.x はシングルページアプリケーション用に A4T をサポートしていますか。
はい。Adobe Analytics および Experience Cloud 訪問者 ID サービスを実装した場合、at.js 2.x では、triggerView()
関数を通じて SPA 用の A4T をサポートします。詳細については、以下の図を参照してください。
手順 | 説明 |
---|---|
1 | triggerView() が SPA で呼び出され、ビューがレンダリングされます。また、ビューに関連付けられたビジュアル要素を変更するためのアクションが適用されます。 |
2 | ビューのターゲットコンテンツがキャッシュから読み取られます。 |
3 | デフォルトコンテンツがちらつくことなく、可能な限り迅速にターゲットコンテンツが表示されます。 |
4 | 通知リクエストが Target プロファイルストアに送信され、アクティビティの訪問者がカウントされて、指標が増分されます。 |
5 | Analytics データがデータ収集サーバーに送信されます。 |
6 | Target データは、SDID を使用して Analytics データに適合され、Analytics レポートストレージへと処理されます。A4T レポートを使用して、Analytics データが Analytics for Target の両方に表示できるようになります。 |
triggerView()
関数に {page: false}
を渡して、常に再レンダリングされるコンポーネントに対してビューが複数回トリガーされたときにインプレッションカウントが水増しされないようにします。 次に例を示します。adobe.target.triggerView("PRODUCTS-PAGE-2", {page:false})
サポートされているアクティビティ
アクティビティのタイプ | 対応? |
---|---|
A/B テスト | ○ |
A/B テストおよびエクスペリエンスのターゲット設定(XT)アクティビティにおける オファーとしての Recommendations | ○ |
自動配分 | ○ |
エクスペリエンスのターゲット設定 | ○ |
多変量分析テスト | × |
自動ターゲット | × |
Automated Personalization | × |
レコメンデーション | × |
at.js 2.x をインストールして triggerView()
をサイトに実装した場合、SPA VEC は自動ターゲットをサポートしませんが、自動ターゲット A/B アクティビティはどのように実行すればよいですか。
自動ターゲット A/B アクティビティを使用する場合は、ページの読み込みイベントで実行されるすべてのアクションを VEC で移動できます。各アクションにポインタを合わせて、「Move to Page Load Event」ボタンをクリックします。 その後、次の手順で、トラフィック配分方法に対応する自動ターゲットを選択できます。
サポートされる統合
サポートされる機能
SPA VEC のページ配信設定
Page Delivery 設定を使用すると、オーディエンスに対していつ Target アクティビティが適合および実行されるかを決定するルールを設定できます。
VEC の 3 ステップのガイドによるアクティビティ作成ワークフローから Page Delivery のオプションにアクセスするには、Experiences のステップで、Configure (歯車アイコン)/Page Delivery をクリックします。
例えば、上記の Page Delivery 設定で定義されているように、訪問者が https://www.adobe.com
に直接到達した場合 または https://www.adobe.com/products
を含む任意の URL に到達した場合 Target アクティビティは選定および実行されます。 これは、ページとのすべてのやり取りでページを再読み込みする複数ページアプリケーションに対して完全に機能します。at.js が、ユーザーが移動する URL に対して適合するアクティビティを取得します。
ただし、SPAの動作は異なるので、SPA VEC アクティビティで定義されたビューにすべてのアクションを適用できるように、Page Delivery 設定を行う必要があります。
使用例
以下の使用例を検討します。
以下の変更が加えられました。
- 次の URL にあるホームビューの背景色が変更されました。https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=ja#/
- 次の URL にある製品ビューのボタンの色が変更されました。https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=ja#/products
上記の例を念頭に置いて、Page Delivery の設定を、at.js 2 を使用するSPAの https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=ja#/ のみを含むように設定すると、どうなるでしょうか?x を使用)
以下の図に、Target フロー - ページ読み込みリクエスト(at.js 2.x)を示します。
ユーザージャーニー #1
- ユーザーが直接 https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=ja#/ に移動します。
- at.js 2.x は、Edgeに対してクエリを実行し、URL https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=ja#/ に対してアクティビティを実行する必要があるかどうかを確認します。
- 手順 6 で、Target Edge は、ブラウザーでキャッシュできるように、ホームおよび製品ビューに対するアクションを返します。
結果:ユーザーのホームビューに緑の背景色が表示されます。ユーザーがその後 https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=ja#/products に移動すると、製品ビューでアクションがブラウザーにキャッシュされるので、ボタンの背景色が青くなります。
注意:https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=ja#/products に移動したユーザーは、ページ読み込みをトリガーしませんでした。
ユーザージャーニー #2
- ユーザーが直接 https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=ja#/products に移動します。
- at.js 2.x は、Edgeに対してクエリを実行し、URL https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=ja#/products に対してアクティビティを実行する必要があるかどうかを確認します。
- https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=ja#/products に適合するアクティビティはありません。
- 適合するアクティビティがないので、トリガーする at.js 2.x 用にキャッシュされるアクションおよびビューはありません。
結果:製品ビューの triggerView()
を定義し、SPA VEC を使用して製品ビューに対してアクションを行っても、ページ配信設定に https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=ja#/products を含むルールを作成していないので、実行されたアクションは表示されません。