ライトボックスの作成

コンバージョンやエンゲージメントを促進するパーソナライズされたメッセージやコンテンツを表示するライトボックスを構成できます。

ライトボックスは、次のトリガー・シナリオのように、ユーザー・アクションと配信するメッセージに基づいてポップアップするようにトリガーできます。

  • On Page Load: 訪問者が初めてサイトにアクセスしたとき(または指定した遅延の後)に注意を引くことが必要である場合、Webサイトで現在実行されている販売オファーを表示できます。メインのコールツーアクション(CTA)により、セール・ページに直接移動します。
  • If mouse is idle: 訪問者の操作が止まっている場合に、人気アイテム、お急ぎください残りわずか3個といった希少性を伝えるメッセージを表示できます。
  • 「When Mouse Leaves Viewport」または「When Page Loses Focus」: 今すぐチェックアウトした場合に次回購入時の割引を提示するなど、サイトを離れようとしている訪問者にオファーを表示します。
  • On JavaScript Event: 「On JavaScript」イベント・トリガーを使用する独自のトリガーを記述できます。たとえば、訪問者がカートにアイテムを追加したときに、アイテムがカートに追加されたことを知らせ、ブラウズを続けるか、今すぐチェックアウトするかを確認するメッセージを表示することによって、チェックアウトを促すことができます。
  • Triggers: ページ上の任意のオブジェクトについて「On Click」「On Hover」または「On Mouse」トリガーを作成できます。たとえば、訪問者がサイトで「Sale」リンクをクリックしたときに、今週はすべてのセール・アイテムがさらに10%オフになることを説明するメッセージを表示できます。

次の例は、訪問者がアイテムをカートに追加したときにチェックアウトを促すライトボックスを示しています。

次回のオーダーが30%オフになるオファーを示すライトボックスのイメージ

ターゲッティング

ターゲッティングを使用して、適切な訪問者に適切なときにライトボックスが表示されるようにすることができます。たとえば、クライアントが前に靴を閲覧したことがわかっている場合、サイトを再訪したときに、いくつかの新着商品を含むライトボックスを靴のセクションに表示できます。

モバイル・デバイスでライトボックスをテストする必要があります。一部のデバイスで正しく表示されない場合は、デスクトップとモバイル用に個別のテストを設定することをお薦めします。

詳細は、パーソナライズの概要および特定の訪問者をキャンペーンのターゲットにするを参照してください。

アクション

対象とするCTAに基づいてキャンペーンのライトボックスの成功を測定できるように、アクションを追加できます。編集またはアクションのトラッキングの対象とするページ上の要素の選択を参照してください。

頻度

ライトボックスを表示する頻度は、コンテンツに応じて決定します。「Always show」を選択する場合は、ライトボックスが頻繁に表示されることによって、訪問者が不快に感じたり、サイトにおける訪問者の操作が中断する可能性があることに注意してください。訪問者がライトボックスを閉じたら、不快にさせないよう、次回からライトボックスを表示しないようにすることができます。また、時間、日、週、月、セッションまたはキャンペーン単位で何回かライトボックスを表示するようにカスタムの頻度を設定することもできます。

閉じる

訪問者がライトボックスを閉じるための様々な方法を指定できます。たとえば、閉じるボタンをクリックしたり、ライトボックスをクリックできます。

特にモバイル・デバイスでは、訪問者がライトボックス全体を表示でき、閉じるボタンを探すためにスクロールする必要がないことを確認してください。

設計

Campaign Designerの編集ツールを使用して、ライトボックスの設計を完成させることができます。次に例を示します。

  • Opacity: ライトボックス・オーバーレイが暗すぎると、訪問者には現在のページが見えなくなります。明るすぎると、訪問者がライトボックスに気付かないで、混乱する可能性があります。
  • Resize: ライトボックスの各辺にあるサイズ変更ハンドルをドラッグしてサイズを変更できます。
  • リッチ・テキスト・エディタ: デフォルト・コンテンツのテキストを変更できます。リッチ・テキスト編集を参照してください。

次のビデオは、今週はすべてのセール・アイテムがさらに10%オフになることを訪問者に知らせるライトボックスの作成を示しています。これは、10秒の遅延の後、それぞれの訪問者について1日1回のみ表示されます。訪問者が閉じるボタンをクリックするか、ライトボックスをクリックした場合、次回からはライトボックスが表示されません。

次のビデオは、訪問者が「Sale」リンクの上にマウスを置いたときに、今週はすべてのセール・アイテムがさらに10%オフになることを説明するライトボックスを表示する方法を示しています。

次のサンプル・コードでは、訪問者がページを下に200 px分スクロールしたときにライトボックスを表示するトリガーが指定されています。

   $(window).scroll(function() {
       var height = $(window).scrollTop();
       if (height > 200) {
           events.trigger('DenimDayLightbox');
       }
   });

「Interactions」パネルで、「On JavaScript Event」トリガーにDenimDayLightboxと入力します。Engageによって、バリアント・コードまたはキャンペーン・スクリプト内からコールできるトリガーが自動的に作成されます。

さらに学ぶ

コールアウトの作成

スティッキー・バーの作成

リッチ・テキスト編集

Oracle Responsysサインアップ・ライトボックスの作成

ポップアップ, ライトボックス, オーバーレイ, モーダル, 頻度, On Page Load, On JavaScript Event