シングルページアプリケーションの実装

Adobe Experience PlatformWeb SDKは、シングルページアプリケーション(SPA)など、次世代のクライアント側テクノロジーでパーソナライゼーションを実行できる豊富な機能を備えています。

従来の Web サイトは、「ページ間」ナビゲーションモデル（別名マルチページアプリケーション）を使用していました。このモデルでは、Web サイトデザインは URL と密接に結合され、ある Web ページから別のページへのトランジションにはページ読み込みが必要になります。

代わりに、シングルページアプリケーションなど最新のWebアプリケーションでは、多くの場合ページのリロードとは無関係に、ブラウザーUIのレンダリングを迅速に使用するモデルが採用されています。 これらのエクスペリエンスは、スクロール、クリック、カーソルの移動など、顧客の操作によってトリガーされます。 最新のWebのパラダイムが進化してきたので、従来の汎用イベント（ページ読み込みなど）との関連性が、パーソナライゼーションや実験を展開するようにはなりません。

SPA向けプラットフォームWeb SDKの利点

シングルページアプリケーションでAdobe Experience PlatformWeb SDKを使用する利点を次に示します。

• ページ読み込み時にすべてのオファーをキャッシュし、複数のサーバー呼び出しを単一のサーバー呼び出しに減らす機能。
• オファーは、従来のサーバー呼び出しによって導入された遅延時間なく、キャッシュを介して即座に表示されるので、サイトでのユーザーエクスペリエンスが大幅に向上します。
• 1行のコードと1回限りの開発者のセットアップにより、マーケターはSPA上のVisual Experience Composer(VEC)を使用して、A/Bおよびエクスペリエンスターゲット設定(XT)アクティビティを作成し、実行できます。

XDM表示とシングルページアプリケーション

SPA向けAdobe TargetVECは、表示と呼ばれる概念を利用している。SPAエクスペリエンスを構成する視覚的要素の論理的なグループ。 したがって、単一ページのアプリは、ユーザーの操作に基づいて、URLではなく表示を介した移行と見なすことができます。 通常、ビューはサイト全体またはサイト内のグループ化されたビジュアル要素を表せます。

表示の詳細を説明するために、次の例では、「React」に実装された仮定のオンラインeコマースサイトを使用して、例の表示を調べます。

ホームサイトに移動した後、ヒーロー画像は、イースターセールと、そのサイトで利用可能な最新の商品を宣伝します。 この場合、ホーム画面全体に対して表示を定義できます。 この表示は、単に「ホーム」と呼ぶことができます。

顧客は、ビジネスが販売する製品に対する関心が高まるにつれ、製品​リンクをクリックすることにします。 ホームサイトと同様、製品サイト全体をビューとして定義できます。この表示は、「products-all」という名前にできます。

表示は、サイト全体またはサイト上の視覚要素のグループとして定義できるので、製品サイトに表示される4つの製品をグループ化し、表示と見なすことができます。 この表示は「products」という名前にできます。

顧客が「さらに読み込む」ボタンをクリックしてサイト上の他の製品を探索するとき、WebサイトのURLは変わりませんが、表示される2行目の製品のみを表す表示をここに作成できます。 表示名は「products-page-2」にできます。

顧客はサイトからいくつかの製品を購入することを決定し、チェックアウト画面に進みます。 チェックアウトサイトでは、「通常」配信または「高速」配信を選択できます。 表示は、サイト上の任意のグループの視覚要素にすることができるので、配信の環境設定用に表示を作成し、「配信の環境設定」と呼ぶことができます。

表示の概念はこれよりもずっと遠くに広げられる。 これらは、サイトで定義できる表示の例に過ぎません。

XDM表示の実装

XDM表示は、Adobe Targetで活用して、マーケターがVisual Experience Composerを使用してSPA上でA/BテストとXTテストを実行できるようにします。 1回限りの開発者の設定を完了するには、次の手順を実行する必要があります。

1. Adobe Experience PlatformWeb SDKをインストール

2. 個人用に設定したいシングルページアプリケーション内のすべてのXDM表示を特定します。

3. XDM表示を定義した後、ABまたはXT VECアクティビティを配信するために、renderDecisionsをtrueに設定し、対応するXDM表示をシングルページアプリで実装します。 sendEvent()XDM表示はxdm.web.webPageDetails.viewNameに渡す必要があります。 この手順により、マーケターはVisual Experience Composerを利用して、これらのXDMに対するA/BテストとXTテストを開始できます。

   alloy("sendEvent", { 
     "renderDecisions": true, 
     "xdm": { 
       "web": { 
         "webPageDetails": { 
         "viewName":"home" 
         }
       } 
     } 
   });
   

sendEvent() 関数の例

この節では、Reactで仮定のeコマースSPA用にsendEvent()関数を呼び出す方法を示す3つの例を概説します。

例1:A/Bテストホームページ

マーケティングチームは、ホームページ全体でA/Bテストを実行する必要があります。

ホームサイト全体でA/Bテストを実行するには、sendEvent()を呼び出し、XDM viewNameをhomeに設定する必要があります。

function onViewChange() { 
  
  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); 
  }
   
  alloy("sendEvent", { 
    "renderDecisions": true, 
    "xdm": { 
      "web": { 
        "webPageDetails": { 
          "viewName":"home" 
        } 
      } 
    }
  }); 
} 

// react router v4 

const history = syncHistoryWithStore(createBrowserHistory(), store); 

history.listen(onViewChange); 

// react router v3 

<Router history={hashHistory} onUpdate={onViewChange} > 

例2:パーソナライズされた製品

マーケティングチームは、ユーザーが​「さらに​を読み込む」をクリックした後に、価格ラベルの色を赤に変更して、2行目の製品をパーソナライズしたいと考えています。

function onViewChange(viewName) { 

  alloy("sendEvent", { 
    "renderDecisions": true, 
    "xdm": { 
      "web": { 
        "webPageDetails": { 
          "viewName": 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}); 
    onViewChange('PRODUCTS-PAGE-' + page); 
  } 

} 

例3:A/Bテスト配信の環境設定

高速配信​が選択されている場合にボタンの色を青から赤に変更すると、(両方の配信オプションのボタンの色を青に保つのではなく)コンバージョンが高くなるかどうかをA/Bテストを実行します。

選択した配信の好みに応じてサイト上のコンテンツをパーソナライズするために、配信の好みごとに表示を作成することができる。 通常の配信​を選択した場合、表示には「checkout-normal」という名前を付けることができます。 「高速配信」が選択されている場合は、表示に「checkout-express」という名前を付けることができます。

function onViewChange(viewName) { 
  alloy("sendEvent", { 
    "renderDecisions": true, 
    "xdm": { 
      "web": { 
        "webPageDetails": { 
          "viewName": 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; 
    onViewChange(selectedPreferenceValue); 
  } 

} 

SPA用のVisual Experience Composerの使用

XDM表示の定義が完了し、それらのXDM表示が渡されたsendEvent()を実装すると、VECはこれらの表示を検出し、A/BまたはXTアクティビティに対するアクションや変更を作成できるようになります。

変更パネル

変更パネルは、特定の表示に対して作成されたアクションをキャプチャします。 表示のすべてのアクションは、その表示の下にグループ化されます。

アクション

アクションをクリックすると、このアクションが適用されるサイトの要素がハイライトされます。表示の下で作成される各VECアクションには、次のアイコンがあります。情報、編集、クローン、移動、削除。 これらのアイコンの詳細については、次の表で説明します。

SPAでのVECの使用例

ここでは、Visual Experience Composerを使用してA/BまたはXTアクティビティのアクションや変更を作成する3つの例について説明します。

例1:「ホーム」表示の更新

以前のドキュメントでは、「home」という名前の表示がホームサイト全体に対して定義されていました。 次に、マーケティングチームは「ホーム」表示を次のように更新します。

• 追加を買い物かご​に、いいね！​ボタンを、より明るい青色の共有に変更します。 これは、ヘッダーのコンポーネントの変更が含まれるので、ページの読み込み中に発生する必要があります。
• 2019年の最新製品​のラベルを​2019年の最新製品​に変更し、テキストの色を紫に変更します。

VECでこれらの更新を行うには、「構成」を選択し、変更を「ホーム」表示に適用します。

例2:製品ラベルの変更

「products-page-2」表示の場合、マーケティングチームは、価格​ラベルを​販売価格​に変更し、ラベルの色を赤に変更することを希望します。

VECでこれらの更新を行うには、次の手順が必要です。

1. VECで「参照」を選択します。
2. サイトの上部ナビゲーションで​製品​を選択します。
3. 「もっと​読み込む」を1回選択して、2行目の製品を表示します。
4. VECで「構成」を選択します。
5. テキストラベルを​販売価格​に変更し、色を赤に変更するアクションを適用します。

例3:配信設定のカスタマイズ

表示は、状態やラジオボタンのオプションなど、詳細なレベルで定義できます。 以前は、このドキュメントの表示は、配信プリファレンスの「checkout-normal」と「checkout-express」に対して定義されていました。 マーケティングチームは、「checkout-express」表示のボタンの色を赤に変更したいと考えています。

VECでこれらの更新を行うには、次の手順が必要です。

1. VECで「参照」を選択します。
2. 製追加品を買い物かごに追加する必要があります。
3. サイトの右上隅にある買い物かごアイコンを選択します。
4. 「注文をチェックアウト」を選択します。
5. 配信の環境設定​の下にある「配信​高速設定」ラジオボタンを選択します。
6. VECで「構成」を選択します。
7. ペイ​ボタンの色を赤に変更します。