シングル・ページ・アプリケーション・キャンペーンに関するFAQ
シングル・ページ・アプリケーション(SPA)キャンペーンに関するよくある質問。
SPAキャンペーンは標準キャンペーンとどのように異なりますか。
標準キャンペーンでは、要素の一連のURLを定義して、バリアント・コンテンツが配信および実行される場所を決定します。SPAキャンペーンでは、URLを変更せずにページのコンテンツが変更されたり、コンテンツとは無関係にURLが変更される場合があります。SPAは、サイト内を移動するときにページ全体をリクエストする必要がないため、URLはページの状態に直接接続されません。したがって、URLトリガーとセレクタ・トリガーの両方があります。
ページにHTMLオブジェクトが存在することでバリアント・コンテンツをトリガーできます。たとえば、「Buy Now」ボタンがページに存在する場合にキャンペーンを表示します。このため、SPAキャンペーンの要素はサイト全体にマップされます。これは、「Campaign Settings」で「SPA Support」オプションを選択すると行われます。このオプションは、要素の「Included URLs」セクションにhttp*://*を追加して、サイト全体をリスニングできるようにします。
その要素内のすべてのバリアントがサイト全体に配信されます。次に、URLまたはセレクタ・トリガーを構成して、バリアントが実行される場所を制御します。コンテンツの変更は、訪問者がこれらのトリガー条件を満たすページを訪問した場合にのみ表示されます。
| キャンペーンを実行する場所 | ドメイン | Included URLs |
|---|---|---|
| 米国サイトのみ |
usa.mysite.com |
http*://usa.mysite.com*
|
| 英国サイトのみ |
uk.mysite.com |
http*://uk.mysite.com* |
SPAサポートがキャンペーンに対して無効になっているのはなぜですか。
キャンペーンを変更した後は、SPAサポートを有効にできません。「SPA Support」オプションを選択すると、キャンペーン構成が編集されます。これは、キャンペーンが正しく構成されていることを確認するために、キャンペーンを編集する前に必要です。
SPAキャンペーンでアクションはどのように動作しますか。
アクションは要素と同じアプローチを使用し、すべてのアクション・スクリプトはhttp*://*に配信されます。これは、アクションの「Included URLs」セクションに表示されます。
「Attach」ボタンをクリックすると、URLトリガーが移入され、アクション・スクリプトの構成セクションに追加されます。これらのURLトリガー条件が満たされると、アクションが追跡されます。アクション・スクリプトにセレクタ・トリガーを手動で追加することもできます。
SPAキャンペーンはどのようにページに配信されますか。
SPAキャンペーンでは、事前に(テスト・ページ・リクエストの前に)コンテンツが必要なため、コンテンツはすべてのページに配信されます。ページがトリガー条件を満たすと、コンテンツがレンダリングされ、訪問者に対してキャンペーンの生成が発生します。
SPAキャンペーンの場合、SPAキャンペーン・コンテンツが事前に(テスト・ページ・リクエストの前に)必要になるため、プラットフォームでコンテンツ・リクエストおよびコンテンツ・レンディション・イベントが分割されています。自動的に作成されるContentSeenアクションにより、Maxymiserは、成功したSPAキャンペーン・レンディションを訪問者のブラウザで取得できます。標準キャンペーン(SPA以外)を検討している場合、このイベントはキャンペーン・コンテンツが要求された時点で記録されます。
SPAモジュールはどのDOMイベントを使用しますか。
Campaign Design APIバージョン1.17では、マーケティング担当者および開発者が単一ページのWebサイトでテスト・キャンペーンを設計および構築する際に役立つSPAモジュールが導入されました。HTML5 pushStateイベントおよびDOM MutationObserverを使用して、場所の変更や特定のノードの外観などのカスタム・ルールに基づいてSPA Webサイトに変更を適用できます。
SPAキャンペーンは、同期タグのロードおよび非同期タグのロードと連動しますか。
MaxymiserタグはSPAキャンペーンに対して同期的に実装する必要があります。
SPAキャンペーンのAPIドキュメントはどこにありますか。
APIのSPAメソッドの完全なリストは、SPAのリファレンス・ドキュメントを参照してください。
SPAキャンペーンの「Script」セクションに<style></style>タグを追加できますか。
SPAキャンペーン内で<style></style>タグを使用しないことをお薦めします。これは、<script></script>タグの内側に追加するか外側に追加するかに関係なく適用されます。バリアント・コードが解析されるときに、<style></style>タグが見つかった場合、その中のCSSコードは残りのバリアントコードとは別に実行されます。これらはspa.when***ブロックを考慮せずに実行されるため、SPAトリガーに依存せず、サイト全体で実行されます。スタイル・タグは、コメント・アウトされたときに問題を引き起こす可能性があります。
SPAキャンペーンでサイト・スクリプトを使用できますか。
はい、SPAキャンペーンでサイト・スクリプトを使用できます。サイト・スクリプトのコードでは、条件およびそれらの条件が満たされるときのハンドラを指定する必要があります。これらのトリガーはSPA APIを使用して作成されます。次に例をいくつか示します。
例1
SiteScript1は、次のサイト・ページにマップされます。
- http*://www.test.com*サイト・ページ
SiteScript1コードは次のとおりです。
- spa.when(campaign.scope.element("body:contains(Hello)")).then(function(){alert('Hello!!!')}
結果:
- SiteScript1はすべてのhttp*://www.test.com*ページに配信されますが、アラートはサイト・ページにHelloテキストが存在する場合にのみ表示されます。
例2
SiteScript2は、次のサイト・ページにマップされます。
- http*://www.test.com*サイト・ページ
SiteScript2コードは次のとおりです。
- spa.when(campaign.scope.location("http://www.test.com")).then(function(){alert('Hello!!!')}
結果:
- SiteScript2はすべてのhttp*://www.test.com*ページに配信されますが、アラートはhttp://www.test.comページにのみ表示されます(httpsページには表示されません)。
現在、サイト・スクリプトのSPAトリガーは視覚的に設定できないため、コードで設定する必要があります。サイト・スクリプトは、標準サイトとSPAサイトで同じ方法で提供されるため、サイト・スクリプトをサイト全体にマップして、それがすぐに起動し、ページ自体によって行われたURL変更を取得できるようにすることをお薦めします。
使用できる高度なセレクタには何がありますか。
コードでは:has()または:contains()セレクタを使用できます。
- :has()は、カッコ内に少なくとも1つの要素が指定されている要素を選択します。
- :contains()は、指定されたテキストを含む要素を選択します。
例:
-
内部に特定のイメージを持つすべてのdivコンテナを検索する:has()セレクタ:
"div:has(img[src*='img-category3-873x270.jpg'])"
-
span.ctaタグの色を赤に変更するために、spa.dom.changeStyle内で使用されている:has()セレクタ:
spa.dom.changeStyle('div.product-tile:has(span.cta)', 'color: red');
-
Buyという単語を含むリンクを検索し、spa.dom.editHtmlを使用してテキストをBuy nowに置き換えるために使用されている: containsセレクタ:
spa.dom.editHtml('a:contains("Buy")', '<a href="/buy-me/">Buy now</a>');
詳細は、SPAのリファレンス・ドキュメントを参照してください。
QAツールで、名前がcsで始まる追加のアクションが表示されるのはなぜですか。
これは、自動的に作成されるContentSeenアクションです。SPAキャンペーンの場合、SPAキャンペーン・コンテンツが事前に必要になるため、プラットフォームでコンテンツ・リクエストおよびコンテンツ・レンディション・イベントが分割されています。ContentSeenアクションを使用すると、Maxymiserは、成功したSPAキャンペーン・レンディションを訪問者のブラウザで取得できます。標準キャンペーン(SPA以外)を検討している場合、このイベントはキャンペーン・コンテンツが要求された時点で記録されます。