ポップアップモーダルとフォームを管理する

Optimizelyマニュアル｜Optimizelyのアクティベーションページを使用して、Webサイトで魅力的なポップアップモーダルとフォームを作成、ターゲット設定、トリガーする方法を説明します。

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

注記

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

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

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

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

「アクティベーション」>「エンゲージ」>「新しいキャンペーンの作成」に移動します。
Webを選択します。
Web キャンペーンレシピを選択するか、 [最初から作成]をクリックします。
キャンペーン名を入力してください。
[登録]セクションはデフォルトで[すべての訪問者]に設定されています。このキャンペーンのオーディエンスとしてリアルタイムセグメントを使用する場合は、リストから 1 つ選択します。
タッチポイントを編集し、 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 コンテンツには、セクションで構成された構造が必要です。要素をドラッグアンドドロップしてモーダル内の目的の場所に配置し、モーダル内の要素をクリックして、[詳細]タブを使用して形式、間隔、リンク、その他の設定を変更します。

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

基本的な内容

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

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

フォーム

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

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

注記

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

ウェブモーダルの詳細

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

コンテナのプロパティ

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

モーダルプロパティ

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

テキストのプロパティ

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

リンクプロパティ

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

コンテンツ設定

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

パディング

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

国境

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

境界半径

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

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

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

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