> ## 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.
# HTML ナッジテンプレート
> MoEngage の HTML ナッジテンプレートを使用して、ユーザーの操作を妨げることなく、画面の上部または下部に控えめなアプリ内メッセージを表示します。
ナッジは、アプリ内の上部または下部に埋め込まれる、または画面上に表示される、控えめなテンプレートです。ポップアップとは異なり、ユーザーはアプリの操作を続けることができます。これらのテンプレートを使用して、新しい情報、セール日、その他の同様の更新をユーザーに知らせることができます。
アプリ内 HTML エディターでは、[事前構築済みのナッジテンプレート](#create-nudge-template)のカスタマイズと、[ナッジテンプレートの作成](#create-nudge-template)をゼロから行うことができます。
HTML ナッジテンプレートは、次の SDK でサポートされています。
* In-App Android SDK バージョン 8.8.0 以降
* In-App iOS SDK バージョン 6.00.3 以降
# 事前構築済みのナッジテンプレート
事前構築済みの HTML ナッジテンプレートを検索して使用するには、次の手順を実行します。
1. キャンペーン作成ページの **Content** セクションで、以下に示すフィルターを選択して、事前構築済みの HTML ナッジテンプレートを検索します。 
MoEngage では、すぐに使い始められるよう、次の事前構築済み HTML ナッジテンプレートを提供しています。
* [Nudge - Emoji rating](#nudge-emoji-rating)
* [Nudge - Notification with two buttons](#nudge-notification-with-two-buttons)
* [Nudge - Feature announcement](#nudge-feature-announcement)
* [Nudge - Countdown timer](#nudge-countdown-timer) 
2. 目的のテンプレートにカーソルを合わせ、**Select Template** をクリックします。テンプレートの HTML コードが **Code View** セクションに入力され、そこでテンプレートの要素を編集できます。 
## Nudge - Emoji Rating
このテンプレートを使用して、ユーザーからフィードバックを収集できます。デフォルトでは、評価用の絵文字とフィードバックを送信するボタンが含まれています。
HTML テンプレートの **Code View** で、要素に次の変更を加えることができます。
* **色の変更**: さまざまな要素にカスタムカラーコードを指定できます。HTML コードの **159** 行目と **170** 行目までスクロールし、以下に示すように任意のカラーコードに置き換えると、それぞれナッジコンテナーと送信ボタンの背景色を変更できます。 
* **絵文字の変更**: **177** 行目の `const emojiData` の値を変更することで、絵文字とそのフィードバックメッセージを変更できます。 
* **データのトラッキング**: テンプレートには、クリックとデータのトラッキングがデフォルトで追加されています。ボタンを追加する場合は、必ずクリックトラッキングを追加してください。トラッキングの詳細については、[こちら](/docs/ja/developer-guide/components-for-sdk/javascript-bridge/javascript-bridge-for-html-in-apps)を参照してください。 
## Nudge - Notification with Two Buttons
このテンプレートを使用して、新しいオファーについてユーザーにナッジを送ることができます。デフォルトでは、テンプレートにはテキスト本文と 2 つのボタンが含まれています。
HTML テンプレートの **Code View** で、要素に次の変更を加えることができます。
* **色の変更**: さまざまな要素にカスタムカラーコードを指定できます。HTML コードの **172** 行目までスクロールし、以下のハイライトされた箇所のカラーコードを置き換えて、要素の色を変更します。 
* **リンクの編集**: **201** 行目で、**BUY MEMBERSHIP NOW** ボタンに割り当てられたリンクを変更できます。このボタンはユーザーをカスタム URL にリダイレクトします。 
## Nudge - Feature Announcement
このナッジテンプレートを使用して、アプリの新機能を紹介できます。デフォルトでは、このテンプレートにはテキスト本文とボタンが含まれています。
HTML テンプレートの **Code View** で、要素に次の変更を加えることができます。
* **色の変更**: さまざまな要素にカスタムカラーコードを指定できます。以下に示すようにカラーコードを置き換えて、要素の色を変更します。
* **テキストの変更**: 必要に応じて、**163** 行目のテキスト本文を編集することもできます。 
* **調整**: 以下に示すように、ナッジのコンテンツに基づいてナッジのサイズを調整できます。 
## Nudge - Countdown Timer
このナッジテンプレートを使用して、セール日に向けてユーザーに緊急性を感じさせることができます。デフォルトでは、このテンプレートにはテキスト付きのカウントダウンタイマーが含まれています。
HTML テンプレートの **Code View** で、要素に次の変更を加えることができます。
* **色の変更**: さまざまな要素にカスタムカラーコードを指定できます。HTML コードの **93** 行目までスクロールし、以下のハイライトされた箇所のカラーコードを置き換えて、要素の色を変更します。 
* **タイマーの変更**: 以下に示すように、必要に応じて **108** 行目のタイマーを変更できます。 
# ナッジテンプレートの作成
ナッジテンプレートを作成するには、次の手順を実行します。
1. キャンペーン作成ページの **Content** セクションで、**Start from scratch** タブをクリックします。 
次のオプションを使用してテンプレートを作成できます。
* [カスタム HTML のアップロード](#custom-html-upload)
* [Zip のアップロード](#zip-upload)
2. 以下に示すように、**Custom HTML upload** または **Zip upload** にカーソルを合わせ、**Create nudge** をクリックします。
## カスタム HTML のアップロード
カスタム HTML を使用してナッジを作成するには、次の手順に従います。
1. **Custom HTML Upload** にカーソルを合わせ、**Create nudge** をクリックします。**Code View** エディターセクションにリダイレクトされます。
2. **Code View** セクションでカスタム HTML コードを使用し、必要に応じてアセットをアップロードします。
## Zip のアップロード
この方法では、HTML とアセットを 1 つの ZIP ファイルとしてまとめてアップロードできます。
ファイルをアップロードする前に、以下のガイドラインに従ってください。
* .zip ファイルのサイズが 5MB 未満であることを確認してください。
* Zip 内のファイル名に \*, /, `\`, &, \~, " を含めないでください。
* すべての画像は JPG、JPEG、PNG、または SVG 形式である必要があります。
* GIF ファイルはアップロードできませんが、URL を使用してテンプレートに追加できます。
* 画像に指定する相対パスは、大文字と小文字の区別を含め、zip フォルダーの構造と一致している必要があります。
Zip アップロードを使用してナッジを作成するには、次の手順を実行します。
1. **Zip Upload** にカーソルを合わせ、**Create nudge.** をクリックします。**Zip template** ダイアログボックスが表示されます。
2. ZIP ファイルをドラッグ アンド ドロップするか、コンピューターからアップロードして、**Done** をクリックします。
* MoEngage は、1 つの画面に一度に最大 3 つのナッジキャンペーンを表示します。対象となるその他のナッジは、優先度に基づいて保留されます。
* ビデオナッジで使用するビデオの最大ファイルサイズは 10 MB です。
# ナッジテンプレートのカスタマイズ
HTML コードまたは zip ファイルをアップロードした後、向き、位置、デバイスタイプなどについてナッジテンプレートをカスタマイズできます。カスタマイズするには、**Template Settings** をクリックします。
**Template Settings** セクションでは、次の操作を実行できます。
* **向きの変更**: **Allowed Device Orientation** セクションで、ナッジの向きのタイプを調整できます。
* **デバイスタイプの選択**: **Allowed device types** セクションで、必要なデバイスタイプを選択できます。
* **配置とサイズの調整**: **Placement and Proportions** セクションでは、次の操作を実行できます。
* ナッジの配置を **Bottom** または **Top** に変更できます。 
* **Nudge height** と **Nudge width** を好みに合わせて調整できます。 
* **Margin** でナッジの位置を変更できます。 
テンプレートのテストとプレビューについては、[HTML アプリ内テンプレート](/docs/ja/user-guide/campaigns-and-channels/in-app-message/templates/html-in-app-templates)を参照してください。
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.