DXable Manual
Optimizely製品サイトへお問い合わせ
Optimizely
Optimizely
  • Optimizelyマニュアル
  • 本記事はOptimizelyが公開している英文ドキュメンテーションをそのまま日本語に翻訳したものです。日本語環境での動作を保証するわけではありません。最新の原文はこちらを参照してください。
  • プラットフォーム
    • Optimizelyデータプラットフォーム
      • 始めましょう
        • ODPを始めましょう
        • ODPのデータの概要
        • ODPでの顧客の追跡
        • 標準イベント定義
        • eコマースデータの統合
        • プロモーションのニュースレター/キャンペーンの作成
        • ODPパススルー環境
      • リリースノート
        • 2024 ODPリリースノート
        • 2023 ODPリリースノート
        • 2022 ODPリリースノート
      • アカウント設定
        • ユーザーの役割と権限の設定
        • タイムゾーンと通貨記号の管理
        • スコープを使用したデータビューの作成
        • カスタムフィールドの作成
        • アクティビティーログの使用
        • イベントの検査
        • サポートへの連絡
      • 顧客
        • 顧客のIDと解決策の概要
        • 顧客のライフサイクルの分析
        • 離脱を防ぎ、顧客を取り戻す
        • 顧客プロファイルの管理
        • 顧客プロファイルのエクスポート
        • 標準セグメントの作成
        • GraphQLでの構築済みリアルタイムセグメントによるパーソナライズ
        • ODPでのリアルタイムセグメントの構築
        • リアルタイムセグメントのサイズ見積もり
        • リアルタイムセグメントに関するよくある質問
        • リストの作成、インポート、管理
        • ファネル顧客の行動
      • 統合
        • 地域ごとに利用可能なODPの統合
        • APIとZaiusチャネルの統合
        • Brontoの統合
        • Amazon S3の統合
        • Criteoの統合
        • Facebook Segment Syncの統合
        • Facebook Lead Captureの統合
        • Google Audience Syncの統合
        • Googleタグマネージャー(GTM)の統合
        • Gorgias Syncの統合
        • HubSpot Email Syncの統合
        • HubSpot Marketing Segment Syncの統合
        • JustUnoの統合
        • Klaviyoの統合
        • Klevuの統合
        • LoyaltyLionの統合
        • Magento v1の統合
        • Magento v2の統合
        • Mailchimpの統合
        • mParticle Segment Syncの統合
        • Oracle Marketing Cloud (Responsys)の統合
        • Poplarの統合
        • Privyの統合
        • ReChargeの統合
        • Salesforce Marketing Cloud Audience Syncの統合
        • Salesforce CRM Syncの統合
        • Salesforce Marketing Cloud Campaign Data Syncの統合
        • Salesforce Marketing Cloudの統合(ExactTarget)(レガシー)
        • Segmentの統合(レガシー)
        • SendGridの統合
      • コンテンツのパーソナライズ
        • メールの内容のパーソナライズ
        • おすすめ商品
        • 行動の管理
        • フィルターの管理
        • コンテンツシールドフィルターの構成
        • ダイナミックグリッドコンテンツのフィルタリング
        • ダイナミックグリッドでのタイムフレームの使用
        • ダイナミックグリッド内の重複した製品の削除
        • オプションコンテンツでのパーソナライズ
        • ODPの高度なLiquid機能
      • 会社概要、製品、レポートなど
        • 会社概要ページの指標の解釈
        • ODPの洞察と観察の表示
        • 次回注文レポートまでの予測時間の管理
        • 注文の可能性と次の注文までの日数レポートフィルターの理解
        • 製品機会レポートの管理
        • カスタムレポートの使用
        • 3つのカスタムレポートでのキャンペーン指標の評価
        • レポートの保存
        • 製品ディレクトリーを使用した製品フィードの表示
        • ODPとGoogle Analyticsの間でのトレンドの一致
        • 顧客インサイトのトラブルシューティング
      • コンプライアンスと同意
        • 暗黙的および明示的なマーケティング同意
        • SMSの同意とコンプライアンスの理解
        • EU一般データ保護規則(GDPR)およびカリフォルニア州消費者プライバシー法(CCPA)リクエストの処理
        • Appleのメールプライバシー保護がODPに与える影響
      • キャンペーンへの取り組み
        • モバイルビューとデスクトップビューの使用
        • テスト対象者の拡大
        • キャンペーン設定の基本
        • キャンペーン登録の構成
        • A_Bテストキャンペーンのタッチポイント
        • ウェブモーダルを使用してSMS購読者を収集する
        • キャンペーンをエミュレートする
        • キャンペーングループの作成と管理
        • オムニチャネルキャンペーンを作成する
        • トランザクションメールを作成する
        • キャンペーンシリーズの終了を追加
        • キャンペーンのステータスとアクション
      • キャンペーンのパフォーマンス
        • キャンペーン間のパフォーマンスを測定する
        • 個々のキャンペーンのパフォーマンスを測定する
        • キャンペーンアトリビューションレポートを管理する
        • タッチポイントの概要レポートを表示する
        • キャンペーンのフィルタリング
        • キャンペーンのメトリクス
        • キャンペーンのアトリビュート
        • 合計および固有のキャンペーン指標
        • SendGrid UTMをオーバーライドする
        • クリックスルーステッチを使用する
      • キャンペーンコンテンツ
        • メールコンテンツをデザインする
        • キャンペーンのテンプレートを管理する
        • ウェブ埋め込みを管理する
        • SMSコンテンツの管理
        • ポップアップモーダルとフォームを管理する
        • アプリのプッシュ通知を作成する
        • ウェブプッシュ通知を作成する
        • ウェブプッシュ通知を有効にする
        • ウェブコンテンツをプレビューする
      • キャンペーンレシピ
        • ライフサイクルマーケティングキャンペーン
        • キャンペーンレシピを利用する
        • お客様への感謝とオファー
        • ホリデーレシピ
        • ReChargeを使用したサブスクリプションレシピ
        • 放棄キャンペーンを閲覧する
        • カート放棄キャンペーン
        • 注文受付
        • ウェルカムシリーズ
        • 誕生日キャンペーン
        • 購読者収集キャンペーン
        • SMS確認を作成する
        • キーワードによるSMSキャンペーン
        • Zaius Channelを使用して顧客のSMS同意ステータスを更新する
      • メール設定
        • GmailおよびYahooのメール送信者の要件
        • メールキャンペーンのリンクブランディング
        • メール送信の準備をする
        • 送信ドメインを確認する
        • 送信ドメインを認証する
        • 送信者プロファイルを作成する
        • プリファレンスセンターをデザインする
        • カスタムプリファレンスセンタードメイン
        • プリファレンスセンターを使用して顧客を更新する
        • 到達可能性とメールのステータス
        • IPウォーミングを理解する
    • Opti ID
      • インストールとセットアップ
        • 技術連絡先ログイン
        • Opti ID をインストールする
        • SAMLを使用してOpti IDでSSOを構成する
        • OIDCを使用してOpti IDでSSOを構成する
        • 多要素認証を設定する
        • グループをSSOプロバイダーと同期する
        • 組織ドメインを設定する
      • 管理
        • Opti IDの管理
        • ユーザー
        • 役割
        • グループ
        • 招待
        • 外部コラボレーターをSSO組織に追加する
        • 使用状況と請求のダッシュボード
      • トラブルシューティング
        • SSO:サインインのトラブルシューティング
        • SSO: SAML Tracer を使用してサービス プロバイダーが開始したフローを分析する
        • HARファイルの生成と分析
      • リリースノート
        • 2023 Opti IDリリースノート
    • Optimizely製品統合
      • Configured Commerce+PIM統合
        • Configured Commerceのアップグレード:Optimizely Product Information Managementコネクター
        • Optimizely Configured CommerceでOptimizely Product Information Management同期ジョブをセットアップする
        • PIM の更新を Configured Commerce に公開する
      • Customized Commerce+PIM統合
        • Optimizely Customized CommerceとOptimizely Product Information Managementの統合
        • Optimizely Customized CommerceクラスをOptimizely Product Information Managementテンプレートにエクスポートする
  • Configured Commerce
    • Optimizely Configured Commerce
      • Configured Commerce SDKのリリースノート
        • SDKのリリースとダウンロード
        • Optimizely 構成のコマース SDK v5.2 リリース
        • Configured Commerce SDK 5.2 のアップグレード手順
        • サポートされているバージョン
        • Optimizely 構成のコマース SDK v5.1 リリース
        • Configured Commerce SDK 5.1 のアップグレード手順と考慮事項
        • オンプレミスおよび SDK v4.4 のサポートは 2021 年 5 月31 日に終了しました
      • Vendor Managed Inventory(VMI)
        • Vendor Managed Inventoryの概要
        • VMIをセットアップする
        • ロケーションの設定と編集
        • 製品のSet upと管理
        • ユーザーのSet upと編集
        • レポートの使用
      • データ保護
        • Optimizely のサイバーセキュリティとコンプライアンスに関する一般声明
        • プライバシーポリシーのガイダンス
        • セキュリティ評価
        • ホワイトペーパー: 構成されたコマース統合 HTTP と VPN
        • 災害復旧情報
      • マーケティング
        • リスト、顧客、またはウィッシュリスト商品をインポートする
        • 製品バッジを使用する
        • 顧客セグメント
        • 顧客セグメントルールに含めるルールタイプを選択する
        • 注文番号と顧客番号のプレフィックスと形式をカスタマイズする
        • URLの操作
      • 検索
        • Elasticsearch v5 から Elasticsearch v7 への変更
        • 検索ブーストに属性タイプを追加する
        • Elasticsearch の種類とインデックス_クエリ アナライザー
        • Fractional Number Search
        • 結果内でフィルタリングと検索
        • 製品の比較
        • 検索の概要
        • 検索設定
        • 検索インデックスの概要
      • コネクターと統合
        • 統合技術の概要
    • Optimizely 製品情報管理 (PIM)
      • PIMを始める
        • PIMを始める
        • Configured Commerce で実装する
        • Optimizely PIMとカスタマイズされたコマースを実装する
        • インポートの概要
        • データの設計上の考慮事項
        • 顧客に対してデータがどのように表示されるかを確認する
        • 運用開始チェックリスト
        • ダッシュボードを操作する
      • リリースノート
        • Optimizely 製品情報管理リリースノート
      • Settings
        • 設定を構成する
      • ユーザー
        • Optimizely 製品情報管理における役割と権限を理解する
        • Optimizely製品情報管理にチームメンバーを追加する
      • 多言語
        • 翻訳のインポートとエクスポート
GitBook提供
このページ内
  • ポップアップモーダルとフォームを管理する
  • Web キャンペーンにポップアップ モーダルを追加する
  • Web モーダルをデザインする
  • メインデザインと確認デザインを設定する
  • Web モーダルをプレビューする
  • Web モーダルをアクティブ化する
  1. プラットフォーム
  2. Optimizelyデータプラットフォーム
  3. キャンペーンコンテンツ

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

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

前へSMSコンテンツの管理次へアプリのプッシュ通知を作成する

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

注記

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

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

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

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 回)。

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

Web モーダル要素

レイアウト

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

  • セクション– コンテンツを保持するスペース。 新しいセクションを配置して、ヘッダーやテキストなどの新しいタイプのコンテンツを配置します。 すべての列とグリッドには個別のセクションが含まれます。

  • レスポンシブ列– モバイルデバイス上で応答またはラップする列。 詳細から、左から右など、列の応答方法を選択できます。

  • グループ化された列 –モバイルでは折り返されない列のセット。 折り返す代わりに縮小したいテキストベースの列には、グループ化された列を使用します。

  • グリッド– 特定の数の列と行。

  • ナビゲーション– 顧客を追加コンテンツに誘導するために使用できる編集可能なリンク。

基本的な内容

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

  • ヘッダー– H1 ヘッダー領域。 ポップアップ モーダルやフォーム内のタイトルのみなど、控えめに使用してください。

  • テキスト– リッチ テキスト領域。

  • 画像– 画像領域。

  • ボタン– ボタン。 ハイパーリンクを追加して行動喚起を作成し、顧客を別のアクションや追加のコンテンツに誘導します。

  • ディバイダー– コンテンツのセクション間の分割線。

  • スペーサー– コンテンツのセクション間のスペース。

  • ソーシャル– ソーシャル メディアのアイコン。

  • Raw HTML – コンテンツを詳細に制御するための HTML 領域。 ただし、プレビューと顧客に表示される Web コンテンツには違いが見られる場合があります。 これは、HTML マークアップ言語に精通している場合にのみお勧めします。

フォーム

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

  • テキスト ボックス– 電子メール アドレスや名前などの顧客情報を取得するための 1 行のテキスト フィールド。

  • チェックボックス– メーリングリストに登録したり、個々のプロファイル属性を更新したりするためのチェックボックス フィールド。 顧客は複数の値を選択できます。

  • 送信ボタン– フォームを送信できるようにする独自のボタンです。 フォームに追加できる送信ボタンは 1 つだけです。

  • ラジオ ボタン– オプションのグループを表示し、関連するプロファイル属性を更新するためのラジオ ボタン フィールド。 顧客は値を 1 つだけ選択できます。

  • ドロップダウン– オプションのグループを表示し、関連するプロファイル属性を更新するためのドロップダウン フィールド。 顧客は 1 つの値のみを選択できます。

注記

ウェブモーダルの詳細

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

コンテナのプロパティ

  • 背景色– ポップアップまたはフォームの色。

  • コンテンツの幅 –ポップアップまたはフォームのピクセル単位の幅。

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

モーダルプロパティ

  • 背景の色– Web コンテンツの背後にある Web ページの色。

  • 閉じるボタン– コンテンツを閉じるための特定のボタン。 [閉じるボタン]を無効にすると、顧客は代わりにコンテナの外側をクリックしてモーダルを閉じることができます。

  • 閉じるボタンの位置– 有効になっている場合の閉じる位置。

  • 閉じるボタンの背景色– ボタンの後ろの色。 ボタンをより目立つようにするには、対照的な色を使用します。

  • 閉じるボタンのアイコンの色– 閉じるボタンの色。

テキストのプロパティ

  • フォント ファミリー– ポップアップまたはフォームで使用されるフォント。

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

  • フォントの色– ポップアップまたはフォームのフォントの色。

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

リンクプロパティ

  • リンクの色– ポップアップまたはフォームに含まれるリンクの色。

  • リンクの下線– このトグルを有効にすると、リンクのスタイルに下線が付きます。

コンテンツ設定

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

パディング

  • パディング– その他のオプションを有効にして、特定の方向からパディングを適用します。

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

国境

  • 境界線– [その他のオプション] を有効にして、ポップアップまたはフォームの各辺の境界線のサイズとスタイルを個別に決定します。

  • すべての辺– コンテンツに境界線を追加するには、このオプションを使用します。 増やすと線が太くなります。 減らすと線が細くなります。

境界半径

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

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

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

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

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

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

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

  2. [プレビューの生成]をクリックします。

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

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

  1. 「保存」をクリックします。

  2. パンくずリストからキャンペーンの名前を選択します。

モバイルで表示– モバイル デバイスでのコンテンツの利用可能性を決定します。 これはデフォルトでは無効になっており、 により推奨されません。 Google は、Cookie の確認など、場合によってはこのコンテンツが適切であるとみなしますが、この設定を有効にすると、会社の検索エンジン最適化 (SEO) に悪影響を及ぼす可能性があります。

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

製品 グリッド–が入力されたグリッド。

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

プレビューをクリックします。

「Go Live」をクリックし、 「はい、Go Live」をクリックして確認します。

Google のポリシー
テンプレート ツール
製品の推奨事項
Web サイトにフォームは表示されません
Optimizely Data Platform (ODP) Javascript タグ
リアルタイム セグメント
Create-popup-2.png
Create-popup-5.png