> ## Documentation Index > Fetch the complete documentation index at: https://moengage.com/docs/llms.txt > Use this file to discover all available pages before exploring further. # OSM テンプレート（HTML エディター） > HTML エディターを使用して MoEngage On-site Messaging テンプレートを設定およびカスタマイズします。テンプレートの種類、画像の仕様、カスタマイズオプションを含みます。 # 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 プラットフォームの背景色オプションのスクリーンショット。 ### コードビューでのテンプレートのカスタマイズ コードビューを使用して、既存の MoEngage テンプレートの HTML コードを編集できます。次の画像のように、**Code View** ボタンをクリックします。 MoEngage の 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** を選択します。 Start from scratch の下に HTML Upload と HTML Zip Upload のオプションが表示された On-site Messaging の Content ステップ。 ### HTML Upload **HTML Upload** を選択すると、**Code View** エディターで HTML を記述または貼り付けることができます。HTML が参照する画像やその他のアセットを追加するには、エディターのアップロードオプションを使用します。カスタム HTML を作成する際は、[コードビューでのテンプレートのカスタマイズ](#customize-templates-in-code-view)のクリックトラッキングと閉じるボタンに関するガイダンスに従ってください。 ### 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** キャンペーンを作成するには、次の手順を実行します。 1. テンプレート選択ページで、**Lead Gen** テンプレートを選択します。 Lead Gen テンプレートの選択を示すスクリーンショット。 2. On-site Messaging キャンペーンを設定します。詳細については、[On-site Messaging キャンペーンの作成](/docs/ja/user-guide/campaigns-and-channels/on-site-message/create/create-osm-campaign)を参照してください。 3. ユーザー入力を取得するには、**Lead Gen** テンプレートの入力フィールドをユーザー属性にマッピングします。キャンペーン作成の 2 番目のステップで、テンプレート上の入力ウィジェットをクリックし、この入力を保存するユーザー属性を設定します。 入力ウィジェットをユーザー属性にマッピングする方法を示すスクリーンショット。 4. 入力フィールドを非表示にするには、入力ウィジェットを選択して非表示を選択します。 入力ウィジェットを非表示にする方法を示すスクリーンショット。 ### 取得したデータの表示 ユーザーが **Lead Gen** テンプレートを送信すると、MoEngage は自動的にデータをトラッキングして保存します。このデータはユーザープロファイルで確認できます。 ユーザープロファイルで取得された Lead Gen データのスクリーンショット。 MoEngage は、**Lead Gen** テンプレートからの送信ごとに **MOE\_RESPONSE\_SUBMITTED** イベントもトラッキングします。このデータは、次の画像のようにユーザープロファイルに表示されます。 ユーザープロファイルの MOE_RESPONSE_SUBMITTED イベントを示すスクリーンショット。 デフォルトでは、MoEngage は **First Name** と **Email Address** のユーザー属性を取得します。テンプレートのコンテンツを変更して、入力フィールドを追加できます。 #### 例：電話番号フィールドの追加 **Email Address** フィールドの後に電話番号の入力フィールドを追加するには、次のコードを使用します。 JavaScript ```javascript wrap theme={null} ``` 電話番号フィールドを必須にするには、input タグに `required` を追加します。 #### 例：エラーメッセージの表示 必須フィールドが空白のままの場合にエラーメッセージを表示するには、次の JavaScript を使用します。 JavaScript ```javascript wrap theme={null} ``` ### 例：カスタム検証の追加 **Lead Gen** テンプレートは、デフォルトでメールアドレスを検証します。既存または新規のフィールドにカスタム検証を追加するには、そのフィールドの `` タグを変更し、次の属性を追加します。 JavaScript ```javascript theme={null} data-input-validation-type="any name" ``` 次に、`isFormDataValid()` メソッドにカスタム検証ロジックを追加します。たとえば、次のコードはインドの携帯電話番号を検証します。 JavaScript ```javascript wrap theme={null} //Mobile number validation function isMobileNumberValid(mobile) { const mobileRegex = /^[789]\d{9}$/; return mobileRegex.test(mobile); } ``` 携帯電話番号を検証するには、`isFormDataValid()` 内で `isMobileNumberValid()` メソッドを呼び出します。 ## SMS Sign-Up テンプレート MoEngage On-site Messaging の **SMS Sign-Up** テンプレートを使用すると、SMS 通知に対するユーザーの同意を収集できます。北米のコンプライアンスの詳細については、[北米地域向け SMS](/docs/ja/user-guide/campaigns-and-channels/sms-mms-and-rcs/sms-for-north-america-region/getting-started-with-sms)を参照してください。 MoEngage では、2 つの **SMS Sign-Up** テンプレートを提供しています。 * **Fullscreen:** 画像付きの SMS Sign-up * **Popup:** 画像なしの SMS Sign-up ### 前提条件 始める前に、北米地域の SMS コンプライアンスについて理解しておいてください。詳細については、[米国における SMS 規制](/docs/ja/user-guide/campaigns-and-channels/sms-mms-and-rcs/compliance-and-deliverability/messaging-regulations-for-us)を参照してください。 ### SMS Sign-Up キャンペーンの作成 1. On-site Messaging キャンペーンの作成中に、**SMS Sign-Up** テンプレートを選択します。 SMS Sign-Up テンプレートの選択を示すスクリーンショット。 2. On-site Messaging キャンペーンを設定します。詳細については、[On-site Messaging キャンペーンの作成](/docs/ja/user-guide/campaigns-and-channels/on-site-message/create/create-osm-campaign)を参照してください。 #### SMS Sign-Up テンプレートの設定 1. 必要に応じて、Web およびモバイルプラットフォーム向けにテンプレートを設定します。 2. ボタン、画像、テキストのコンテンツを設定します。 3. 法的テキストを設定します。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. 4. 必要に応じて、利用規約を設定します。 5. 必要に応じて、プライバシーポリシーを設定します。 ##### Web の場合 デスクトップまたは Web 向けのテンプレートを使用する場合： 1. 有効な携帯電話番号を入力します。 2. ボタンをクリックして、通知の購読を確認します。 Web 上の SMS Sign-up Fullscreen テンプレートを示すアニメーション GIF。 Web 上の SMS Sign-up Popup テンプレートを示すアニメーション GIF。 ##### モバイルの場合 モバイル向けのテンプレートを使用する場合： ボタンの **Action** フィールドに次の URL を追加して、同意を取得するボタンを設定します。 `sms:+11234567890?&body=START` | **パラメーター** | **説明** | | - | - | | sms | 同意と通知を受け取る携帯電話番号を指定します。 | | body | オプトインキーワードを追加します。キーワードの詳細については、[購読とキーワードの設定](/docs/ja/user-guide/campaigns-and-channels/sms-mms-and-rcs/other-settings/configure-subscription-and-keywords)を参照してください。 | モバイル上の SMS Sign-up Fullscreen テンプレートを示すアニメーション GIF。 モバイル上の SMS Sign-up Popup テンプレートを示すアニメーション GIF。 ### 取得したデータの表示 取得したデータは MoEngage のユーザー属性で確認できます。MoEngage は、**SMS Sign-Up** On-site メッセージからの送信ごとに **MOE\_RESPONSE\_SUBMITTED** イベントをトラッキングします。 ユーザープロファイルには、属性とそのステータスが表示されます。 ユーザープロファイルで取得された SMS Sign-Up データのスクリーンショット。