OSM テンプレート：設定とカスタマイズ

このガイドでは、MoEngage の定義済み On-site Messaging テンプレートの設定方法と、その HTML コードのカスタマイズ方法について説明します。

テンプレートの概要

MoEngage On-site Messaging キャンペーンでは、さまざまな定義済みテンプレートを利用できます。次の表では、各テンプレートとその一般的な用途について説明します。


テンプレートの種類	説明
Simple Image Popup	半透明のオーバーレイの上に、ページ中央に画像を表示します。メッセージのコンテンツがすべて画像に含まれている場合にこのテンプレートを使用します。
Center Popup with one button	半透明のオーバーレイの上に、ページ中央に画像とボタンを表示します。ポップアップメッセージに行動喚起（CTA）を追加する場合にこのテンプレートを使用します。
Sticky Banner with Header, Text, and Button	このスティッキーバナーは、ページの上部または下部に表示できます。ヘッダー、テキスト、ボタン、小さな画像を追加できます。
Lead Gen Template	このテンプレートを使用して、メールアドレスや携帯電話番号など、Web サイト訪問者の情報を取得します。取得した情報は MoEngage のユーザープロファイルに保存されます。
Sticky Banner with Image	このスティッキーバナーは、ページの上部または下部に表示できます。シンプルな画像バナーを表示する場合に使用します。
Survey Popup	この中央ポップアップテンプレートを使用して、MoEngage を通じて Typeform のアンケートを表示します。
Survey Sticky Banner	このスティッキーサイドバナーテンプレートを使用して、Web サイトの隅（左下、右下など）に Typeform のアンケートを邪魔にならない形で表示します。
Side Banner with Image	このサイドバナーテンプレートを使用して、Web サイトの隅（左下、右下など）にシンプルな画像を配置し、邪魔にならない形で情報を伝えます。
Sticky Header with Text and Button	このスティッキーバナーは、ページの上部または下部に表示できます。行動喚起（CTA）付きのテキストメッセージを表示する場合に使用します。
Side Banner with Image and Button	このサイドバナーテンプレートでは、画像とボタンを追加できます。Web サイトの隅に邪魔にならない形で配置できます。
Simple Sticky Header	このスティッキーバナーは、ページの上部または下部に表示できます。シンプルなテキストメッセージを表示する場合に使用します。

画像

On-site Messaging キャンペーンには、2 MB 未満の高品質な画像をアップロードしてください。画像ファイルが大きいと、特にインターネット接続が遅いユーザーの場合、メッセージの表示が遅れる可能性があります。

画像のアスペクト比

次の表は、各 On-site Messaging テンプレートの画像に推奨されるアスペクト比を示しています。画像のサイズとスタイルはコードエディターで調整できます。


テンプレート名	推奨アスペクト比（幅：高さ）
Simple Image Popup	メッセージのサイズはほとんどの画像サイズに合わせて調整されます。推奨アスペクト比は 1:1、2:3、3:2 です。歪みを防ぐため、400x400 ピクセル以上の画像を使用してください。一般的なサイズは 600x600、400x600、600x400 ピクセルです。
Center Popup with one button	メッセージのサイズはほとんどの画像サイズに合わせて調整されます。推奨アスペクト比は 1:1、2:3、3:2 です。歪みを防ぐため、450x450 ピクセル以上の画像を使用してください。一般的なサイズは 600x600、400x600、600x400 ピクセルです。
Sticky Banner with Header, Text, and Button	このテンプレートには小さなアイコン画像が含まれます。推奨アスペクト比は 5:3 です。一般的なサイズは 150x90 および 250x150 ピクセルです。
Lead Gen Template	このテンプレートに背景画像を追加するには、Container > Background > Image に移動します。400x500 ピクセルの画像を使用してください。
Sticky Banner with Image	デスクトップ Web の幅の大部分を占める横長の画像を使用してください。一般的なサイズは 1024x80 および 1024x50 ピクセルです。このテンプレートを使用する場合は、デスクトップ Web とモバイル Web で別々のキャンペーンを作成してください。
Survey Popup	ここには Typeform のアンケート URL のみを追加してください。
Survey Sticky Banner	ここには Typeform のアンケート URL のみを追加してください。
Side Banner with Image	大きなデバイスでの歪みを防ぐため、アスペクト比が 3:4 または 3:5 で、300x400 ピクセル以上の画像を使用してください。このテンプレートを使用する場合は、デスクトップ Web とモバイル Web で別々のキャンペーンを作成してください。
Sticky Header with Text and Button	このテンプレートでは画像の追加は推奨されません。
Side Banner with Image and Button	大きなデバイスでの歪みを防ぐため、アスペクト比が 3:4 または 3:5 で、300x400 ピクセル以上の画像を使用してください。このテンプレートを使用する場合は、デスクトップ Web とモバイル Web で別々のキャンペーンを作成してください。
Simple Sticky Header	このテンプレートでは画像の追加は推奨されません。

サポートされている画像形式

On-site Messaging テンプレートは、.png、.jpeg、.gif の画像形式をサポートしています。

テンプレートのレスポンシブ性

一般的でないアスペクト比の大きな画像を使用する場合は、デスクトップ Web とモバイル Web で別々のキャンペーンを作成してください。これにより、すべてのデバイスで適切に表示されます。

背景色の設定

On-site メッセージに背景色を追加できます。背景色を削除して透明なメッセージにすることもできます。Container > Background に移動し、次のいずれかのオプションを選択して背景色を定義します。

Solid: テンプレートに背景色を追加します。
Transparent: メッセージの背景を透明にします。
Image: テンプレートの背景に画像を追加します。これは一般的には推奨されません。

コードビューでのテンプレートのカスタマイズ

コードビューを使用して、既存の MoEngage テンプレートの HTML コードを編集できます。次の画像のように、Code View ボタンをクリックします。

HTML を編集したら、変更を保存してプレビューします。MoEngage テンプレートの HTML を完全に置き換えた場合、テンプレートのカスタマイズに UI エディターは使用できなくなります。カスタム HTML テンプレートを作成する際は、クリックのトラッキングとテンプレートを閉じる処理について、次のガイドラインを考慮してください。

閉じるボタンの場合: テンプレートに moe-inapp-close CSS クラスを追加します。MoEngage SDK は、このクラスが存在する場合にのみテンプレートを閉じます。動作が不安定になる可能性があるため、テンプレートを閉じるためにカスタム JavaScript 関数を使用しないでください。
クリックのトラッキングの場合: テンプレートに moe-inapp-click CSS クラスを追加します。このクラスは、MoEngage がクリックをトラッキングし、キャンペーンに帰属させるために不可欠です。
行動喚起（CTA）のクリックまたはリンクの後にテンプレートを閉じてユーザーをリダイレクトするには、HTML テンプレートに moe-inapp-close クラスと moe-inapp-click クラスの両方を追加します。

カスタム HTML または HTML ZIP のアップロード

コードビューで既存のテンプレートを編集するだけでなく、独自の HTML を On-site Messaging キャンペーンに取り込むこともできます。HTML は次の 2 つの方法のいずれかで追加できます。

HTML Upload: コードビューで HTML を記述または貼り付けます。
HTML Zip Upload: HTML とそのアセットを含む ZIP ファイルをアップロードします。

On-site Messaging キャンペーン作成の Content ステップで、Start from scratch の下にある HTML Upload または HTML Zip Upload を選択します。

HTML Upload

HTML Upload を選択すると、Code View エディターで HTML を記述または貼り付けることができます。HTML が参照する画像やその他のアセットを追加するには、エディターのアップロードオプションを使用します。カスタム HTML を作成する際は、コードビューでのテンプレートのカスタマイズのクリックトラッキングと閉じるボタンに関するガイダンスに従ってください。

HTML Zip Upload

HTML Zip Upload を選択すると、HTML とそのアセットを含む ZIP ファイルをアップロードできます。Zip template ダイアログで、ファイルをドラッグ＆ドロップするか Upload from computer をクリックし、Done をクリックします。

On-site Messaging キャンペーンに HTML ZIP ファイルをアップロードするための Zip template ダイアログ。

アップロードできるのは 5 MB 以内の ZIP ファイルのみです。ZIP ファイルについては、次のガイドラインに従ってください。

ZIP 内のファイル名に *、/、\、&、~、" を含めないでください。
すべての画像は JPG、JPEG、PNG、SVG 形式である必要があります。
画像に指定する相対パスは、大文字と小文字の区別を含めて ZIP のフォルダー構造と一致している必要があります。
すべてのコンテンツファイルを含むフォルダーから ZIP ファイルを作成してください。

Lead Gen テンプレート

Lead Gen テンプレートを使用すると、メールアドレス、携帯電話番号、その他の設定など、Web サイト訪問者の情報を取得できます。このデータは再エンゲージメントのために MoEngage のユーザープロファイルに直接保存されます。

一般的なユースケース

Lead Gen テンプレートは、次のような一般的なシナリオで使用します。

今後のメールキャンペーンのために、Web サイト訪問者のメールアドレスを取得します。
後で SMS メッセージを送信するために、携帯電話番号を収集します。
パーソナライズされたコミュニケーションのために、ユーザー名を記録します。
好みのブランドや製品など、ユーザーの興味を収集します。

Lead Gen キャンペーンの作成

MoEngage で Lead Gen キャンペーンを作成するには、次の手順を実行します。

テンプレート選択ページで、Lead Gen テンプレートを選択します。

On-site Messaging キャンペーンを設定します。詳細については、On-site Messaging キャンペーンの作成を参照してください。
ユーザー入力を取得するには、Lead Gen テンプレートの入力フィールドをユーザー属性にマッピングします。キャンペーン作成の 2 番目のステップで、テンプレート上の入力ウィジェットをクリックし、この入力を保存するユーザー属性を設定します。

入力フィールドを非表示にするには、入力ウィジェットを選択して非表示を選択します。

取得したデータの表示

ユーザーが Lead Gen テンプレートを送信すると、MoEngage は自動的にデータをトラッキングして保存します。このデータはユーザープロファイルで確認できます。

ユーザープロファイルで取得された Lead Gen データのスクリーンショット。

MoEngage は、Lead Gen テンプレートからの送信ごとに MOE_RESPONSE_SUBMITTED イベントもトラッキングします。このデータは、次の画像のようにユーザープロファイルに表示されます。

ユーザープロファイルの MOE_RESPONSE_SUBMITTED イベントを示すスクリーンショット。

デフォルトでは、MoEngage は First Name と Email Address のユーザー属性を取得します。テンプレートのコンテンツを変更して、入力フィールドを追加できます。

例：電話番号フィールドの追加

Email Address フィールドの後に電話番号の入力フィールドを追加するには、次のコードを使用します。 JavaScript

<input
   placeholder="Phone Number"
   class="input-container moe-element"
   data-id="INPUT3"
   id="TEXT_INPUT_3"
   data-user="u_mb"
   />
<label class="moe-error-text invisible">This field is required</label>

電話番号フィールドを必須にするには、input タグに required を追加します。

例：エラーメッセージの表示

必須フィールドが空白のままの場合にエラーメッセージを表示するには、次の JavaScript を使用します。 JavaScript

<label class="moe-error-text invisible">any error message</label>

例：カスタム検証の追加

Lead Gen テンプレートは、デフォルトでメールアドレスを検証します。既存または新規のフィールドにカスタム検証を追加するには、そのフィールドの <input> タグを変更し、次の属性を追加します。 JavaScript

data-input-validation-type="any name"

次に、isFormDataValid() メソッドにカスタム検証ロジックを追加します。たとえば、次のコードはインドの携帯電話番号を検証します。 JavaScript

//Mobile number validation
function isMobileNumberValid(mobile) {
  const mobileRegex = /^[789]\d{9}$/;  return mobileRegex.test(mobile);
}

携帯電話番号を検証するには、isFormDataValid() 内で isMobileNumberValid() メソッドを呼び出します。 MoEngage On-site Messaging の SMS Sign-Up テンプレートを使用すると、SMS 通知に対するユーザーの同意を収集できます。北米のコンプライアンスの詳細については、北米地域向け SMSを参照してください。 MoEngage では、2 つの SMS Sign-Up テンプレートを提供しています。

Fullscreen: 画像付きの SMS Sign-up
Popup: 画像なしの SMS Sign-up

前提条件

始める前に、北米地域の SMS コンプライアンスについて理解しておいてください。詳細については、米国における SMS 規制を参照してください。

On-site Messaging キャンペーンの作成中に、SMS Sign-Up テンプレートを選択します。

On-site Messaging キャンペーンを設定します。詳細については、On-site Messaging キャンペーンの作成を参照してください。

必要に応じて、Web およびモバイルプラットフォーム向けにテンプレートを設定します。
ボタン、画像、テキストのコンテンツを設定します。
法的テキストを設定します。MoEngage では次のデフォルトテキストを提供しています：By signing up for text messages, you agree to receive recurring automated promotional and personalized text messages (cart reminders) at the phone number provided. Consent is not a condition to purchase. Msg & data rates may apply. Msg frequency varies. Reply HELP for help and STOP to cancel.
必要に応じて、利用規約を設定します。
必要に応じて、プライバシーポリシーを設定します。

Web の場合

デスクトップまたは Web 向けのテンプレートを使用する場合：

有効な携帯電話番号を入力します。
ボタンをクリックして、通知の購読を確認します。

モバイルの場合

モバイル向けのテンプレートを使用する場合：ボタンの Action フィールドに次の URL を追加して、同意を取得するボタンを設定します。 sms:+11234567890?&body=START

パラメーター	説明
sms	同意と通知を受け取る携帯電話番号を指定します。
body	オプトインキーワードを追加します。キーワードの詳細については、購読とキーワードの設定を参照してください。

取得したデータの表示

取得したデータは MoEngage のユーザー属性で確認できます。MoEngage は、SMS Sign-Up On-site メッセージからの送信ごとに MOE_RESPONSE_SUBMITTED イベントをトラッキングします。ユーザープロファイルには、属性とそのステータスが表示されます。

​OSM テンプレート：設定とカスタマイズ

​テンプレートの概要

​画像

​画像のアスペクト比

​サポートされている画像形式

​テンプレートのレスポンシブ性

​背景色の設定

​コードビューでのテンプレートのカスタマイズ

​カスタム HTML または HTML ZIP のアップロード

​HTML Upload

​HTML Zip Upload

​Lead Gen テンプレート

​一般的なユースケース

​Lead Gen キャンペーンの作成

​取得したデータの表示

​例：電話番号フィールドの追加

​例：エラーメッセージの表示

​例：カスタム検証の追加

​SMS Sign-Up テンプレート

​前提条件

​SMS Sign-Up キャンペーンの作成

​SMS Sign-Up テンプレートの設定

Web の場合

モバイルの場合

​取得したデータの表示

OSM テンプレート：設定とカスタマイズ

テンプレートの概要

画像

画像のアスペクト比

サポートされている画像形式

テンプレートのレスポンシブ性

背景色の設定

コードビューでのテンプレートのカスタマイズ

カスタム HTML または HTML ZIP のアップロード

HTML Upload

HTML Zip Upload

Lead Gen テンプレート

一般的なユースケース

Lead Gen キャンペーンの作成

取得したデータの表示

例：電話番号フィールドの追加

例：エラーメッセージの表示

例：カスタム検証の追加

SMS Sign-Up テンプレート

前提条件

SMS Sign-Up キャンペーンの作成

SMS Sign-Up テンプレートの設定

取得したデータの表示