​

はじめに

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

​

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

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

​

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

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

​

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

1. アンケートテンプレート
2. Popup-Promotional
3. FullScreen- Lead Gen
4. FullScreen- Carousel
5. ゲーミフィケーションテンプレート - スピンホイールとスクラッチカード

​

アンケートテンプレート

1. Popup Survey Template
2. Survey Popup and Emoji
3. Survey popup- Radio buttons with emoji
4. Survey popup - Multi Screen
5. Survey popup - NPS Slider

​

Popup Survey Template

​

Pop-up Survey Template の詳細

​

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

<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: ユーザーの回答時にイベントをトリガーする

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

​

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

​

Survey popup- emoji and text box

​

テンプレートの設定

<img src="https://cdn.moengage.com/inapp/html-template11/assets/img/hero-image.png" alt="hero" >

​

Survey popup- Radio buttons with emoji

​

テンプレートの設定

​

Survey popup - Multi Screen

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

​

テンプレートの設定

​

Survey popup - NPS slider

​

テンプレートの設定

​

Popup-Promotional Template

​

Pop-up Promotional Template の詳細

​

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

<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

​

Fullscreen Lead Gen Template の詳細

​

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

<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: トラッキングしたデータを使用する

​

Full Screen - Carousel

​

Fullscreen Carousel Template の詳細

​

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

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

<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>

​

デバイスの向き

​

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

​

Code View セクション

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

​

テンプレート設定

1. テンプレートのデバイスの向きを設定します。次のオプションがあります。
2. 以下に示すように、Allowed Device Types セクションで許可するデバイスタイプを選択します。

​

HTML テンプレートの準備

• MoEngage が提供するサンプル HTML テンプレートを使用してください。直接ダウンロードして MoEngage にアップロードすることも、必要に応じて編集することもできます。これらのサンプルテンプレートは、独自の HTML テンプレートをゼロから構築する際の参考にもなります。
• HTML テンプレートは、常にモバイルアプリの画面全体を占有します。テンプレートの HTML が画面全体を占有しない場合でも、そこには透明な Web ビューが存在し、ユーザーがアプリを操作できなくなります。この仕様のため、テンプレートの背後には常に透明なオーバーレイを配置することをお勧めします。これは HTML テンプレートの背景として設定できます。
• テンプレートからのすべてのインタラクションは、キャンペーンのパフォーマンス統計 (クリックなど) を計算するため、またはユーザーデータポイント (イベント、ユーザー属性 - メール、携帯電話番号、評価など) として、MoEngage にデータポイントとして記録する必要があります。JavaScript Bridge for HTML In-Apps を活用し、HTML テンプレート内で使用してください。
• iOS では、次の 2 点に注意する必要があります。
  • デフォルトでは、Web ビューでズームとスケーリングが有効になっています。無効にするには、HTML でメタタグを使用する必要があります。
  • ノッチのある iOS デバイスでは、コンテンツがノッチと重ならないように、セーフエリアをサポートするよう CSS を更新してください。
• 画像で説明されているように HTML テンプレート内で指定された背景画像については、これらの URL がテンプレートのスタイル内にあるため、MoEngage は URL をプリフェッチしません。背景画像にはアップロードしたアセットの URL を使用しないでください。 このような場合は、MoEngage SDK が実行時にダウンロードしてレンダリングする絶対 URL が必要です。その他のすべての画像については、アプリ内メッセージのレンダリング時にバッファが発生しないよう、画像をプリフェッチします。

​

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

​

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

1. Self-Handled
2. Zip Upload
3. Custom HTML Upload

​

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

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

​

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

​

アセットアップローダー

​

JavaScript Bridge

​

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

​

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

• MoEngage テンプレート言語 (JINJA)
• 派生イベントと属性
• Product Sets
• Content APIs
• Content Block

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 をクリックします。
      このオプションを選択した場合:

      • コンテンツのみが挿入されます。
      • コンテンツはコンテンツブロックとの接続が解除されます。
      • コンテンツブロックでのコンテンツの更新は、挿入されたコンテンツには反映されません。
5. Done をクリックします。

​

HTML テンプレートのテスト

​

サンプルテンプレート

​

その他の新機能

​

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

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

​

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

​

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

1. キャンペーン作成のステップ 2 で、編集したいテンプレートを選択します。
2. テンプレートのプレビューの上にある “Copy HTML” をクリックして、選択したテンプレートの HTML コードをコピーします。
3. 次に、ケバブメニューをクリックしてテンプレートを変更します。
4. Custom template editor タブから “Custom HTML Upload” を選択します。
5. エディター内の既存のコードをすべて削除し、cmd+v または ctrl+v を使用して新しいコードをエディターに貼り付けます。
6. これで、テンプレートのコードを編集し、ビジネス目標に応じて変更できます。

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

​

よくある質問

1. 拡張子が .ttf のフォントファイルを用意します。
2. カスタム HTML テンプレートの Code View で、右上隅の Upload をクリックします。
3. アップロードする前に、ウィンドウに記載されているガイドラインに従ってください。コンピューターからファイルをアップロードし、Done をクリックします。
4. フォントの URL をコピーします。これを行うには、以下に示すように View uploaded ボタンをクリックし、Copy URL をクリックします。
5. HTML コード内に次のスタイルを追加します。コピーしたフォントの URL を @font-face セクションで使用します。HTML
   <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>