この文書は、MoEngageのさまざまな事前定義されたオンサイトメッセージングテンプレートを構成するための情報とガイドライン、およびこれらのテンプレートのHTMLコードをコードビューでカスタマイズする方法を一覧にしています。

テンプレートタイプ

MoEngageのオンサイトメッセージングキャンペーンでは、使用ケースに応じてさまざまな種類の定義済みテンプレートを使用できます。以下の表は、どのテンプレートを選択すべきかを示しています -

画像

私たちは、オンサイトメッセージングのユーザーに対して、高解像度の画像をアップロードすることをお勧めしますが、サイズは1MBまたは2MBを超えないようにしてください。これは、メッセージがデバイスに表示される前に、メッセージ内の画像がCDNからダウンロードされてユーザーに表示されるためです。ユーザーが遅いインターネット接続を使用している場合、画像のダウンロードに時間がかかる可能性があり、そのため、このユーザーにメッセージを表示するまでに遅延が生じることがあります。

オンサイトメッセージングキャンペーンで使用される画像のアスペクト比

以下は、各オンサイトメッセージテンプレートに推奨される画像のアスペクト比です。サイト内メッセージテンプレートに異なるサイズの画像を常に導入し、コードビューエディタを開くことでスタイルとサイズをカスタマイズできます。

受け入れられる画像タイプ

オンサイトメッセージングでは、テンプレートのいずれかに画像として .png、.jpeg、.gif をアップロードできます。

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

奇妙なアスペクト比の大きな画像を使用している場合は、デスクトップウェブとモバイルウェブの2つの異なるキャンペーンを作成することをお勧めします。これにより、テンプレートがデスクトップウェブブラウザとモバイルウェブブラウザでレンダリングされる際に、何も壊れないことが保証されます。

画像の品質とサイズ

高解像度の画像を使用することをお勧めします。大きな画面でも歪まないためです。画像サイズが大きいほど、不安定なインターネット接続のデバイスで画像がダウンロードに失敗する可能性が高くなります。画像のサイズは2MB未満にして、画像の品質とダウンロード時間の良いバランスを保ちましょう。

背景色

背景色を使用すると、サイト内メッセージに背景を追加できます。メッセージを透明にするために、それを削除することもできます。背景色を定義するには、Container -> Backgroundに移動し、ここにあるオプションのいずれかを選択します -

• ソリッド - テンプレートに背景色を追加したいとき
• 透明 - メッセージの背景を透明にしたい場合
• 画像 - テンプレートの背景に画像を追加したいとき。これは一般的に推奨されていません。

コードビューで編集

以下に示すように、コードビュー ボタンをクリックすることで、既存の MoEngage テンプレートの HTML コードを編集できるようになりました -

コードビュー ボタンをクリックすると、HTML を編集し、保存して、検証のためのプレビューを見ることができます。MoEngage テンプレートの HTML を完全に置き換えると、テンプレートをカスタマイズするための UI エディタを表示できなくなることに注意してください。

使用ケースに応じて適切なテンプレートを選択し、その後テンプレートにHTMLコードを編集または追加していることを確認してください。

自分のHTMLテンプレートを作成している場合は、クリックを追跡し、ユーザーがテンプレートを閉じることを許可するために、以下のポイントに注意してください -

- クローズボタン用 : このCSSクラスをテンプレートに追加してください:   moe-inapp-close
このクラスは、ユーザーがテンプレートを閉じることができるようにするために非常に重要です。MoEngage SDKは、このクラスが見つかった場合にのみテンプレートを閉じます。
テンプレートは、moe-inapp-close CSSクラスに基づいてのみ閉じられることに注意してください。テンプレートを閉じるためにカスタムJavascript関数を使用しないでください。そうすると、一貫性のない動作が発生します。

- クリックを追跡するために : テンプレートにこのCSSクラスを追加します: moe-inapp-click
このクラスを追加することは、MoEngageがクリックを追跡し、特定のキャンペーンに帰属させるために非常に重要です。

- ユーザーがCTAまたはリンクをクリックしたときにテンプレートを閉じるために、HTMLテンプレートに両方のクラス：moe-inapp-closeとmoe-inapp-clickを追加します。これは、ユーザーがURLにリダイレクトされた後にテンプレートが閉じられることを保証します。

リードジェンテンプレート

MoEngageのオンサイトメッセージング（OSM）は、ウェブサイトの訪問者からリードをキャプチャすることを可能にします。Email ID、携帯番号、またはその他の好みをキャプチャし、それを再ターゲティングのためにMoEngageユーザープロファイルに保存することができます。

人気のユースケース

リードジェンテンプレートの人気のある使用例をいくつか紹介します:

• • ウェブサイトの訪問者のメールアドレスを取得し、後でメールでリターゲティングします。
  • ウェブサイトの訪問者の携帯番号を取得し、後でSMSでリターゲットします。
  • ユーザーに送信されるコミュニケーションをパーソナライズするために、ユーザーの名前をキャプチャします。
  • ブランドや製品の選択に関連するユーザーの興味を引き付ける。

リードジェンキャンペーンを作成する

MoEngageでリードジェンキャンペーンを作成するには、次の手順を実行します:

• • • テンプレート選択ページ（OSMキャンペーン作成の第2ステップ）でリードジェンテンプレートを選択します。
      
      
      
    • OSMキャンペーン作成ドキュメントに記載されている手順に従ってください。詳細については、 OSMキャンペーンの作成 を参照してください。
    • ユーザーが共有した入力をキャプチャするには、リード生成テンプレートからユーザー属性に入力をマッピングする必要があります。キャンペーン作成のステップ2では、テンプレートの入力ウィジェットをクリックし、次にアクションを選択して、この入力が保存されるユーザー属性を設定します。
      
      
      
      
    • 2つの入力ウィジェットのうち1つが必須でない場合は、以下のように入力ウィジェットを隠すこともできます:
      

キャプチャされたデータはどこで見ることができますか？

リードジェンテンプレートがユーザーに表示され、以下のようにフォームが送信されると、データは自動的にMoEngageに追跡され、保存されます。

ユーザープロファイルに保存された入力が以下のように表示されます。MoEngageは、Lead Gen Templateを使用して送信が行われるたびに、MOE_RESPONSE_SUBMITTEDというイベントも追跡します。このデータは、以下に示すようにユーザープロファイルに表示されます。

MoEngageはデフォルトで ファーストネーム と メールアドレス のユーザー属性をキャプチャします。テンプレートの内容を変更することで、入力フィールドを追加できます。

例 - 電話番号

<input> フィールドをメールアドレスの後に電話番号用に追加します。

<input
                      placeholder="電話番号"
                      class="input-container moe-element"
                      data-id="INPUT3"
                      id="TEXT_INPUT_3"
                      data-user="u_mb"
                  />
<label class="moe-error-text invisible">このフィールドは必須です</label>

電話番号を必須にするには、電話番号入力フィールドに 必須 を追加します。

例 - エラーメッセージ

必須フィールドにマークした場合、そのフィールドがないままフォームが送信されたときにエラーメッセージを表示するために、以下のJSを使用してください。

<label class="moe-error-text invisible> エラーメッセージ </label>

例 - カスタムバリデーション

リードテンプレートは有効なメールアドレスを検証しますが、既存のフィールドまたは追加した新しいフォームフィールドに対して他の検証を追加したい場合は、そのフィールドの タグを変更し、次のコードを追加してください：

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

次に、 isFormDataValid() メソッドでフィールドのカスタムバリデーションを追加します。例えば、以下はインドの携帯電話番号の検証チェックです。

//モバイル番号の検証
function isMobileNumberValid(mobile) { 
const mobileRegex = /^[789]\\d{9}$/;
return mobileRegex.test(mobile); 
}

isMobileNumberValid() メソッドを isFormDataValid() 内で使用して、携帯電話番号を検証します .

SMSサインアップテンプレート

MoEngageのオンサイトメッセージングは、ユーザーにSMS通知を受け取るための同意を求めるSMSサインアップテンプレートを提供します。北米におけるコンプライアンスに関する詳細については、 北米地域のSMS を参照してください。

MoEngageはSMSサインアップ用の2つのテンプレートを提供しています。

• • • 全画面 - 画像付きSMSサインアップ
    • ポップアップ - SMSサインアップ（画像なし）

前提条件

北米地域のSMSコンプライアンスについて認識していることを確認してください。詳細については、 米国のSMS規制 を参照してください。

SMSサインアップキャンペーンを作成する

1. 1. 1. オンサイトメッセージキャンペーン作成中に、SMSサインアップテンプレートのいずれかを選択してください。
         
      2. オンサイトメッセージングキャンペーンを オンサイトメッセージングキャンペーンの作成 に記載されているように設定します。

全画面 - 画像とポップアップを伴うSMSサインアップ - 画像なしのSMSサインアップ

1. 1. 1. 必要に応じてWebとモバイルの設定を行います。
      2. ボタン、画像、テキストを必要に応じて設定してください。
      3. 法的文書を設定します。MoEngageはデフォルトで以下のテキストを提供します。
         テキストメッセージにサインアップすることで、提供された電話番号に対して、繰り返し自動化されたプロモーションおよびパーソナライズされたテキストメッセージ（カートリマインダー）を受信することに同意します。 同意は購入の条件ではありません。メッセージおよびデータ料金が適用される場合があります。メッセージの頻度は異なります。ヘルプが必要な場合はHELPと返信し、キャンセルするにはSTOPと返信してください。
      4. 利用規約を必要に応じて設定してください。
      5. プライバシーポリシーをニーズに合わせて設定してください。

Web

デスクトップまたはウェブ使用のためにテンプレートが使用される場合は、次のことを行います：

1. 1. 1. 有効な携帯電話番号を入力してください
      2. 通知を受け取るためのサブスクリプションを確認するには、ボタンをクリックしてください。

モバイル

モバイル使用のためにテンプレートが使用される場合は、次のことを行ってください：

ボタンのアクションフィールドのURLに以下を追加して、同意を受け取るようにボタンを設定します:
sms:+11234567890?&body=START

キャプチャされたデータはどこで見ることができますか？

MoEngageのユーザー属性に保存された入力を見ることができます。MoEngageは、オンサイトメッセージングでSMSサインアップを使用して送信が行われるたびに、イベントMOE_RESPONSE_SUBMITTEDを使用します。

ユーザープロファイルには属性と属性のステータスが表示されます。