Skip to content
Last updated

Popupキャンペーンの作成

Popupキャンペーンは、既存のコンテンツを変更せず、ページの上にオーバーレイとしてメッセージを表示し、注目を集めます。ウェルカムオファー、プロモーション告知、お知らせなど、視認性の高いメッセージに活用してください。

Beta

In-Browser MessagingはBeta版です。一般提供前に機能やSDKの仕様が変更される場合があります。アクセス方法については、カスタマーサクセス担当までご相談ください。

始める前に

キャンペーンを作成する前にセットアップと前提条件を完了してください。ターゲットとするペアレントセグメント用のRT PersonalizationとセクションがAudience Studioに存在することを確認してください。

ステップ 1 — Target Audience

  1. Engage Studioで In-Browser Messaging に移動し、Create をクリックします。
  2. ターゲティングを設定します。
In-Browser Message Target Audienceステップ。Target Parent Segment、Personalization、Personalization sectionフィールドが表示されています。
フィールド 説明
Target Parent Segment対象ユーザーを定義するRT 2.0のペアレントセグメント。評価時点でこのセグメントに属するユーザーのみがメッセージを受け取ります。
PersonalizationPersonalization Sectionに定義されたエントリー基準に基づいてリアルタイム配信を制御する、既存のRT 2.0 Personalization。Preview をクリックするとAudience StudioでPersonalizationを確認でき、Create Personalization をクリックすると新規作成に移動します。
Personalization Sectionこのキャンペーンのコンテンツペイロードを格納するPersonalization内の特定のセクション。セクションが存在しない場合は Create Section をクリックして追加します。
Personalizationを先に作成してください

Target Audienceの設定は既存のRT 2.0 Personalizationを参照します。このステップを開始する前に、Audience StudioでPersonalizationとセクションを作成しておいてください。

ステップ 2 — Message Content

キャンペーン詳細

フィールド 必須 説明
Message ID自動生成された一意の識別子。読み取り専用。
Nameキャンペーン一覧に表示される名前。最大100文字、ワークスペース内で一意である必要があります。
Descriptionキャンペーンに関する社内向けメモ。最大1,000文字。
Message TypePopup を選択します。この設定はキャンペーン保存後に変更できません。

レイアウト位置

ページ上でポップアップを表示する位置を選択します。

Placement 説明
centerビューポートの中央(デフォルト)
top-left左上コーナー
top-center上部中央
top-right右上コーナー
bottom-left左下コーナー
bottom-center下部中央
bottom-right右下コーナー

Fixed on Scroll を有効にすると、ユーザーがスクロールしてもポップアップが固定位置に表示されます。

アピアランス設定

ポップアップのビジュアルスタイルを設定します。

設定項目 説明
Desktop max widthデスクトップ画面でのポップアップ最大幅(デフォルト:600 px)。Beefreeはビューポート幅620 px以上でこの値をmax-widthとして使用します。
Mobile max widthモバイル画面でのポップアップ最大幅(デフォルト:300 px)。ビューポート幅620 px以下で適用されます。
Background colorポップアップフレームの背景色(16進数カラーコード、6桁または8桁)。
Background paddingポップアップコンテンツとフレーム端の間隔(デフォルト:0 px)。
Border radiusポップアップフレームの角の丸み(デフォルト:8 px)。
Close button閉じるボタンのオン/オフを切り替えます。有効にした場合、ボタンの色を設定できます。閉じるボタンはSDKによってレンダリングされ、ドラッグアンドドロップエディターのコンテンツには含まれません。
Overlayポップアップの背後に背景オーバーレイを表示するかどうかを切り替えます。有効にした場合、Close on click outside も有効にすると、オーバーレイクリックでポップアップを閉じることができます。
閉じる手段なし

閉じるボタンが無効かつオーバーレイクリックでの閉じる機能も無効の場合、ユーザーはポップアップを閉じることができません。この設定の場合、UIに警告が表示されます。

コンテンツエディター(ドラッグアンドドロップ)

キャンペーンの詳細を設定すると Popup Message Editor が開きます。ドラッグアンドドロップキャンバス(Beefree搭載)が左右2分割のレイアウトで表示されます。

Popup Message Editor。左パネルにMessage Appearance Settings(Location & PositioningとWidth設定)、中央にポップアップキャンバス、右パネルにCONTENT/ROWS/SETTINGSタブが表示されています。

左パネル — Message Appearance Settings

ポップアップの表示スタイルを設定します。

レイアウト位置

ページ上でポップアップを表示する位置を選択します。

Placement 説明
centerビューポートの中央(デフォルト)
top-left左上コーナー
top-center上部中央
top-right右上コーナー
bottom-left左下コーナー
bottom-center下部中央
bottom-right右下コーナー

Position fixed on scroll を有効にすると、ユーザーがスクロールしてもポップアップが固定位置に表示されます。

アピアランス設定

設定項目 説明
Desktop max widthデスクトップ画面でのポップアップ最大幅(デフォルト:600 px)。Beefreeはビューポート幅620 px以上でこの値をmax-widthとして使用します。
Mobile max widthモバイル画面でのポップアップ最大幅(デフォルト:300 px)。ビューポート幅620 px以下で適用されます。
Background colorポップアップフレームの背景色(16進数カラーコード、6桁または8桁)。
Background paddingポップアップコンテンツとフレーム端の間隔(デフォルト:0 px)。
Border radiusポップアップフレームの角の丸み(デフォルト:8 px)。
Close button閉じるボタンのオン/オフを切り替えます。有効にした場合、ボタンの色を設定できます。閉じるボタンはSDKによってレンダリングされ、ドラッグアンドドロップエディターのコンテンツには含まれません。
Overlayポップアップの背後に背景オーバーレイを表示するかどうかを切り替えます。有効にした場合、Close on click outside も有効にすると、オーバーレイクリックでポップアップを閉じることができます。
閉じる手段なし

閉じるボタンが無効かつオーバーレイクリックでの閉じる機能も無効の場合、ユーザーはポップアップを閉じることができません。この設定の場合、UIに警告が表示されます。

右パネル — コンテンツエディタータブ

  • CONTENT — テキスト、画像、ボタン、区切り線、HTMLブロックなどのコンテンツブロックを追加・配置します。
  • ROWS — レイアウト行(1カラム、複数カラムなど)を選択・設定します。
  • SETTINGS — フォント、背景色、リンク色のグローバルスタイルを設定します。

保存前にツールバーの Preview Mode でデスクトップビューとモバイルビューを切り替えて確認できます。

プロフィール変数の使用

コンテンツ内のCDPプロフィール属性を参照してメッセージをパーソナライズできます。任意のテキストブロックに{{と入力すると変数ピッカーが開きます。または直接変数を入力することもできます。

{{rt_profile.imported.first_name}}
{{rt_profile.imported.loyalty_tier}}

変数の全リファレンスはメッセージコンテンツのパーソナライズを参照してください。

保存の動作

変更は自動保存されません

編集内容はローカルセッションに保持されます。Save as Draft をクリックしたときのみサーバーに保存されます。保存せずに画面を離れようとすると、未保存の変更が失われることを警告するダイアログが表示されます。

ステップ 3 — Launch

コンテンツが完成し下書きとして保存されたら:

  1. キャンペーンの概要を確認します。
  2. Launch をクリックしてステータスを Draft から Live に変更します。

Engage Studioは連携しているRT 2.0 Personalizationセクションにキャンペーンペイロードを自動的に反映します。TD Web SDKはすぐに対象ユーザーへのポップアップ配信を開始します。

Liveキャンペーンの管理

操作 使用タイミング 結果
Pause配信を一時停止して編集する場合。ステータスが Paused に変わります。キャンペーンは配信されなくなります。自由に編集してから Resume してください。
Resume一時停止中のキャンペーンを再開する場合。ステータスが Live に戻ります。
Completeキャンペーンを恒久的に終了する場合。ステータスが Finished に変わります。キャンペーン定義はRT 2.0から削除され、再アクティベートはできません。
Launch後は変更不可

キャンペーンが Live または Finished になると、メッセージタイプとコンテンツは読み取り専用になります。コンテンツを編集するには、先にキャンペーンを一時停止してください。

キャンペーンのライフサイクル

Launch

Pause

Resume

Complete

Complete

Draft

Live

Paused

Finished

Launch

Pause

Resume

Complete

Complete

Draft

Live

Paused

Finished

Draft または Finished ステータスのキャンペーンは削除できます。Live および Paused のキャンペーンは削除できません。