シングル・ページ・アプリケーションWebサイトのテスト
シングル・ページ・アプリケーション(SPA) Webサイト上にA/BおよびMVTキャンペーンを作成できます。
SPAサイトでは通常、パフォーマンスとユーザー・エクスペリエンスを向上させるために、Angular、Backbone.js、Ember.js、Vue.js、Meteor、React、カスタム実装などの一般的なJavaScriptフレームワークが使用されます。
従来のWebページには、サイトの各ページに対応する個別のHTMLページがあります。リンクをクリックすると、URLが変更され、Webサイト全体がリロードされます。SPAサイトでは、ヘッダー、ナビゲーション、ページ・レイアウトなどの共有コンポーネントのリロードが回避されるため、一般的に処理が高速になります。Maxymiserを使用すると、サイトを視覚的に変更できるため、ユーザーがサイトにいる間にページが完全にリロードされなくてもテストできます。
SPAサポートの有効化
SPAサポートを有効にする手順は、次のとおりです。
- キャンペーンを開き、「Overview」パネルの「Settings」をクリックします。
- 「SPA Support」を有効にします。
- 「Content」タブに移動してトリガーを追加します。ページを編集する前に、訪問者がこのキャンペーンを表示するときのトリガーを追加しておく必要があります。キャンペーン・トリガーは次のいずれかです。
- URL
- HTMLセレクタ
- URLとHTMLセレクタの両方
HTMLセレクタ・トリガーには次の2つのタイプがあります。
- Exists: ページにHTMLオブジェクトが存在します。
- Contains: HTMLオブジェクトがページに存在し、特定の値が含まれます。
ノート: トリガーを組み合せて使用できます。セレクタ・トリガーは、URLなしで使用できます。キャンペーンは、URLに関係なく、これらのセレクタに一致するページで実行されます。ただし、「Included URLs」リストに少なくとも1つのURLがある場合、キャンペーンはセレクタとURLルールの両方に一致するページでのみアクティブになります(これは、含まれるURLと除外されるURLのマスクの組合せです)。
例として、「Latest | Best Seller」セクションがページに存在する場合にキャンペーンをトリガーします。メニューのHTMLセレクタをキャンペーン・トリガーとして追加します。
トリガーを追加する手順は、次のとおりです。
- 「TRIGGERS」を選択します。
- HTMLセレクタを追加するには、
をクリックし、次に「Selector」をクリックします。 - HTMLセレクタは、手動で入力するか、「Select」をクリックしてページから視覚的に選択できます。
- キャンペーンのトリガーに使用するオブジェクトをページから選択します。このキャンペーンでは、トリガーとして「Latest | Best Seller」セクションを使用します。
- 右上の「CONFIRM」をクリックして、「Triggers」パネルに戻ります。「ADD」をクリックして、このセレクタをトリガーとして追加します。
- このキャンペーンは、「Latest | Best Seller」セクションがページに存在する場合は常に開始されます。セレクタ・トリガーは、
アイコンによってページ上で強調表示されます。 - このインジケータは、一致する最初のセレクタにのみ表示されるため、セレクタとして
<div>を選択した場合は、ページで最初の<div>にのみ表示されます。 - キャンペーンに戻ったら、キャンペーンの編集を始める前に、正しいページを表示していることを確認するためにヒントを表示できます。URLおよびセレクタが有効な場合は、
が表示されます。 - この例では、キャンペーンをトリガーするセレクタが1つあり、このページに存在します。
- URLまたはセレクタが有効でない場合は、
が表示されます。たとえば、この例では、セレクタsome-selectorはページに存在しません。
トリガー・パネルでURLまたはセレクタ・トリガーを追加できます。
ノート: ページ上のオブジェクトを選択する場合、左側のアウトライン・ビューまたは下部のブレッドクラムを使用することもできます。
完全リフレッシュが行われなくても、キャンペーンによって、適切なページでキャンペーン・エクスペリエンスが自動的にアクティブ化されて配信されるようになります。この「SPA Support」オプションは、要素の「Included URLs」セクションにhttp*://*を追加して、サイト全体をリスニングできるようにします。その要素内のすべてのバリアントがサイト全体に配信されます。次に、URLまたはセレクタ・トリガーを構成して、バリアントが実行される場所を制御します。コンテンツの変更は、訪問者がこれらのトリガー条件を満たすページを訪問した場合にのみ表示されます。
ノート: キャンペーンについて「SPA Support」を有効にしていて、「TRIGGERS」ボタンが表示されない場合は、古いバージョンのSPAサポートを使用している可能性があります。アップグレードするには、My Oracle Support (MOS)またはOracle Maxymiser担当者にお問い合せください。
バリアントコンテンツの作成
バリアントを変更するには、バリアントを選択し、プロパティ・パネルを使用するか、コード・エディタを使用します。バリアント・コンテンツの様々な編集方法については、コンテンツの編集の項を参照してください。
開発者は、APIを使用してSPAキャンペーンをコーディングできます。手動コードはビジュアル・エディタと互換性がない可能性があるため、1つのキャンペーンでビジュアル編集と手動コーディングの両方を一緒に使用することはお薦めしません。
アクションの追加
アクションを追加して、キャンペーンの成功を測定します。この例では、SPAキャンペーンに「Track Clicks」アクションを追加します。
アクションを追加する手順は、次のとおりです。
-
「Action」パネルでプラス・アイコンをクリックし、「Track Clicks」を選択します。
-
クリックをトラッキングするサイト上のオブジェクトを選択し、「Attach」を選択します。
SPAキャンペーンに追加されたアクションは要素と同じアプローチを使用し、すべてのアクション・スクリプトはhttp*://*に配信されます。これは、アクションの「Included URLs」セクションに表示されます。
「Attach」ボタンをクリックすると、URLトリガーが移入され、アクション・スクリプトの構成セクションに追加されます。これらのURLトリガー条件が満たされると、アクションが追跡されます。アクション・スクリプトにセレクタ・トリガーを手動で追加することもできます。
キャンペーンへのアクションの追加の詳細は、次を参照してください:
キャンペーンのQA
キャンペーンが「Implementation」状態の間は、Webサイト訪問者に表示されません。これはサンドボックス(テスト環境)内にあり、キャンペーンを稼働中にする前にテストできます。キャンペーンのQAを行う準備ができたら、QAツールを使用してキャンペーンをテストできます。
キャンペーンの公開
キャンペーンをテストしたら、公開センターを使用して、サンドボックスから、訪問者にキャンペーン・コンテンツが表示される本番環境にキャンペーンを転送します。
関連項目
シングル・ページ・アプリケーション・キャンペーンに関するFAQ
詳細は、Campaign Designer APIドキュメントを参照してください。