> ## 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 テンプレートを使用して、複雑なアプリ内メッセージのレイアウトを作成します。アンケート、リード獲得、横向きモード、タブレット、TV キャンペーンに対応しています。

> [!TIP]
>
> Android SDK バージョン 11.4.00、iOS SDK バージョン 7.1.00、React Native SDK バージョン 7.3.0 を使用していることを確認してください。

# はじめに

HTML アプリ内メッセージを活用すると、複雑なアプリ内メッセージのレイアウトを作成して使用し、アプリ内にいるユーザーのエンゲージメントを高めることができます。

HTML アプリ内メッセージでは、次の機能がサポートされています。

* HTML テンプレートを使用して、モバイルアプリ内でポップアップを表示できます。これにより、アプリ内キャンペーンでアンケート、リード獲得、スピンホイールなどの機能を利用できるようになります。サンプルテンプレートは[こちら](/docs/ja/user-guide/campaigns-and-channels/in-app-message/templates/sample-html-in-app-templates)で入手できます。
* アプリ内メッセージキャンペーンでの横向きモードと縦向きモードのサポート
* アプリ内メッセージキャンペーンでのタブレットと TV OS のサポート
* カスタム HTML テンプレートのアップロード: 独自のアプリ内テンプレートを作成して ZIP ファイルとしてアップロードするか、アプリ内キャンペーンの作成時に HTML を貼り付けるだけで使用できます。

# HTML アプリ内キャンペーンの作成

アプリ内キャンペーン作成の 2 番目のステップ (キャンペーン作成のコンテンツセクション) には、次の 3 つのタブがあります。

1. All templates
2. Custom template editor
3. Saved templates

![ContentCreation\_InAppCampaigns.png](https://mintcdn.com/moengage/o0kXRAcOq2mxzDnY/images/moengage_ed8a39.png?fit=max\&auto=format\&n=o0kXRAcOq2mxzDnY\&q=85\&s=37ca4ad4c5d4b1f429855c00894c5ed3)

All Templates セクションでは 4 つの標準の事前構築済み HTML テンプレートを利用でき、キャンペーンの作成に使用できます。Custom template editor では HTML テンプレートを作成でき、エディターに HTML コードを入力または貼り付けることができます。

## All Templates セクションの事前構築済み HTML テンプレート

アプリ内キャンペーンで HTML テンプレートを使用するには、次の手順に従ってください。

1. キャンペーン作成のステップ 2 で、'All templates' タブに移動し、以下に示すように HTML テンプレートセクションまでスクロールします。
2. 4 つの HTML テンプレートと、カスタム HTML エディターを使用してカスタム HTML テンプレートを作成するオプションがあります。任意の HTML テンプレートを選択するか、カスタム HTML テンプレートを作成します。

# 事前構築済みの HTML テンプレート

MoEngage でサポートされている HTML テンプレートは次のとおりです。

1. [アンケートテンプレート](/docs/ja/user-guide/campaigns-and-channels/in-app-message/templates/html-in-app-templates#survey-templates)
2. [Popup-Promotional](/docs/ja/user-guide/campaigns-and-channels/in-app-message/templates/html-in-app-templates#popup-promotional-template)
3. [FullScreen- Lead Gen](/docs/ja/user-guide/campaigns-and-channels/in-app-message/templates/html-in-app-templates#fullscreen-lead-gen-templates)
4. [FullScreen- Carousel](/docs/ja/user-guide/campaigns-and-channels/in-app-message/templates/html-in-app-templates#full-screen-carousel)
5. [ゲーミフィケーションテンプレート - スピンホイールとスクラッチカード](/docs/ja/user-guide/campaigns-and-channels/in-app-message/templates/gamification-templates)

## アンケートテンプレート

アンケートテンプレートは、アンケートをすばやく作成するために使用できる、あらかじめデザインされたレイアウトまたはフォーマットです。多くの場合、顧客満足度、従業員フィードバック、イベント評価など、特定の種類のアンケートに共通する質問があらかじめ用意されています。アンケートテンプレートは、"filter by use case" セクションで "survey" フィルターを選択すると見つけることができます。アプリ内キャンペーンでは、次のアンケートテンプレートを利用できます。

1. [Popup Survey Template](/docs/ja/user-guide/campaigns-and-channels/in-app-message/templates/html-in-app-templates#popup-survey-template)
2. [Survey Popup and Emoji](/docs/ja/user-guide/campaigns-and-channels/in-app-message/templates/html-in-app-templates#survey-popup-emoji-and-text-box)
3. [Survey popup- Radio buttons with emoji](/docs/ja/user-guide/campaigns-and-channels/in-app-message/templates/html-in-app-templates#survey-popup-radio-buttons-with-emoji)
4. [Survey popup - Multi Screen](/docs/ja/user-guide/campaigns-and-channels/in-app-message/templates/html-in-app-templates#survey-popup-multi-screen)
5. [Survey popup - NPS Slider](/docs/ja/user-guide/campaigns-and-channels/in-app-message/templates/html-in-app-templates#survey-popup-nps-slider)

![Screenshot 2023-12-15 at 12.17.06 PM.png](https://mintcdn.com/moengage/2CGhjk8ZDWEC5ocb/images/moengage_f8055b.png?fit=max\&auto=format\&n=2CGhjk8ZDWEC5ocb\&q=85\&s=148e8c073e32035adf8e3464ad88d3c0)

### **Popup Survey Template**

名前が示すとおり、このテンプレートはモバイルデバイスでポップアップアンケートを実施するために使用します。次の画像は、このテンプレートが縦向きモードのモバイルデバイスでどのように表示されるかを示しています。

![Popup-Survey\_portrait.png](https://mintcdn.com/moengage/wIFGWsQFEjsz2j4v/images/moengage_e1062d.png?fit=max\&auto=format\&n=wIFGWsQFEjsz2j4v\&q=85\&s=ccafce3d45b3b6c1858c31e891beb43f)

このテンプレートの HTML コードは、以下に示すように、コンテンツ作成の 'Code View' セクションにあらかじめ入力されています。

![Popup\_Survey.png](https://mintcdn.com/moengage/xeb_76Bworf1GG6P/images/moengage_9811d9.png?fit=max\&auto=format\&n=xeb_76Bworf1GG6P\&q=85\&s=a3b4bf927d98e7e13ef617a603850278)

### Pop-up Survey Template の詳細

このテンプレートは、アンケートに対するユーザーの回答を取得するために使用できます。

#### **ステップ 1: ユーザーの回答をユーザー属性で取得する**

以下の画像に示すように、アンケートの回答はユーザー属性として取得されます。Code View にはテンプレートの HTML コードが表示されており、Popup-Survey Template のコードの 88 行目で、ユーザーが入力した内容をユーザー属性 *"survey\_response"* として取得しています。ユーザー属性名は必要に応じてカスタマイズできます。

![PopupSurvey\_CodeView.png](https://mintcdn.com/moengage/rmgWdhG7TCISpEIz/images/moengage_d52a1c.png?fit=max\&auto=format\&n=rmgWdhG7TCISpEIz\&q=85\&s=766a5061f6f828f36fcb6ac97215f911)

**コードスニペット:**

HTML

```html wrap theme={null}
<a class="btn btn-cstm-light " data-dismiss="modal" aria-label="Close" onclick="moengage.trackClick(); moengage.trackEvent('MOE_RESPONSE_SUBMITTED',{survey_response: document.querySelector('input[name=customRadio]:checked').value},{},{},false,true); moengage.setUserAttribute('survey_response', document.querySelector('input[name=customRadio]:checked').value); moengage.dismissMessage();">Share Feedback</a>
```

#### ステップ 2: ユーザーの回答時にイベントをトリガーする

ユーザーが回答を送信したときに、イベント "MOE\_RESPONSE\_SUBMITTED" をトリガーします。テンプレートのコードでは、これは 88 行目で行われています。フィードバックフォームからユーザーの入力を取得するイベント属性 "survey\_response" が、MOE\_RESPONSE\_SUBMITTED イベントのトラッキングに使用されます。イベント名とイベント属性名は必要に応じてカスタマイズできます。トラッキングされたこのイベントは、必要に応じて MoEngage の外部にデータを送信したり、フォローアップキャンペーンをトリガーしたりするために使用できます。

![PopupSurvey\_TrackEvent.png](https://mintcdn.com/moengage/Deli0Qwc2s7oDHRm/images/moengage_95e0c0.png?fit=max\&auto=format\&n=Deli0Qwc2s7oDHRm\&q=85\&s=fa0f3abb5510225bbc62338484a54ed7)

**コードスニペット**

JSON

```json wrap theme={null}
onclick="moengage.trackClick(); moengage.trackEvent('MOE_RESPONSE_SUBMITTED',{survey_response: document.querySelector('input[name=customRadio]:checked').value},{},{},false,true);
```

#### ステップ 3: データのトラッキング

このテンプレートのデータは、以下に示すようにトラッキングされ、MoEngage のユーザープロファイルに保存されます。

![DataTracking.png](https://mintcdn.com/moengage/S2vOz7ciYYqlhjCf/images/moengage_6a9264.png?fit=max\&auto=format\&n=S2vOz7ciYYqlhjCf\&q=85\&s=c96dbd558d95828e7e78504f779776dd)

このテンプレートでは、縦向きモードがモバイルデバイスとの互換性が最も高くなります。このテンプレートを横向きモードで表示すると、ユーザーにはスクロールオプションが表示されます。このテンプレートは、タブレットと TV ではどの向きでも期待どおりにレンダリングされます。

### **Survey popup- emoji and text box**

このテンプレートを使用して、ユーザーからフィードバックを収集できます。このテンプレートには、デフォルトで画像、評価用の絵文字、詳細なフィードバック用のテキストボックス、フィードバックを送信するボタンが含まれています。たとえば、最近リリースした製品についてユーザーからフィードバックを得たい場合、絵文字を使用してすばやくフィードバックを得ることができ、ユーザーが詳細なフィードバックを共有したい場合はテキストボックスを使用できます。

![Screenshot 2023-12-15 at 12.55.53 PM.png](https://mintcdn.com/moengage/geRh9DNA2GhPhrjA/images/moengage_f50cbf.png?fit=max\&auto=format\&n=geRh9DNA2GhPhrjA\&q=85\&s=17b883982b2cd676b1e4d1ca21cd0a0e)

このテンプレートの HTML コードは、以下に示すように、コンテンツ作成の 'Code View' セクションにあらかじめ入力されています。

![Screenshot 2023-12-15 at 12.57.22 PM.png](https://mintcdn.com/moengage/OQ0V9ibjQLpsyCSD/images/moengage_10c34d.png?fit=max\&auto=format\&n=OQ0V9ibjQLpsyCSD\&q=85\&s=ffda503165b4a92825a2b6446941753c)

### **テンプレートの設定**

**ステップ 1: 画像を変更する**

テンプレートの画像を変更するには、27 行目に移動して Image src を画像のリンクに置き換えます。または、"upload" をクリックしてエディターに画像をアップロードし、"view uploaded" から URL をコピーして image src で使用することもできます。

このテンプレートで使用されている画像のアスペクト比は 362\*171 です。同じアスペクト比を使用するか、ユースケースに応じて変更できます。

```html wrap theme={null}
<img src="https://cdn.moengage.com/inapp/html-template11/assets/img/hero-image.png" alt="hero" >
```

![Screenshot 2023-12-15 at 1.09.32 PM.png](https://mintcdn.com/moengage/dLyLAwgfsm1v6_MY/images/moengage_8379ef.png?fit=max\&auto=format\&n=dLyLAwgfsm1v6_MY\&q=85\&s=25c8400a3a06e6e277031332951aba0a)

**ステップ 2: 絵文字とラベルを変更する**

85 行目の *feedback 変数* を変更することで、絵文字とそのラベルを変更できます。

![Screenshot 2023-12-15 at 1.19.04 PM.png](https://mintcdn.com/moengage/M3SzEdkQVgGAjJCt/images/moengage_75f7d5.png?fit=max\&auto=format\&n=M3SzEdkQVgGAjJCt\&q=85\&s=b5dfbd14a258d536a1dc3a1bd3c2a71e)

**ステップ 3: テキストボックスの見出しを変更する**

37 行目から 41 行目で、テキストボックスの見出しを変更できます。

![Screenshot 2023-12-15 at 2.37.12 PM.png](https://mintcdn.com/moengage/S2vOz7ciYYqlhjCf/images/moengage_6b409f.png?fit=max\&auto=format\&n=S2vOz7ciYYqlhjCf\&q=85\&s=4425dd2f8e2ea2ee9dfb6fc4c42e9674)

**ステップ 4: データのトラッキング**

既存のテンプレートには、クリックとデータのトラッキングがデフォルトで追加されています。ボタンを追加する場合は、必ずクリックトラッキングを追加してください。トラッキングの詳細については、[こちらのドキュメント](https://www.moengage.com/docs/developer-guide/components-for-sdk/javascript-bridge/javascript-bridge-for-html-in-apps)を参照してください。

フィードバックを送信したユーザーを見つけるには、segment -> create segment に移動し、"MOE\_RESPONSE\_SUBMITTED" イベントに基づいてユーザーをセグメント化します。

![Screenshot 2023-12-15 at 3.01.32 PM.png](https://mintcdn.com/moengage/-X0av6ek9AEOUtsy/images/moengage_c7d857.png?fit=max\&auto=format\&n=-X0av6ek9AEOUtsy\&q=85\&s=3028f67e8d9f6f04f8967ff5138a6576)

### **Survey popup- Radio buttons with emoji**

顧客からすばやくアンケートの回答を集めたい場合は、絵文字付きラジオボタンテンプレートを選択してください。デフォルトでは、ユーザーが選択できる 5 つのオプションのリストが含まれています。ラジオボタンテンプレートのため、ユーザーが選択できるオプションは 1 つだけです。

![Screenshot 2023-12-15 at 3.05.47 PM.png](https://mintcdn.com/moengage/fQ0QnP2abFkVAzJ2/images/moengage_50cc03.png?fit=max\&auto=format\&n=fQ0QnP2abFkVAzJ2\&q=85\&s=b9dc2e9eabbcede459df73f6d0918a0d)

このテンプレートの HTML コードは、以下に示すように、コンテンツ作成の 'Code View' セクションにあらかじめ入力されています。ユースケースに応じて変更できます。

![Screenshot 2023-12-15 at 3.05.57 PM.png](https://mintcdn.com/moengage/eF2J43N9Ckga5Apm/images/moengage_2f67f2.png?fit=max\&auto=format\&n=eF2J43N9Ckga5Apm\&q=85\&s=1274d0fd401956f795a6431913f0f42b)

### **テンプレートの設定**

**ステップ 1: 背景を変更する**

34 行目の style 要素を変更することで、テンプレートの背景色を簡単に変更できます。

![Screenshot 2023-12-15 at 3.10.37 PM.png](https://mintcdn.com/moengage/prFQLkdcYp4xSt9t/images/moengage_66bb31.png?fit=max\&auto=format\&n=prFQLkdcYp4xSt9t\&q=85\&s=32e2721d4a1a11bc0c3912f7c0a947ac)

**ステップ 2: 見出しを変更する**

40 行目で、ポップアップの見出しを変更できます。

![Screenshot 2023-12-15 at 3.06.16 PM.png](https://mintcdn.com/moengage/_eUNBDpGCEXI_sgZ/images/moengage_a508f5.png?fit=max\&auto=format\&n=_eUNBDpGCEXI_sgZ\&q=85\&s=3ad0d9f596fbd180f1bf66a43f725215)

**ステップ 3: リストのオプションを変更する**

ユーザーが選択できるオプションを変更するには、以下に示すように、順序なしリストの各リスト項目のラベルと値を変更する必要があります。

![Screenshot 2023-12-15 at 3.06.54 PM.png](https://mintcdn.com/moengage/2CGhjk8ZDWEC5ocb/images/moengage_f937f5.png?fit=max\&auto=format\&n=2CGhjk8ZDWEC5ocb\&q=85\&s=31aef8dec86d12098f14657160f1ed00)

**ステップ 4: データのトラッキング**

既存のテンプレートには、クリックとデータのトラッキングがデフォルトで追加されています。ボタンを追加する場合は、必ずクリックトラッキングを追加してください。トラッキングの詳細については、[こちらのドキュメント](https://www.moengage.com/docs/developer-guide/components-for-sdk/javascript-bridge/javascript-bridge-for-html-in-apps)を参照してください。

フィードバックを送信したユーザーを見つけるには、segment -> create segment に移動し、"MOE\_RESPONSE\_SUBMITTED" イベントに基づいてユーザーをセグメント化します。

![Screenshot 2023-12-15 at 3.01.32 PM.png](https://mintcdn.com/moengage/-X0av6ek9AEOUtsy/images/moengage_c7d857.png?fit=max\&auto=format\&n=-X0av6ek9AEOUtsy\&q=85\&s=3028f67e8d9f6f04f8967ff5138a6576)

### Survey popup - Multi Screen

顧客から複数の回答を収集したい場合は、マルチスクリーンポップアップを使用します。次の画面があります。

* ウェルカム画面
* 画像付きの複数オプション選択画面
* フィードバックテキストボックス
* 複数オプション選択画面
* サンクス画面

![ezgif.com-video-to-gif-converted.gif](https://mintcdn.com/moengage/UX7SFw6G5JwoHWFq/images/moengage_5f82cb.png?s=13460edfc06fb1f57cb4497d44d379c9)

テンプレートの HTML コードを使用して、各画面を個別に変更できます。

![Screenshot 2023-12-15 at 3.20.53 PM.png](https://mintcdn.com/moengage/MkyldVVKHHCZ-kMR/images/moengage_ae9374.png?fit=max\&auto=format\&n=MkyldVVKHHCZ-kMR\&q=85\&s=44a7eaa5461b40a970c6ad71e7e2664c)

### **テンプレートの設定**

**ステップ 1: ウェルカム画面の画像とテキストを変更する**

27 行目から 34 行目で、ウェルカム画面の画像とテキストを変更できます。

![Screenshot 2023-12-15 at 3.24.51 PM.png](https://mintcdn.com/moengage/rcvpxihxIp--_HSE/images/moengage_936bcc.png?fit=max\&auto=format\&n=rcvpxihxIp--_HSE\&q=85\&s=a438638d8e1cdf4a5a83b9b932276e7b)

**ステップ 2: アンケート画面のオプションを変更する**

95 行目から 174 行目で、各画面の質問と関連するオプションを変更できます。また、"data" 変数を変更することで、ユースケースに応じて画面を削除または追加することもできます。画面を追加するには、画面を複製して、画面 ID と値を変更します。

![Screenshot 2023-12-15 at 3.27.01 PM.png](https://mintcdn.com/moengage/TTNPRzWn21XF5uj0/images/moengage_fbc67c.png?fit=max\&auto=format\&n=TTNPRzWn21XF5uj0\&q=85\&s=4e959a8aa12332aea2dba76ec8dc85cd)

**ステップ 3: データのトラッキング**

既存のテンプレートには、クリックとデータのトラッキングがデフォルトで追加されています。ボタンを追加する場合は、必ずクリックトラッキングを追加してください。トラッキングの詳細については、[こちらのドキュメント](https://www.moengage.com/docs/developer-guide/components-for-sdk/javascript-bridge/javascript-bridge-for-html-in-apps)を参照してください。

フィードバックを送信したユーザーを見つけるには、segment -> create segment に移動し、"MOE\_RESPONSE\_SUBMITTED" イベントに基づいてユーザーをセグメント化します。

![Screenshot 2023-12-15 at 3.01.32 PM.png](https://mintcdn.com/moengage/-X0av6ek9AEOUtsy/images/moengage_c7d857.png?fit=max\&auto=format\&n=-X0av6ek9AEOUtsy\&q=85\&s=3028f67e8d9f6f04f8967ff5138a6576)

### **Survey popup - NPS slider**

NPS スライダーポップアップを使用して、アプリや機能に対する NPS スコアまたは評価をユーザーから取得します。これにより、ユーザーがアプリをどのように認識しているかについて、有益な情報を収集できます。

![Screenshot 2023-12-15 at 3.29.35 PM.png](https://mintcdn.com/moengage/7H2dU4CG2W0DQCPI/images/moengage_6f45ea.png?fit=max\&auto=format\&n=7H2dU4CG2W0DQCPI\&q=85\&s=ae10a9628216592acf1e05f92ac6b7b9)

このテンプレートの HTML コードは、以下に示すように、コンテンツ作成の 'Code View' セクションにあらかじめ入力されています。ユースケースに応じて変更できます。

![Screenshot 2023-12-15 at 3.29.44 PM.png](https://mintcdn.com/moengage/dLyLAwgfsm1v6_MY/images/moengage_8689cf.png?fit=max\&auto=format\&n=dLyLAwgfsm1v6_MY\&q=85\&s=d99d0d1dc9d97822c4b8b1bc4ee38911)

### **テンプレートの設定**

**ステップ 1: 背景を変更する**

27 行目の style 要素を変更することで、テンプレートの背景色を簡単に変更できます。

![Screenshot 2023-12-15 at 3.33.09 PM.png](https://mintcdn.com/moengage/BlcsVkkZu61NB-XQ/images/moengage_4c806e.png?fit=max\&auto=format\&n=BlcsVkkZu61NB-XQ\&q=85\&s=b4b61b42cfd76f7a21778d078c939ba9)

**ステップ 2: 見出しを変更する**

36 行目で、ポップアップの見出しを変更できます。

![Screenshot 2023-12-15 at 3.35.54 PM.png](https://mintcdn.com/moengage/vl5cQuPaKeqblz8O/images/moengage_8fb082.png?fit=max\&auto=format\&n=vl5cQuPaKeqblz8O\&q=85\&s=eb7dfc9e057c71ba940697c1522f6646)

**ステップ 3: スライダーのオプションを変更する**

スライダーでユーザーが選択できるオプションを変更するには、以下に示すように、順序なしリストの各リスト項目の data-value と値を変更する必要があります。

![Screenshot 2023-12-15 at 3.34.24 PM.png](https://mintcdn.com/moengage/2CGhjk8ZDWEC5ocb/images/moengage_f87d1d.png?fit=max\&auto=format\&n=2CGhjk8ZDWEC5ocb\&q=85\&s=bdc4d098a9d60cf3e362cfa5070aa22a)

**ステップ 4: データのトラッキング**

既存のテンプレートには、クリックとデータのトラッキングがデフォルトで追加されています。ボタンを追加する場合は、必ずクリックトラッキングを追加してください。トラッキングの詳細については、[こちらのドキュメント](https://www.moengage.com/docs/developer-guide/components-for-sdk/javascript-bridge/javascript-bridge-for-html-in-apps)を参照してください。

フィードバックを送信したユーザーを見つけるには、segment -> create segment に移動し、"MOE\_RESPONSE\_SUBMITTED" イベントに基づいてユーザーをセグメント化します。

![Screenshot 2023-12-15 at 3.01.32 PM.png](https://mintcdn.com/moengage/-X0av6ek9AEOUtsy/images/moengage_c7d857.png?fit=max\&auto=format\&n=-X0av6ek9AEOUtsy\&q=85\&s=3028f67e8d9f6f04f8967ff5138a6576)

## Popup-Promotional Template

これらのテンプレートは、実施中のオファーや売れ筋の製品/サービスを宣伝するために使用できます。

![Popup-Promotional.png](https://mintcdn.com/moengage/jnaevUpPOwD04mEl/images/moengage_80f19f.png?fit=max\&auto=format\&n=jnaevUpPOwD04mEl\&q=85\&s=a8ecf64b2c61e527964fffec2a32b1d4)

このテンプレートの HTML コードは、以下に示すように、コンテンツ作成の 'Code View' セクションにあらかじめ入力されています。

![Ppup\_PromoCode\_View.png](https://mintcdn.com/moengage/ME-DtlELD2N8TrcF/images/moengage_c02e3c.png?fit=max\&auto=format\&n=ME-DtlELD2N8TrcF\&q=85\&s=3de24cbbb3d90441ac9872675fe86083)

### Pop-up Promotional Template の詳細

このテンプレートは、モバイルアプリで実施中のオファー/お得な情報/セールを宣伝するために使用できます。

#### ステップ 1: ターゲット URL またはランディング URL を定義する

他のプロモーションキャンペーンと同様に、ユーザーにボタンやリンクをクリックしてもらい、宣伝しているオファーやお得な情報を表示するランディングページに誘導することが目的です。このテンプレートのボタンは、クリック時にユーザーが遷移すべき URL を開くように設定できます。以下に示すように JS Bridge を実装することで、統計をトラッキングできます。

![Ppup\_PromoCode\_View\_JSBRidge.png](https://mintcdn.com/moengage/xaH8HoR16_YVDek5/images/moengage_cfb529.png?fit=max\&auto=format\&n=xaH8HoR16_YVDek5\&q=85\&s=e7bdf86503982b1133d1d0ade9999697)

コードスニペット:

HTML

```html wrap theme={null}
<a href="#" class="btn btn-cstm-dark btn-cta" data-dismiss="modal" aria-label="Close" onclick="moengage.openRichLanding('https://www.moengage.com'); moengage.trackClick(1); moengage.dismissMessage()" >get started</a>
```

## Fullscreen - Lead Gen Templates

リード獲得テンプレートは、匿名のアプリユーザーのメール ID または携帯電話番号を取得するために使用できます。

![LeadGenTemplate.png](https://mintcdn.com/moengage/cVruC-B7I1TnIZ0h/images/moengage_d981c5.png?fit=max\&auto=format\&n=cVruC-B7I1TnIZ0h\&q=85\&s=72b4c84948d0070c846c683fd926cdc9)

このテンプレートの HTML コードは、以下に示すように、コンテンツ作成の 'Code View' セクションにあらかじめ入力されています。

![LeadGenTemplate\_PreviewCodeView.png](https://mintcdn.com/moengage/iCae3l_a7eOJMTbz/images/moengage_219fbc.png?fit=max\&auto=format\&n=iCae3l_a7eOJMTbz\&q=85\&s=88da76741131a8039496432649189249)

### Fullscreen Lead Gen Template の詳細

#### ステップ 1: ユーザーの詳細を MoEngage 属性で取得する

ユーザーが入力した内容を、MoEngage の標準属性である First Name と Email にそれぞれ保存します。

ステップ 2: イベントをトリガーする

ユーザーがこのフォームに回答を送信したときに、イベント "MOE\_RESPONSE\_SUBMITTED" をトリガーします。このイベントを活用して、MoEngage 経由でこのデータを外部 API エンドポイントに送信できます。以下の画像のハイライトされたコードは、入力データをユーザー属性およびイベントとしてトラッキングする役割を担っています。

![LeadGen\_CodeView.png](https://mintcdn.com/moengage/SBG7um9Fqotw1CFo/images/moengage_b4c0ec.png?fit=max\&auto=format\&n=SBG7um9Fqotw1CFo\&q=85\&s=7b8917128ecacc2e2327f19f73ff8c78)

コードスニペット:

JSON

```json wrap theme={null}
<button class="btn btn-cstm-dark btn-block btn-cta" data-dismiss="modal" aria-label="Close" onclick="moengage.setFirstName(document.getElementById('moe_name').value);moengage.setEmailId(document.getElementById('moe_email').value);moengage.trackEvent('MOE_RESPONSE_SUBMITTED',{firstName: document.getElementById('moe_name').value, email: document.getElementById('moe_email').value},{},{},false, true); moengage.trackClick(1); moengage.dismissMessage()">Subscribe</button>
```

#### ステップ 3: トラッキングしたデータを使用する

このフォームからデータがトラッキングされると、以下に示すようにユーザープロファイルで確認できます。また、このイベントを使用して、[Streams](https://www.moengage.com/docs/api/data/moengage-streams) または [Connector キャンペーン](/docs/ja/user-guide/campaigns-and-channels/connectors/create/create-a-connector-campaign)経由で MoEngage の外部にデータを送信することもできます。

![UserProfileData\_LeadGen.png](https://mintcdn.com/moengage/prFQLkdcYp4xSt9t/images/moengage_64cd5d.png?fit=max\&auto=format\&n=prFQLkdcYp4xSt9t\&q=85\&s=26eb94ee7b95bd2e7ef9b6ead1a1e2df)

## Full Screen - Carousel

カルーセルテンプレートを使用すると、複数の製品/サービス/オファーをユーザーに表示できます。以下に示すように、テンプレートは自動的にスクロールします。

![Carousel.png](https://mintcdn.com/moengage/prFQLkdcYp4xSt9t/images/moengage_66a317.png?fit=max\&auto=format\&n=prFQLkdcYp4xSt9t\&q=85\&s=68d62012dffe180e99f5dc4e8398140a)

このテンプレートの HTML コードは、以下に示すように、コンテンツ作成の 'Code View' セクションにあらかじめ入力されています。

![CarouselTemplate.png](https://mintcdn.com/moengage/2FjM3dGfEH1CYo8k/images/moengage_621941.png?fit=max\&auto=format\&n=2FjM3dGfEH1CYo8k\&q=85\&s=457db65fced5b21ec61001a609d78419)

### Fullscreen Carousel Template の詳細

#### ステップ 1: 各画像の CTA を定義する

以下のコードのハイライトされた行に示すように、カルーセルの各画像に Call to Action を定義できます。

![Carousel\_CodeView.png](https://mintcdn.com/moengage/-X0av6ek9AEOUtsy/images/moengage_c92b30.png?fit=max\&auto=format\&n=-X0av6ek9AEOUtsy\&q=85\&s=38f2335724d4d58459b49589e825fdf8)

コードスニペット:

HTML

```html wrap theme={null}
<a href="#" class="btn btn-cstm-light btn-cta" onclick="moengage.openRichLanding('https://www.moengage.com'); moengage.trackClick(1); moengage.dismissMessage()">get started</a>
```

HTML

```html wrap theme={null}
<a href="#" class="btn btn-cstm-light btn-cta" onclick="moengage.openRichLanding('https://www.moengage.com/nativ/'); moengage.trackClick(2); moengage.dismissMessage()">get started</a>
```

カルーセルテンプレートでは、ユーザーがカルーセルの 1 つの要素をクリックすると [https://www.moengage.com](https://www.moengage.com) にリダイレクトされ、次の要素をクリックするとイベントがトラッキングされます。同様に、[こちら](https://www.moengage.com/docs/developer-guide/components-for-sdk/javascript-bridge/javascript-bridge-for-html-in-apps)の JS Bridge セクションに記載されているアクションを定義できます。\
上記のコードスニペット内の moengage.trackClick(2) 関数は、クリックのトラッキングを担当します。関数内の引数 (1) と (2) により、カルーセルの異なる要素に対するクリックを区別できます。

### デバイスの向き

モバイルデバイスでは、このテンプレートは縦向きモードとの互換性が最も高くなります。このテンプレートを横向きモードで表示すると、ユーザーにはスクロールオプションが表示されます。タブレットと TV では、このテンプレートはどの向きでも期待どおりにレンダリングされます。

# すべての HTML テンプレートに共通する要素

## Code View セクション

Code View セクションでは、次の操作を実行できます。

1. HTML コードを編集して、要件に応じてテンプレートを変更します。
2. テンプレートで使用するファイルをアップロードします。この機能を使用すると、画像、CSS、JS ファイルを追加して HTML に埋め込むことができます。詳細については、Asset Uploader セクションを参照してください。

## テンプレート設定

Template Settings セクションでは、次の操作を実行できます。

![TmpltSettings.png](https://mintcdn.com/moengage/rmgWdhG7TCISpEIz/images/moengage_d51e4e.png?fit=max\&auto=format\&n=rmgWdhG7TCISpEIz\&q=85\&s=7693621042af393148fa75b8936df441)

1. テンプレートのデバイスの向きを設定します。次のオプションがあります。 ![TemplateSettings\_2.png](https://mintcdn.com/moengage/rcvpxihxIp--_HSE/images/moengage_928b18.png?fit=max\&auto=format\&n=rcvpxihxIp--_HSE\&q=85\&s=bcf3f20e93f1fcce05f23cee665a5c4f)
2. 以下に示すように、Allowed Device Types セクションで許可するデバイスタイプを選択します。 ![TmpltSettings.png](https://mintcdn.com/moengage/wIFGWsQFEjsz2j4v/images/moengage_e12528.png?fit=max\&auto=format\&n=wIFGWsQFEjsz2j4v\&q=85\&s=fea5a2c995382aca4c504cbcff58d2a8)

テンプレートに必要な変更をすべて加えた後、Preview をクリックすると、許可されたデバイスの向きのモードでテンプレートをプレビューできます。許可された向きが 'Both' の場合は、縦向きと横向きの両方のプレビューを表示できます。Portrait または Landscape のみを選択した場合は、選択したデバイスの向きのみがプレビューに表示されます。

# HTML テンプレートの準備

HTML アプリ内メッセージは、モバイルアプリ上でフルスクリーンの Web ビュー内にレンダリングされ、MoEngage SDK は HTML に何の操作も加えずにそのままレンダリングします。

アプリ内メッセージとして表示する HTML テンプレートを準備する際は、次の点に注意してください。

* MoEngage が提供する[サンプル HTML テンプレート](/docs/ja/user-guide/campaigns-and-channels/in-app-message/templates/sample-html-in-app-templates)を使用してください。直接ダウンロードして MoEngage にアップロードすることも、必要に応じて編集することもできます。これらのサンプルテンプレートは、独自の HTML テンプレートをゼロから構築する際の参考にもなります。
* HTML テンプレートは、常にモバイルアプリの画面全体を占有します。テンプレートの HTML が画面全体を占有しない場合でも、そこには透明な Web ビューが存在し、ユーザーがアプリを操作できなくなります。この仕様のため、テンプレートの背後には常に透明なオーバーレイを配置することをお勧めします。これは HTML テンプレートの背景として設定できます。
* テンプレートからのすべてのインタラクションは、キャンペーンのパフォーマンス統計 (クリックなど) を計算するため、またはユーザーデータポイント (イベント、ユーザー属性 - メール、携帯電話番号、評価など) として、MoEngage にデータポイントとして記録する必要があります。[JavaScript Bridge for HTML In-Apps](https://www.moengage.com/docs/developer-guide/components-for-sdk/javascript-bridge/javascript-bridge-for-html-in-apps) を活用し、HTML テンプレート内で使用してください。
* iOS では、次の 2 点に注意する必要があります。
  * デフォルトでは、Web ビューでズームとスケーリングが有効になっています。無効にするには、HTML でメタタグを使用する必要があります。
  * ノッチのある iOS デバイスでは、コンテンツがノッチと重ならないように、セーフエリアをサポートするよう CSS を更新してください。
* 画像で説明されているように HTML テンプレート内で指定された背景画像については、これらの URL がテンプレートのスタイル内にあるため、MoEngage は URL をプリフェッチしません。**背景画像にはアップロードしたアセットの URL を使用しないでください。** このような場合は、MoEngage SDK が実行時にダウンロードしてレンダリングする絶対 URL が必要です。その他のすべての画像については、アプリ内メッセージのレンダリング時にバッファが発生しないよう、画像をプリフェッチします。 ![Screen\_Shot\_2021-09-06\_at\_1.08.44\_PM.png](https://mintcdn.com/moengage/wIFGWsQFEjsz2j4v/images/moengage_df5641.png?fit=max\&auto=format\&n=wIFGWsQFEjsz2j4v\&q=85\&s=22d1b7a97ca5240e1282dbbf7aacf102)

## サポートされているコンポーネント

HTML アプリ内テンプレートはすべての HTML および CSS コンポーネントをサポートしていますが、次のコンポーネントは特に重要で、HTML アプリ内キャンペーンから大きな価値を引き出すことができます。

| 要素 | ユースケース |
| - | - |
| Audio / Video | アプリ内キャンペーンからビデオファイルやオーディオファイルを再生して、ユーザーに情報を伝えることができます。これらは、ユーザーのオンボーディングプロセスで特に役立ちます。 |
| Image / GIF | アプリ内キャンペーンでオファー、コンテンツ、製品、サービスを宣伝し、リッチな画像でユーザーの注意を引くことができます。  注: GIF ファイルはアップロードできませんが、絶対 URL を使用してテンプレートに追加できます。 |
| Input | HTML アプリ内キャンペーンを使用して、メールアドレスや携帯電話番号などのユーザー入力を取得できます。 |
| Survey | HTML アプリ内キャンペーンを使用して、モバイルアプリでアンケートを実施できます。 |
| Carousel | カルーセルのようなインタラクションを使用して、1 つのポップアップで複数のオファー、製品、サービスを表示できます。 |

# カスタムテンプレートエディター

カスタムテンプレートエディターでは、次のオプションを使用して HTML テンプレートを作成できます。

1. [Self-Handled](/docs/ja/user-guide/campaigns-and-channels/in-app-message/templates/self-handled-in-app-template)
2. [Zip Upload](/docs/ja/user-guide/campaigns-and-channels/in-app-message/templates/html-in-app-templates#zip-file-upload)
3. [Custom HTML Upload](/docs/ja/user-guide/campaigns-and-channels/in-app-message/templates/html-in-app-templates#custom-html-upload)

![Custom\_template\_editor.png](https://mintcdn.com/moengage/MkyldVVKHHCZ-kMR/images/moengage_ae6e00.png?fit=max\&auto=format\&n=MkyldVVKHHCZ-kMR\&q=85\&s=99c28df18f9a55b30c58740bdaaa8ffb)

## ZIP ファイルのアップロード

アプリ内キャンペーン作成のテンプレート選択画面でこのオプションを選択すると、HTML とアセットを 1 つの ZIP ファイルとしてまとめてアップロードできます。

このオプションを選択すると、テンプレートの ZIP ファイルをアップロードできるポップアップが開きます。

![Screen\_Shot\_2021-09-03\_at\_10.29.12\_AM.png](https://mintcdn.com/moengage/rcvpxihxIp--_HSE/images/moengage_9116d5.png?fit=max\&auto=format\&n=rcvpxihxIp--_HSE\&q=85\&s=16eec7ef0c8c6559ac6944ec93fd5f29)

ZIP ファイルを準備する際は、次の点を必ず守ってください。

* .zip ファイルのサイズが 5MB 未満であることを確認してください。
* Zip 内のファイル名に \*, /, `\`, &, \~, " を含めないでください。
* すべての画像は JPG、JPEG、PNG、または SVG 形式である必要があります。
* GIF ファイルはアップロードできませんが、絶対 URL を使用してテンプレートに追加できます。
* 画像に指定する相対パスは、大文字と小文字の区別を含め、zip フォルダーの構造と一致している必要があります。

## カスタム HTML のアップロード

アプリ内キャンペーン作成のテンプレート選択画面でこのオプションを選択すると、テンプレートの HTML を MoEngage ダッシュボードに直接貼り付け、必要に応じてアセットをアップロードできます。このオプションを選択すると、コードビューエディターにリダイレクトされ、テンプレートの HTML コードを貼り付けることができます。

![Screen\_Shot\_2021-08-31\_at\_10.30.19\_AM.png](https://mintcdn.com/moengage/rmgWdhG7TCISpEIz/images/moengage_d5a532.png?fit=max\&auto=format\&n=rmgWdhG7TCISpEIz\&q=85\&s=3b41b7b87355bdfb685ecd5f4354b50a)

## アセットアップローダー

カスタム HTML テンプレートを使用してアプリ内キャンペーンを作成する際に、独自のアセットをアップロードし、テンプレートの HTML にリンクできます。

![ezgif.com-gif-maker\_\_1\_.gif](https://mintcdn.com/moengage/rlD8iAX6JQFx0hql/images/moengage_b9d687.png?s=c535bb71f35353c0116095b9e17e48ee)

## JavaScript Bridge

HTML アプリ内メッセージからのアクションをトラッキングするには、JavaScript Bridge が必要です。アクションには、クリックのトラッキング、メッセージのクローズ、データのトラッキングなどがあります。HTML テンプレートを準備したら、アクションと統計をトラッキングするために、テンプレートに JS メソッドを統合する必要があります。詳細については、[HTML アプリ内テンプレートで使用できる JavaScript メソッド](https://www.moengage.com/docs/developer-guide/components-for-sdk/javascript-bridge/javascript-bridge-for-html-in-apps)を参照してください。

## テンプレートエラーの修正

MoEngage でアプリ内キャンペーンを作成する際に、以下に示すように最大 3 種類の警告が表示される場合があります。

![Screen\_Shot\_2021-09-01\_at\_5.05.33\_PM.png](https://mintcdn.com/moengage/7H2dU4CG2W0DQCPI/images/moengage_703d37.png?fit=max\&auto=format\&n=7H2dU4CG2W0DQCPI\&q=85\&s=bb47d43eafba8f0b1208cdd3a314ccdd)

次の表は、警告とその解決方法を示しています。

| エラーメッセージ | 影響 | 解決方法 |
| - | - | - |
| You have not included a close button in your template. When your users see this template, they will not be able to close the template without clicking on it. | テンプレートにクローズメソッドを追加していないため、ユーザーはアプリ内メッセージを閉じることができません。 | テンプレートに JS Bridge メソッド MoEngage.closeMessage() を含めてください。 |
| Click tracking is not implemented in your template. You will not be able to see any clicks for this campaign in your campaign stats. | MoEngage のキャンペーン分析でクリックを確認できません。 | 必要に応じて JS Bridge メソッド MoEngage.trackClicks() を含めてください。 |
| Some of the uploaded assets are not referenced in your template. | このメッセージは、いくつかのアセットをアップロードしたものの、その一部をテンプレートで使用していないことを示しています。 | View Uploaded Assets をクリックし、必要なアセットがテンプレートで漏れなく参照されていることを確認してください。 |

# HTML テンプレートコンテンツのパーソナライズ

すべての HTML テンプレートのコンテンツをパーソナライズできます。キャンペーン作成のステップ 2 の Content タブで、パーソナライズしたいコード行に移動し、**@** と入力します。

User Attributes、User Events、Product Sets、Content APIs、Content Blocks を使用してコンテンツをパーソナライズできます。

詳細については、以下を参照してください。

* [MoEngage テンプレート言語 (JINJA)](/docs/ja/user-guide/campaigns-and-channels/getting-started/message-personalization/jinja-templating-language)
* [派生イベントと属性](/docs/ja/user-guide/data/event-data/derived-events-and-attributes)
* [Product Sets](/docs/ja/user-guide/content/recommendations/getting-started/catalogs)
* [Content APIs](/docs/ja/user-guide/campaigns-and-channels/getting-started/campaign-content/content-apis)
* [Content Block](/docs/ja/user-guide/content/content-blocks/content-blocks)

![HTMLInApp.gif](https://mintcdn.com/moengage/cVruC-B7I1TnIZ0h/images/moengage_d81def.png?s=ada55ca8d02d701ad7c0ca09b4b0bc47)

次の操作を行います。

1. @ と入力してコンテンツをパーソナライズします。
2. Data personalization または Content Block のいずれかをクリックします。
3. Data personalization タブをクリックし、ドロップダウンから次のいずれかを選択します。
   1. User Attributes
   2. パーソナライズの代替 (フォールバック) として、次のいずれかを選択します。
      * No Fallback\
        パーソナライズされたコンテンツ用のオプションを選択します。このオプションでは、パーソナライズが機能しない場合に代替は使用されません。
      * Do not send In-App\
        パーソナライズが機能しない場合にアプリ内メッセージを送信しないオプションを選択します。
      * Replace Text\
        パーソナライズが機能しない場合に使用するテキストを入力または貼り付けます。
   3. Product Sets
   4. Content API
      1. Content API のパラメーターの値を変更します。
4. Content Block をクリックします。
   1. 挿入するコンテンツブロックを選択します。
   2. Insert only the content of the content block をクリックします。

      > [!NOTE]
      >
      > このオプションを選択した場合:
      >
      > * コンテンツのみが挿入されます。
      > * コンテンツはコンテンツブロックとの接続が解除されます。
      > * コンテンツブロックでのコンテンツの更新は、挿入されたコンテンツには反映されません。
5. Done をクリックします。

# HTML テンプレートのテスト

HTML テンプレートのプレビューをテストするには、次のようにデバイスプレビューを使用します。

![Screen\_Shot\_2021-09-01\_at\_3.39.53\_PM.png](https://mintcdn.com/moengage/60BzFdXTJDO5dnCb/images/moengage_391333.png?fit=max\&auto=format\&n=60BzFdXTJDO5dnCb\&q=85\&s=a3f0fb5411143283ba8d449d7ebc466e)

以下に示すように、*View portrait and landscape* ボタンをクリックして、アプリ内キャンペーンの横向きモードと縦向きモードのプレビューを表示することもできます。

![Screen\_Shot\_2021-09-01\_at\_3.39.43\_PM.png](https://mintcdn.com/moengage/epqsPEpMsGQCYy1r/images/moengage_5b7a0c.png?fit=max\&auto=format\&n=epqsPEpMsGQCYy1r\&q=85\&s=e6c4fb273b4258f4954f48576336f4b0)

# サンプルテンプレート

サンプル HTML テンプレートは、こちらの[記事](/docs/ja/user-guide/campaigns-and-channels/in-app-message/templates/sample-html-in-app-templates)で入手できます。

# その他の新機能

HTML アプリ内メッセージでは、さらに次の機能を活用できます。

## 横向きモードでのアプリ内メッセージの表示

アプリ内キャンペーンを横向きモードで表示する必要がある場合は、HTML アプリ内テンプレートを活用し、Template Settings に移動して設定できます。

![DeviceOrientation.png](https://mintcdn.com/moengage/t9nft78wsoLTI2Nx/images/moengage_28ede9.png?fit=max\&auto=format\&n=t9nft78wsoLTI2Nx\&q=85\&s=3a494d998e51cc3696a8c06fbad41a37)

SDK バージョンを 11.4.00 (Android) および 7.1.0 (iOS) にアップグレードする必要があります。デバイスの向きのデフォルトの選択は Both で、HTML アプリ内キャンペーンはデフォルトで縦向きモードと横向きモードの両方で表示されます。

注意点:

* アプリ内キャンペーンが縦向きモードのみに設定されている場合、デバイスが縦向きモードから横向きモードに回転すると、アプリ内メッセージは閉じられます。
* デバイスが縦向きモードで、アプリ内キャンペーンが横向きモードのみに設定されている場合、アプリ内キャンペーンは表示されません。
* 選択したデバイスの向きは、異なるバリエーションやプラットフォーム間で同じままです。
* Android では、デバイスを回転させるとアプリ内メッセージが閉じられ、再度レンダリングされます。

## タブレットまたは TV でのアプリ内メッセージの表示

タブレットや TV でアプリ内メッセージを表示する必要がある場合は、HTML アプリ内キャンペーンを活用できます。

![DeviceTypes.png](https://mintcdn.com/moengage/2CGhjk8ZDWEC5ocb/images/moengage_f7f161.png?fit=max\&auto=format\&n=2CGhjk8ZDWEC5ocb\&q=85\&s=cd1c11e811d23fc5283ae585595e1438)

デフォルトの選択は Mobile のみのため、ターゲットにする必要がある追加のデバイスは、キャンペーン作成時に別途設定する必要があります。

## ネイティブテンプレートの HTML コードのコピー

*\*\* HTML コードをコピーする前に、DB で HTML アプリ内メッセージが有効になっていることを確認してください\*\**

ネイティブのアプリ内テンプレートを変更したいのに、できなかったことはありませんか? ボタンをクリックするだけでネイティブテンプレートの HTML をコピーし、カスタム HTML エディターで編集して、キャンペーンを公開できるようになりました。

手順は次のとおりです。

1. キャンペーン作成のステップ 2 で、編集したいテンプレートを選択します。
2. テンプレートのプレビューの上にある "Copy HTML" をクリックして、選択したテンプレートの HTML コードをコピーします。 ![Copy\_HTML.png](https://mintcdn.com/moengage/t_8awpRKFC9RNHlT/images/moengage_aa13a3.png?fit=max\&auto=format\&n=t_8awpRKFC9RNHlT\&q=85\&s=3b4d1af23eb01624809fb52a29d90e22)
3. 次に、ケバブメニューをクリックしてテンプレートを変更します。 ![Change\_template.png](https://mintcdn.com/moengage/MkyldVVKHHCZ-kMR/images/moengage_ad20e9.png?fit=max\&auto=format\&n=MkyldVVKHHCZ-kMR\&q=85\&s=0848ab908b433a4730dbcbbbedefa5b1)
4. Custom template editor タブから "Custom HTML Upload" を選択します。 ![Select\_custom\_HTML.png](https://mintcdn.com/moengage/0iWkm50wROjmHH3Z/images/moengage_d0bedb.png?fit=max\&auto=format\&n=0iWkm50wROjmHH3Z\&q=85\&s=0b2cb5fd0155342996ac724d9a76ad43)
5. エディター内の既存のコードをすべて削除し、cmd+v または ctrl+v を使用して新しいコードをエディターに貼り付けます。 ![Copy\_HTML\_after\_paste.png](https://mintcdn.com/moengage/dLyLAwgfsm1v6_MY/images/moengage_814560.png?fit=max\&auto=format\&n=dLyLAwgfsm1v6_MY\&q=85\&s=1f69b6ab6a590edcbe563c99dba1dd95)
6. これで、テンプレートのコードを編集し、ビジネス目標に応じて変更できます。

**この機能を使用する際の注意点**

* コピーしたコードにはクリックトラッキングがデフォルトで含まれないため、この場合はクリックトラッキングを実装する必要があります。方法については[こちら](https://www.moengage.com/docs/developer-guide/components-for-sdk/javascript-bridge/javascript-bridge-for-html-in-apps#track-event)をお読みください。
* ネイティブテンプレートで設定されたアクションは、ここに自動的にコピーされません。お客様側でゼロから実装する必要があります。たとえば、別の画面に移動するコードを追加する方法は[こちら](https://www.moengage.com/docs/developer-guide/components-for-sdk/javascript-bridge/javascript-bridge-for-html-in-apps#navigation-actions)をご覧ください。
* クローズボタンも実装する必要があります。方法は[こちら](https://www.moengage.com/docs/developer-guide/components-for-sdk/javascript-bridge/javascript-bridge-for-html-in-apps#track-dismiss)をご覧ください。
* テンプレートに動的なコンポーネントがある場合は、JavaScript を使用してコード内でインタラクションも処理してください。
* ナッジテンプレートの HTML コードをエディターに貼り付けると、公開時にアプリ内に埋め込まれるのではなく、オーバーレイポップアップとして表示されます。
* 公開後のエラーを避けるため、横向きモードと縦向きモードの両方でキャンペーンをテストしてください。

# よくある質問

**HTML アプリ内メッセージテンプレートでカスタムフォントを使用するにはどうすればよいですか?**

1. 拡張子が .ttf のフォントファイルを用意します。
2. カスタム HTML テンプレートの **Code View** で、右上隅の **Upload** をクリックします。
3. アップロードする前に、ウィンドウに記載されているガイドラインに従ってください。コンピューターからファイルをアップロードし、**Done** をクリックします。 ![2025-03-19\_16-24-18 (1).gif](https://mintcdn.com/moengage/MBpE2Km0jgeTJl4Q/images/moengage_02bb3f.png?s=adaefb73ec2010db5fde8968c0ed69b0)
4. フォントの URL をコピーします。これを行うには、以下に示すように **View uploaded** ボタンをクリックし、**Copy URL** をクリックします。 ![Screenshot 2025-03-19 at 4.26.28 PM.png](https://mintcdn.com/moengage/rcvpxihxIp--_HSE/images/moengage_948f81.png?fit=max\&auto=format\&n=rcvpxihxIp--_HSE\&q=85\&s=437505f6b45d6aabd1d4373b630e3999)
5. HTML コード内に次のスタイルを追加します。コピーしたフォントの URL を @font-face セクションで使用します。HTML
   ```html wrap theme={null}
   <html><head><style>@font-face { font-family: Pacifico; src: url('assets/17423800370465841_gy3/Pacifico.ttf'); } h1 {font-family: Pacifico}</style></head><body><h1>Hey, June</h1></body></html>
   ```
   ![Html Template](https://mintcdn.com/moengage/ug1DZn3QSotOzs8r/images/html-template.png?fit=max\&auto=format\&n=ug1DZn3QSotOzs8r\&q=85\&s=4c83016fd7639ac4bcccfa68e9630912)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.