イントロダクション

アプリ内メッセージを利用して、アプリ内でユーザーがいるときにアプリのユーザーを引き込むための複雑なアプリ内メッセージングレイアウトを作成し、使用することができます。

HTMLインアプリメッセージでサポートされている機能は次のとおりです。

• モバイルアプリ内でポップアップを表示するためにHTMLテンプレートを使用してください。これにより、アプリ内キャンペーンを使用して、調査、リード生成、スピン・ザ・ホイールなどの機能がアンロックされます。サンプルテンプレートは こちら で入手できます。
• アプリ内メッセージングキャンペーンでの横向きおよび縦向きモードのサポート
• タブレットおよびTV OS向けのアプリ内メッセージングキャンペーンのサポート
• カスタムHTMLテンプレートをアップロード：独自のアプリ内テンプレートを作成し、ZIPファイルとしてアップロードするか、アプリ内キャンペーンを作成する際にHTMLを単純に貼り付けてください。

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

In-appキャンペーン作成の第2ステップ（キャンペーン作成のコンテンツセクション）では、3つのタブがあります。それらは次のとおりです：

1. すべてのテンプレート
2. カスタムテンプレートエディタ
3. 保存されたテンプレート

すべてのテンプレートセクションには、キャンペーン作成に使用できる4つの標準のプリビルドHTMLテンプレートが用意されています。カスタムテンプレートエディタでは、HTMLテンプレートを作成でき、HTMLコードをエディタに入力または貼り付けることができます。

すべてのテンプレートセクションにあるプリビルドHTMLテンプレート

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

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

プレビルドHTMLテンプレート

MoEngageによってサポートされているHTMLテンプレートは4つあり、それらは次のとおりです：

1. 調査テンプレート
2. ポップアッププロモーション
3. フルスクリーン - リード生成
4. フルスクリーン - カルーセル
5. ゲーミフィケーションテンプレート - スピン・ザ・ホイールとスクラッチカード

調査テンプレート

調査テンプレートは、調査を迅速に作成するために使用できる事前に設計されたレイアウトまたはフォーマットです。特定のタイプの調査に一般的な事前に作成された質問が付いてくることがよくあります。たとえば、顧客満足度、従業員フィードバック、イベント評価などです。「使用ケースでフィルタリング」セクションの下にある「調査」フィルターを選択することで、調査テンプレートを見つけることができます。以下の調査テンプレートは、アプリ内キャンペーン用に利用可能です：

1. ポップアップ調査テンプレート

2. アンケートポップアップと絵文字
3. アンケートポップアップ - 絵文字付きラジオボタン
4. アンケートポップアップ - マルチスクリーン
5. 調査ポップアップ - NPSスライダー

ポップアップ調査テンプレート

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

このテンプレートのHTMLコードは、以下に示すように、コンテンツ作成の「コードビュー」セクションに事前に入力されています。

ポップアップ調査テンプレートの詳細

このテンプレートは、ユーザーの調査への回答をキャプチャするために使用できます。

ステップ 1: ユーザーの応答をユーザー属性にキャプチャします

アンケートの回答は、以下の画像に示すようにユーザー属性としてキャプチャされます。コードビューはテンプレートのHTMLコードを表示しており、Popup-Survey Templateのコードの88行目は、ユーザーが提供した入力をユーザー属性としてキャプチャすることに関係しています - "survey_response". 必要に応じてユーザー属性名をカスタマイズできます。

コードスニペット:

<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();">フィードバックを共有</a>

ステップ2：ユーザーの応答でイベントをトリガーする

ユーザーが応答を送信すると、イベント "MOE_RESPONSE_SUBMITTED" がトリガーされます。テンプレートのコードでは、これは88行目で行われています。ユーザーのフィードバックフォームからの入力をキャプチャするイベント属性 "survey_response" は、MOE_RESPONSE_SUBMITTEDイベントを追跡するために使用されます。必要に応じて、イベントおよびイベント属性名をカスタマイズできます。追跡された後、このイベントはMoEngageの外部にデータを送信するためや、必要に応じてフォローアップキャンペーンをトリガーするために使用できます。

コードスニペット

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

ステップ3：データ追跡

このテンプレートからのデータは、以下に示すようにMoEngageユーザープロファイルに追跡され、保存されます：

このテンプレートでは、ポートレートモードがモバイルデバイスと最も互換性があります。ユーザーは、このテンプレートが横向きモードで表示されるときにスクロールオプションを取得します。このテンプレートは、どの向きでもタブレットやテレビで期待通りに表示されます。

アンケートポップアップ - 絵文字とテキストボックス

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

このテンプレートのHTMLコードは、以下に示すようにコンテンツ作成の「コードビュー」セクションに事前に入力されています。

テンプレートを設定する

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

テンプレート内の画像を変更するには、27行目に移動し、画像のsrcを自分の画像リンクに置き換えるか、「アップロード」をクリックしてエディタに画像をアップロードし、「アップロードしたものを表示」からURLをコピーして、それを画像のsrcで使用します。

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

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

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

絵文字とそのラベルは、 フィードバック変数 を修正することで変更できます 85行目に。

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

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

ステップ 4: データ追跡

クリックとデータトラッキングが既存のテンプレートにデフォルトで追加されました。ボタンを追加する場合は、クリックトラッキングも追加してください。トラッキングについて詳しくは、 こちらのドキュメント を参照してください。

フィードバックを提出したユーザーは、セグメントに移動して -> セグメントを作成し、「MOE_RESPONSE_SUBMITTED」イベントに基づいてユーザーをセグメント化することで見つけることができます。

調査ポップアップ - 絵文字付きラジオボタン

顧客から迅速なアンケート回答を集めたい場合は、絵文字テンプレート付きのラジオボタンを選ぶべきです。デフォルトでは、ユーザーが選択できる5つのオプションのリストが付属しています。ラジオボタンのテンプレートであるため、ユーザーは1つのオプションしか選択できません。

このテンプレートのHTMLコードは、以下に示すように、コンテンツ作成の「コードビュー」セクションに事前に入力されています。あなたの使用ケースに応じて変更できます。

テンプレートを設定する

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

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

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

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

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

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

ステップ4: データ追跡

クリックとデータ追跡が既存のテンプレートにデフォルトで追加されました。ボタンを追加する場合は、クリック追跡を追加することを確認してください。追跡について詳しく知りたい場合は、 このドキュメント を参照してください。

フィードバックを提出したユーザーは、セグメントに移動し -> セグメントを作成し、次に「MOE_RESPONSE_SUBMITTED」イベントに基づいてユーザーをセグメント化することで見つけることができます。

調査ポップアップ - マルチスクリーン

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

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

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

テンプレートを設定する

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

Y ウェルカムスクリーンの画像とテキストは、27行目から34行目まで変更できます。 ウェルカムスクリーンの画像とテキストは、27行目から34行目まで変更できます。

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

95行から174行まで、各画面の質問と関連オプションを変更できます。また、「data」変数を修正することで、使用例に応じて画面を削除したり、追加したりできます。画面を追加するには、画面を複製し、画面IDと値を変更してください。

ステップ3: データ追跡

クリックとデータトラッキングが既存のテンプレートにデフォルトで追加されました。ボタンを追加する場合は、クリックトラッキングも追加してください。トラッキングの詳細については、 このドキュメント を参照してください。

フィードバックを提出したユーザーを見つけるには、セグメントに移動し -> セグメントを作成し、その後「MOE_RESPONSE_SUBMITTED」イベントに基づいてユーザーをセグメント化します。

調査ポップアップ - NPSスライダー

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

このテンプレートのHTMLコードは、コンテンツ作成の「コードビュー」セクションにあらかじめ入力されています。以下に示す通りです。あなたの使用ケースに合わせて変更できます。

テンプレートを設定する

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

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

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

ポップアップの見出しは36行目から変更できます。

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

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

ステップ 4: データ追跡

クリックとデータトラッキングが既存のテンプレートにデフォルトで追加されました。ボタンを追加する場合は、クリックトラッキングも追加してください。トラッキングについて詳しくは、 このドキュメント を参照してください。

フィードバックを提出したユーザーは、セグメントに移動して -> セグメントを作成し、次に「MOE_RESPONSE_SUBMITTED」イベントに基づいてユーザーをセグメント化することで見つけることができます。

ポップアッププロモーションテンプレート

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

このテンプレートのHTMLコードは、以下に示すように、コンテンツ作成の「コードビュー」セクションに事前に入力されています。

ポップアッププロモーショナルテンプレートの詳細

このテンプレートは、モバイルアプリで進行中のオファー/ディール/セールを促進するために使用できます。

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

プロモーションキャンペーンと同様に、目的はユーザーにボタンやリンクをクリックさせ、プロモートされているオファーやディールが表示されるランディングページに誘導することです。このテンプレートのボタンを設定して、クリックしたときにユーザーがアクセスすべきURLを開くことができます。以下のようにJSブリッジを実装することで、統計を追跡できます。

コードスニペット:

 <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()" >始める</a>

フルスクリーン - リードジェンテンプレート

リードジェネレーションテンプレートは、匿名のアプリユーザーのメールIDまたは携帯電話番号をキャプチャするために使用できます。

このテンプレートのHTMLコードは、以下に示すように、コンテンツ作成の「コードビュー」セクションに事前に入力されています。

フルスクリーンリードジェンテンプレートの詳細

ステップ 1: MoEngage 属性にユーザー詳細をキャプチャする

ユーザーが提供した入力を標準のMoEngage属性に保存します - 名前とメールアドレスそれぞれ。

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

ユーザーがこのフォームに回答を提出したときに、イベント「MOE_RESPONSE_SUBMITTED」をトリガーします。このイベントを利用して、MoEngageを介してこのデータを外部APIエンドポイントに送信できます。下の画像に強調表示されたコードは、ユーザー属性およびイベントとして入力データを追跡する役割を担っています。

コードスニペット:

<button class="btn btn-cstm-dark btn-block btn-cta" data-dismiss="modal" 
aria-label="閉じる" 
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()">購読する</button>

ステップ3：追跡データを使用する

このフォームからデータが追跡されると、以下に示すようにユーザープロファイルで確認でき、また、イベントを使用してデータをMoEngageの外部に送信することができます。 Streams や Connector campaigns.

フルスクリーン - キャロセル

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

このテンプレートのHTMLコードは、以下に示すようにコンテンツ作成の「コードビュー」セクションに事前に入力されています。

フルスクリーンカルーセルテンプレートの詳細

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

カルーセルの各画像に対して、以下の強調表示されたコード行に示すように、アクションを呼びかけることができます。

コードスニペット:

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

<a href="#" class="btn btn-cstm-light btn-cta" onclick="moengage.openRichLanding('https://www.moengage.com/nativ/'); moengage.trackClick(2); moengage.dismissMessage()">始める</a>

カルーセルテンプレートでは、ユーザーがカルーセルの要素の1つをクリックすると、ユーザーは https://www.moengage.com にリダイレクトされ、次の要素をクリックすると、イベントが追跡されます。同様に、JS Bridgeセクションに記載されているアクションを定義できます こちら 。
上記のコードスニペット内の moengage.trackClick(2) 関数は、クリックを追跡する役割を担っています。関数内の引数 (1) および (2) は、カルーセルの異なる要素のクリックを区別するのに役立ちます。

デバイスの向き

モバイルデバイスでは、ポートレートモードがこのテンプレートと最も互換性があります。このテンプレートが横向きモードで表示されると、ユーザーはスクロールオプションを取得します。タブレットやテレビでは、このテンプレートはどの方向でも期待通りに表示されます。

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

コードビューセクション

コードビューセクションでは、次のことができます：

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

テンプレート設定

テンプレート設定セクションでは、次のことができます：

1. テンプレートのデバイスの向きを設定します。次のオプションがあります：
2. 以下に示すように、許可されたデバイスタイプセクションで許可されたデバイスタイプを選択してください:

テンプレートに必要な変更を加えた後、プレビューをクリックして、許可されたデバイスの向きモードでテンプレートをプレビューします。許可された向きが「両方」の場合、ポートレートとランドスケープの両方のプレビューを表示できます。ポートレートまたはランドスケープのいずれかのみが選択されている場合、プレビューには選択されたデバイスの向きのみが表示されます。

HTMLテンプレートの準備

HTML インアプリは、モバイルアプリ内のフルスクリーンウェブビューでレンダリングされ、MoEngage SDK はそれを操作せずにそのままレンダリングします。

In-Appメッセージとして表示するためのHTMLテンプレートを準備する際は、以下の点を忘れないでください：

• MoEngageが提供する サンプルHTMLテンプレート を使用してください。これらのテンプレートは、直接ダウンロードしてMoEngageにアップロードすることも、必要に応じて編集することもできます。これらのサンプルテンプレートは、独自のHTMLテンプレートをゼロから構築する際の参考にもなります。
  
  
• HTMLテンプレートは、モバイルアプリの画面全体を常に占有します。テンプレートのHTMLが画面全体を占有していなくても、そこには透明なウェブビューがあり、ユーザーがアプリと対話するのを制限します。この機能のため、テンプレートの背後に透明なオーバーレイを配置することを常に推奨します。これは、HTMLテンプレートの背景として構成できます。
  
  
• テンプレートからのすべてのインタラクションは、キャンペーンのパフォーマンス統計（クリック数など）を計算するため、またはユーザーデータポイント（イベント、ユーザー属性 - メール、携帯電話番号、評価など）として、MoEngageにデータポイントとしてログする必要があります。 HTMLインアプリ用のJavaScriptブリッジ を活用し、HTMLテンプレート内で使用してください。
  
  
• iOSでは、注意が必要な2つのポイントがあります -
  • デフォルトのズームでは、ウェブビューでスケーリングが有効になります。無効にするには、HTMLのメタタグを使用する必要があります。
  • ノッチのあるiOSデバイスでは、CSSを更新して安全領域をサポートし、コンテンツがノッチと重ならないようにします
    
    
• HTMLテンプレート内に記載された背景画像について、MoEngageはこれらのURLがテンプレートスタイル内にあるため、事前にURLをプリフェッチしません。 背景画像にはアップロードされたアセットのURLを使用しないでください。 そのような場合、MoEngage SDKがランタイムでダウンロードしてレンダリングするために絶対URLが必要です。他のすべての画像については、インアプリメッセージがレンダリングされるときにバッファがないように、画像をプリフェッチします。
  

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

HTMLインアプリテンプレートはすべてのHTMLおよびCSSコンポーネントをサポートしていますが、以下のコンポーネントは、HTMLインアプリキャンペーンから多くの価値を引き出すことができる主要なハイライトのいくつかです。

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

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

1. セルフハンドル
2. Zip アップロード
3. カスタムHTMLアップロード

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

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

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

ZIPファイルを準備する際は、以下の手順に従ってください:

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

カスタムHTMLアップロード

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

アセットアップローダー

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

JavaScriptブリッジ

JavaScriptブリッジは、HTMLインアプリメッセージからのアクションを追跡するために必要です。アクションのいくつかには、クリックトラッキング、メッセージのクローズ、およびデータトラッキングが含まれます。HTMLテンプレートを準備したら、アクションと統計を追跡するために、テンプレートにJSメソッドを統合する必要があります。詳細については、 HTML In-app テンプレートで使用できる JavaScript メソッド を参照してください。

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

MoEngageでアプリ内キャンペーンを作成していると、以下に示すように最大で3つの異なる警告が表示されることがあります -


以下の表では、警告とその解決策について説明しています。

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

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

ユーザー属性、ユーザーイベント、プロダクトセット、コンテンツAPI、コンテンツブロックを使用してコンテンツをパーソナライズできます。

詳細については、参照してください

• MoEngage テンプレーティング言語 (JINJA)
• 派生イベントと属性
• 製品セット
• コンテンツAPI
• コンテンツブロック

Do the following:

1. コンテンツをパーソナライズするには @ を入力してください。
2. データパーソナライズまたはコンテンツブロックのいずれかをクリックしてください。
3. データパーソナライズタブをクリックし、ドロップダウンから次のいずれかを選択します
   
   1. ユーザー属性

   2. パーソナライズの代替（フォールバック）として次のいずれかを選択してください：

      • フォールバックなし
        パーソナライズが機能しない場合に代替がないオプションを選択します。
      • アプリ内送信しない
        パーソナライズが機能しない場合にアプリ内メッセージが送信されないオプションを選択します。
      • テキストを置き換える
        パーソナライズが機能しない場合に使用されるテキストを入力または貼り付けます。
   3. 製品セット
   4. コンテンツAPI
      1. コンテンツAPIのパラメータの値を変更します。
4. コンテンツブロックをクリックしてください
   1. 挿入するコンテンツブロックを選択します
   2. コンテンツブロックの内容のみを挿入をクリックします。

      info	情報 オプションが選択されると コンテンツのみが挿入されます コンテンツはコンテンツブロックから切り離されます コンテンツブロックの内容の更新は挿入されたコンテンツに反映されません。

5. クリックして完了。

HTMLテンプレートのテスト

HTMLテンプレートのプレビューをテストするには、以下に説明するデバイスプレビューを使用してください:

あなたはまた、 縦向きと横向きの表示 ボタンをクリックして、以下に示すように、アプリ内キャンペーンの横向きと縦向きのプレビューを見ることができます -

サンプルテンプレート

サンプルHTMLテンプレートはこの 記事 で入手できます。

その他の新機能

HTML インアプリを使用すると、次の機能を追加で活用できるようになります。

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

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

SDKバージョンを11.4.00（Android）および7.1.0（iOS）にアップグレードする必要があります。デフォルトのデバイスの向きの選択は「両方」であり、これはHTMLインアプリキャンペーンがデフォルトでポートレートモードとランドスケープモードの両方で表示されることを意味します。

いくつかのポイントをここでご注意ください：

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

タブレットまたはテレビでアプリ内メッセージを表示

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

デフォルトの選択はモバイル専用ですので、ターゲットにする必要がある追加のデバイスは、キャンペーン作成時に追加で設定する必要があります。

Copy the HTML code of the Native templates

** HTMLコードをコピーする前に、DBにHTMLインアプリを有効にしていることを確認してください**

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

これはあなたがそれを行う方法です -

1. キャンペーン作成のステップ2では、編集したいテンプレートを選択します。
2. テンプレートのプレビューの上にある「HTMLをコピー」をクリックして、選択したテンプレートのHTMLコードをコピーします。
   
   
   
3. 次のステップとして、テンプレートを変更するためにケバブメニューをクリックしてください。
   
   
   
4. カスタムテンプレートエディタタブから「カスタムHTMLアップロード」を選択します
   
   
   
5. エディタ内の既存のコードをすべて削除し、新しいコードをエディタに貼り付けます cmd+v または ctrl+v
   
   
6. 今すぐテンプレートのコードを編集し、ビジネスの目的に応じて変更できます。
   
   

この機能を使用する際に留意すべき点 -

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

よくある質問

HTMLのアプリ内メッセージングテンプレートでカスタムフォントを使用する方法は？

1. フォントファイルが .ttf 拡張子で手元にあることを確認してください。
2. カスタムHTMLテンプレートの コードビュー で、右上隅の アップロード をクリックします。
3. アップロードする前に、ウィンドウに記載されているガイドラインに従ってください。コンピュータからファイルをアップロードし、 完了 をクリックします。
   
4. フォントのURLをコピーします。そのためには、 アップロードされたものを表示 ボタンをクリックし、次に URLをコピー をクリックします。以下に示すように。
   
5. Add the following style within the HTML code. Use the copied font URL in the @font-face section.