ポップアップモーダルとフォームを管理する

注記

2023 年 4 月より前にキャンペーンにアクセスしていた場合、Optimizely はタブ名を [キャンペーン]から[アクティベーション]に更新しました。 すべての機能は同じままです。 

アクティベーションページを使用して、Web サイト上で魅力的なポップアップ モーダルやフォームを起動し、顧客に関する情報を収集したり、オファーやプロモーションを表示したりできます。 

Web サイトにポップアップ モーダルとフォームを追加するには、サイトのコンテンツにOptimizely Data Platform (ODP) Javascript タグを含める必要があります。

Web キャンペーンにポップアップ モーダルを追加する

1. 「アクティベーション」>「エンゲージ」>「新しいキャンペーンの作成」に移動します。
2. Webを選択します。
3. Web キャンペーン レシピを選択するか、 [最初から作成]をクリックします。
4. キャンペーン名を入力してください。
5. [登録]セクションはデフォルトで[すべての訪問者]に設定されています。 このキャンペーンのオーディエンスとしてリアルタイム セグメントを使用する場合は、リストから 1 つ選択します。
6. タッチポイントを編集し、 Web モーダルを選択して、コンテンツの設計と構成を開始します。

Web モーダル ターゲットを構成する

[ターゲット]セクションで、このコンテンツをサイト上のどこに表示するかを選択します。 

• ページ URL – 展開して、 [ページ URL] 、 UTMパラメータ、またはターゲットの場所のカスタム クエリ パラメータを選択します。
• を含む– 展開して[含む] 、 [等しい] 、 [含まない] 、または [次と等しくない]を選択し、指定された場所をターゲットにする方法を決定します。
• URL スニペットまたはパス– ターゲットとする URL スニペットまたはパスを入力します。
• または– OR演算子を使用して、より多くのページまたはパラメータをターゲットにすることができます。
• And – AND演算子を使用して、より多くのページまたはパラメータをターゲットにすることができます。
• 削除– 定義済みのターゲットを削除する場合は、ターゲット行の上にカーソルを置き、削除アイコンをクリックします。

Web モーダル トリガーを構成する

[トリガー]セクションで、このコンテンツをサイトに表示するタイミングを選択します。

• ページの読み込み時にすぐに表示– 顧客が選択したページのいずれかにアクセスしたときにコンテンツを表示します。 ODP は他のトリガーを無効にして、繰り返しの表示を防ぎます。
• 後で表示– 割り当てられた時間の後にコンテンツを表示します。
• X% ページ スクロールで表示– 顧客がページの一定の割合をスクロールした後にコンテンツを表示します。
• 終了意図時に表示– 顧客のマウスがアクティブ ウィンドウから離れたときにコンテンツを表示し、顧客がページを離れる意図があることを示します。

手動トリガー (上級) カスタム基準に基づいて Web コンテンツを手動で表示するために、ODP は開発チーム向けの SDK メソッドを提供します。 

zaius.dispatch(
'web',
'showContent', {
contentId: '<insert_content_id>',
target: {
selector: '<insert css selector>', // empty string for modals
position: 'modal' // modal | before | after | inside | replace
}
});

このスニペットを使用して、顧客がカートに商品を追加するときなど、カスタム シナリオでコンテンツをトリガーします。

Web モーダル制約を構成する

[制約]セクションで、コンテンツを訪問者に表示する頻度を選択します。

• 訪問者ごとに X 日ごとに最大 X 回表示– 顧客が 1 つの期間内に大量のコンテンツを表示しないように制限します (たとえば、週に 1 回)。
• 訪問者あたり合計 X 回まで表示– 顧客が合計 X 回を超えてコンテンツを閲覧できないように制限します (たとえば、合計 3 回)。
• モバイルで表示– モバイル デバイスでのコンテンツの利用可能性を決定します。 これはデフォルトでは無効になっており、 Google のポリシーにより推奨されません。 Google は、Cookie の確認など、場合によってはこのコンテンツが適切であるとみなしますが、この設定を有効にすると、会社の検索エンジン最適化 (SEO) に悪影響を及ぼす可能性があります。

Web モーダルをデザインする

新しいデザインを開始する前に、 [テンプレートの読み込み] ドロップダウン リストをクリックして、チームがテンプレート ツールを使用して作成した、事前に作成されたポップアップ モーダルとフォームから選択します。 さらにカスタマイズしたり、名前を変更したりできます。 既製のデザインがない場合は、新しいコンテンツの名前を入力します。

Web モーダル要素

レイアウト

Web コンテンツには、セクションで構成された構造が必要です。 要素をドラッグ アンド ドロップしてモーダル内の目的の場所に配置し、モーダル内の要素をクリックして、[詳細]タブを使用して形式、間隔、リンク、その他の設定を変更します。 

• セクション– コンテンツを保持するスペース。 新しいセクションを配置して、ヘッダーやテキストなどの新しいタイプのコンテンツを配置します。 すべての列とグリッドには個別のセクションが含まれます。
• レスポンシブ列– モバイルデバイス上で応答またはラップする列。 詳細から、左から右など、列の応答方法を選択できます。
• グループ化された列 –モバイルでは折り返されない列のセット。 折り返す代わりに縮小したいテキストベースの列には、グループ化された列を使用します。
• グリッド– 特定の数の列と行。
• 製品グリッド–製品の推奨事項が入力されたグリッド。
• ナビゲーション– 顧客を追加コンテンツに誘導するために使用できる編集可能なリンク。

基本的な内容 

これらの要素を使用して、ポップアップ モーダルまたはフォームにコンテンツを追加します。 要素をドラッグ アンド ドロップしてモーダル内の目的の場所に配置し、モーダル内の要素をクリックして、[詳細]タブで形式、間隔、リンク、その他の設定を変更します。

Create-popup-2.png

• ヘッダー– H1 ヘッダー領域。 ポップアップ モーダルやフォーム内のタイトルのみなど、控えめに使用してください。
• テキスト– リッチ テキスト領域。
• 画像– 画像領域。
• ボタン– ボタン。 ハイパーリンクを追加して行動喚起を作成し、顧客を別のアクションや追加のコンテンツに誘導します。
• ディバイダー– コンテンツのセクション間の分割線。
• スペーサー– コンテンツのセクション間のスペース。
• ソーシャル– ソーシャル メディアのアイコン。
• Raw HTML – コンテンツを詳細に制御するための HTML 領域。 ただし、プレビューと顧客に表示される Web コンテンツには違いが見られる場合があります。 これは、HTML マークアップ言語に精通している場合にのみお勧めします。

フォーム

ポップアップ フォームを作成して、コンテンツとともに情報を収集します。 要素をドラッグ アンド ドロップしてモーダル内の目的の場所に配置し、モーダル内の要素をクリックして [詳細]タブを使用して形式、間隔、リンク、その他の設定を変更します。 これらのオプションを使用して、特定のフィールドを必須にし、フォーム送信にフィールドが含まれる場合にそのフィールドによって更新されるプロファイル属性を選択します。

• テキスト ボックス– 電子メール アドレスや名前などの顧客情報を取得するための 1 行のテキスト フィールド。
• チェックボックス– メーリングリストに登録したり、個々のプロファイル属性を更新したりするためのチェックボックス フィールド。 顧客は複数の値を選択できます。
• 送信ボタン– フォームを送信できるようにする独自のボタンです。 フォームに追加できる送信ボタンは 1 つだけです。
• ラジオ ボタン– オプションのグループを表示し、関連するプロファイル属性を更新するためのラジオ ボタン フィールド。 顧客は値を 1 つだけ選択できます。
• ドロップダウン– オプションのグループを表示し、関連するプロファイル属性を更新するためのドロップダウン フィールド。 顧客は 1 つの値のみを選択できます。

注記

ODP は、Web コンテンツにフォーム要素が含まれている場合、電子メール、オプトイン、送信ボタンのフィールドを自動的に検証します。 これらのフィールドを追加していない場合、 Web サイトにフォームは表示されません。

ウェブモーダルの詳細

設定を変更してコンテンツ全体に影響を与えることができます。 詳細にアクセスするには、パンくずリストのコンテナーオプションをクリックするか、Web コンテンツの背景をクリックします。

Create-popup-5.png

コンテナのプロパティ

• 背景色– ポップアップまたはフォームの色。
• コンテンツの幅 –ポップアップまたはフォームのピクセル単位の幅。
• コンテンツの高さ– ポップアップまたはフォームの高さ。 このプロパティはデフォルトでautoに設定されています。 トグルをオンにして、特定の高さをピクセル単位で設定します。

モーダルプロパティ

• 背景の色– Web コンテンツの背後にある Web ページの色。
• 閉じるボタン– コンテンツを閉じるための特定のボタン。 [閉じるボタン]を無効にすると、顧客は代わりにコンテナの外側をクリックしてモーダルを閉じることができます。
• 閉じるボタンの位置– 有効になっている場合の閉じる位置。
• 閉じるボタンの背景色– ボタンの後ろの色。 ボタンをより目立つようにするには、対照的な色を使用します。
• 閉じるボタンのアイコンの色– 閉じるボタンの色

テキストのプロパティ

• フォント ファミリー– ポップアップまたはフォームで使用されるフォント。
• フォントのウェイト– ポップアップまたはフォームで使用されるフォントのウェイト。
• フォントの色– ポップアップまたはフォームのフォントの色。
• フォント サイズ– ポップアップまたはフォームで使用されるフォントのサイズ。

リンクプロパティ

• リンクの色– ポップアップまたはフォームに含まれるリンクの色。
• リンクの下線– このトグルを有効にすると、リンクのスタイルに下線が付きます。

コンテンツ設定

• 重複した製品を削除– 有効にすると、重複した製品が製品グリッドに表示されなくなります。

パディング

• パディング– その他のオプションを有効にして、特定の方向からパディングを適用します。
• すべての面– フォームまたはポップアップのコンテンツに適用するパディングの量を決定します。 パディングを増やすと、コンテンツが中央に移動します。 パディングを減らしてコンテンツを端に向かって移動します。

国境 

• 境界線– [その他のオプション] を有効にして、ポップアップまたはフォームの各辺の境界線のサイズとスタイルを個別に決定します。
• すべての辺– コンテンツに境界線を追加するには、このオプションを使用します。 増やすと線が太くなります。 減らすと線が細くなります。

境界半径

このオプションを使用して、フォームまたはポップアップの境界線を丸くします。 正方形のような鋭いエッジを持たせるには0を使用します。 数値を大きくすると境界線が丸くなります。 

[その他のオプション]を有効にして、ポップアップまたはフォームの各辺の境界線の半径を個別に決定します。

メインデザインと確認デザインを設定する

コンテンツに、送信ボタンの成功アクションによって別のページにリダイレクトされないフォームが含まれている場合、メイン デザインと確認デザインを切り替えることができます。 メインのデザインを切り替えて、コンテンツが最初に表示されたときに顧客に何が表示されるかを確認します。 確認デザインを切り替えて、顧客がフォームを正常に送信した後に表示される内容を確認します。

Web モーダルをプレビューする

Web サイトのページの 1 つでポップアップまたはフォームをプレビューできます。 プレビューにはすべてのトリガーが表示されますが、すべての制約は無視されます。

1. プレビューをクリックします。 
   
2. プレビューに使用するページの URL を入力します。 ODP は、選択したページを「ターゲット」セクションで設定したルールと照合してチェックするため、それが有効なページであることを確認してください。
3. [プレビューの生成]をクリックします。

Web モーダルをアクティブ化する

Web サイト訪問者が Web モーダルまたはフォームを利用できるようにするには:

1. 「保存」をクリックします。
2. パンくずリストからキャンペーンの名前を選択します。
3. 「Go Live」をクリックし、 「はい、Go Live」をクリックして確認します。