Skip to main content

概要

MoEngage の In-App キャンペーンには、効果的なユースケースのための組み込みガイダンスを備えた、あらかじめデザインされたテンプレートが用意されています。これらのテンプレートを使用すると、キャンペーンをすばやく効率的に作成でき、次のようなメリットがあります。
  • 一般的で効果的なユースケースをサポートします。
  • 組み込みのヘルプガイドが含まれています。
  • 簡単に使用できます。
  • キャンペーンをすばやく作成できます。
MoEngage では、In-App キャンペーン向けにネイティブテンプレートと HTML テンプレートの両方を提供しています。

テンプレートの種類

キャンペーンの要件に応じて、さまざまな種類のテンプレートを使用します。

ネイティブ In-App テンプレートのカスタマイズ

In-App テンプレートがすべてのデバイスで最適に表示されるように、次のガイドラインに従ってください。

画像のカスタマイズ

In-App キャンペーンには高解像度の画像をアップロードしますが、ファイルサイズは 2 MB 未満に抑えてください。In-App メッセージがデバイスに表示される前に、メッセージ内の画像は CDN からダウンロードされてからユーザーに表示されます。画像が大きいと、特にインターネット接続が遅いユーザーの場合、メッセージの表示が遅れる可能性があります。

画像のアスペクト比

MoEngage では、テンプレートの種類ごとに次の画像アスペクト比を推奨しています。

使用可能な画像形式

すべての In-App ネイティブテンプレートで、.png、.jpeg、.gif の画像をアップロードできます。 Android の In-App ネイティブテンプレートで GIF を使用するには、Android In-App NATIV SDK ドキュメントに記載されている必要な統合手順を完了してください。iOS プラットフォームはデフォルトで GIF をサポートしています。

画像の品質とサイズ

大画面での歪みを防ぐため、In-App ネイティブテンプレートには高解像度の画像を使用してください。画像ファイルが大きいと、インターネット接続が不安定なデバイスではダウンロードに失敗する可能性があります。画像の品質とダウンロード時間のバランスを取るため、画像は 2MB 未満に抑えてください。

デバイスに応じた画像のスケーリング

In-App メッセージは、さまざまな画面サイズと DPI のデバイスに表示されます。そのため、アップロードした画像は、異なるデバイスのサイズに合わせて拡大または縮小されます。たとえば、Popup - Image テンプレートに 600 x 1000 ピクセルの画像をアップロードし、幅 320 ピクセルのデバイスでメッセージが 400 ピクセルを占める場合、画像の幅は 300 ピクセルに縮小されます。高さは元のアスペクト比(3:5)に基づいて計算され、300 x 500 ピクセルの画像になります。この処理により、画像の比率が維持され、歪みが生じません。

背景画像

In-App メッセージの背景画像を設定するには、次の手順に従います。
  1. キャンペーン作成の Step 2(Content)で、Template Settings をクリックします。
  2. Template background image で、次のいずれかのオプションを選択します。
    • Image URL をクリックし、画像の URL を入力または貼り付けます。
    • Upload Image をクリックし、画像をドラッグ&ドロップするか、Upload from Computer をクリックして画像を選択します。
テンプレートの背景画像を設定するオプションを示すスクリーンショット。
背景画像は、他の In-App コンテンツ画像のようにはスケーリングされません。代わりに、背景画像は内部ウィジェットによって計算されたメッセージの幅と高さに合わせて調整されます。そのため、画像が引き伸ばされる場合があります。

背景色

In-App メッセージの背景色を設定したり、背景色を削除してメッセージを透明にしたりできます。
  1. キャンペーン作成の Step 2(Content)で、Template Settings をクリックします。
  2. Background color で色を選択します。
  3. Phone background color で色を選択します。
テンプレートの背景色を設定するオプションを示すスクリーンショット。

Nudge テンプレートを使用した In-App キャンペーンの作成

Nudge テンプレートを使用すると、ユーザー体験を向上させ、効果的なパーソナライゼーションによって投資収益率(ROI)を高める、邪魔にならない In-App メッセージを作成できます。MoEngage では、次の Nudge テンプレートを提供しています。
Nudge は InApp iOS SDK バージョン 4.15.00 および InApp Android SDK バージョン 7.0.0 以降でサポートされています。詳細については、In-App Nativ Nudges を参照してください。
Nudge テンプレートを使用して In-App キャンペーンを作成するには、次の手順に従います。
  1. In-App キャンペーン作成の Step 2 で、Search templates ボックスに「Nudges」と入力するか、左側の Filter By Type メニューから Nudges を選択します。テンプレートセレクターにすべての Nudge テンプレートが表示されます。
  2. 目的の Nudge テンプレートにカーソルを合わせ、Select をクリックします。カーソルを合わせるとテンプレートのプレビューが表示されます。テンプレートを選択すると、テンプレートエディターが表示されます。
  3. テンプレートエディターで次のフィールドに入力して、Nudge を作成します。変更を加えると、テンプレートのプレビューが表示されます。
    • Template Settings
      Floating 配置(Movable Nudges)は、In-App Android SDK バージョン 11.0.0 および In-App iOS SDK バージョン 10.14.0 以降で利用できます。
    • GIF
    • Buttons
  4. テンプレートをプレビューします。
  5. キャンペーンをテストします。詳細については、In-App キャンペーンのテストを参照してください。
  6. Step 3 でキャンペーンをスケジュールし、公開します。

TV テンプレート

TV テンプレートを使用すると、TV プラットフォームで魅力的でパーソナライズされた In-App 体験を提供できます。これらのテンプレートは、ユーザーとのインタラクションを強化し、投資収益率(ROI)を向上させます。MoEngage では、ニーズに合わせてさまざまな TV テンプレートを提供しています。 TV テンプレートを使用して In-App キャンペーンを作成するには、次の手順に従います。
  1. In-App キャンペーン作成の Step 1 で、Target Platforms セクションの TV を選択します。キャンペーン作成の次のステップで、テンプレートセレクターにすべての TV テンプレートが表示されます。
  2. 目的の TV テンプレートにカーソルを合わせ、Select Template をクリックします。カーソルを合わせるとテンプレートのプレビューが表示されます。テンプレートを選択すると、テンプレートエディターが表示されます。
  3. テンプレートエディターで次のフィールドに入力して、キャンペーンを作成します。変更を加えると、テンプレートのプレビューが表示されます。
    • Template Settings
    • Image
    • Text
    • Buttons
  4. テンプレートをプレビューします。
  5. キャンペーンをテストします。詳細については、In-App キャンペーンのテストを参照してください。
  6. Step 3 でキャンペーンをスケジュールし、公開します。

SMS Sign-Up テンプレート

この機能は現在、北米リージョンでのみ有効です。さらにサポートが必要な場合は、MoEngage のカスタマーサクセスマネージャー(CSM)またはサポートチームにお問い合わせください。
SMS Sign-Up テンプレートを使用すると、ユーザーに SMS 通知の受信への同意を求めることができます。北米リージョンのコンプライアンスの詳細については、北米リージョンの SMS を参照してください。 MoEngage では、2 つの SMS Sign-Up テンプレートを提供しています。
  • Fullscreen - SMS Sign-Up with Image
  • Popup - SMS Sign-Up without Image
SMS Sign-Up テンプレートのオプションを示すスクリーンショット。

Fullscreen - SMS Sign-Up with Image

画像付きの SMS Sign-Up テンプレートを作成する場合は、必要に応じて画像とテキストを変更してから、次の手順に従います。
  1. 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.”
  2. 必要に応じて Terms of Service を設定します。
  3. 必要に応じて Privacy Policy を設定します。
  4. 同意を受け取るボタンを設定します。 画像付きの SMS Sign-Up テンプレートを示すスクリーンショット。
画像なしの SMS Sign-Up テンプレートを作成する場合は、必要に応じてテキストを変更してから、次の手順に従います。
  1. 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.”
  2. 必要に応じて Terms of Service を設定します。
  3. 必要に応じて Privacy Policy を設定します。
  4. 同意を受け取るボタンを設定します。 画像なしの SMS Sign-Up テンプレートを示すスクリーンショット。

パーソナライゼーション

さまざまなデータソースを使用して、キャンペーンコンテンツをパーソナライズできます。詳細については、以下を参照してください。 @ 記号を使用してコンテンツをパーソナライズする方法を示す GIF。 コンテンツをパーソナライズするには、次の手順に従います。
  1. コンテンツエディターで @ を入力して、パーソナライゼーションのオプションを開きます。
  2. Data Personalization または Content Block のいずれかを選択します。
  3. Data Personalization を選択した場合は、次のいずれかのオプションを選択します。
    1. User Attributes
    2. パーソナライゼーションが機能しない場合の代替(フォールバック)として、次のいずれかのオプションを選択します。
      • No Fallback: パーソナライゼーションが失敗した場合、代替コンテンツは表示されません。
      • Do Not Send In-App: パーソナライゼーションが失敗した場合、In-App メッセージは送信されません。
      • Replace Text: パーソナライゼーションが失敗した場合に表示するテキストを指定します。
    3. Product Sets
    4. Content API: Content API のパラメーターの値を変更します。
  4. Content Block を選択した場合:
    1. 挿入するコンテンツブロックを選択します。
    2. Insert Only the Content of the Content Block をクリックします。
      • ブロックのコンテンツのみが挿入されます。
      • 挿入されたコンテンツは、元のコンテンツブロックとの接続が解除されます。
      • 元のコンテンツブロックに今後加えられた更新は、挿入されたコンテンツには反映されません。
  5. Done をクリックします。

In-App メッセージのアクセシビリティの設定

MoEngage で In-App メッセージのアクセシビリティ機能を設定して、すべてのユーザーがメッセージを利用できるようにします。アクセシビリティの原則を包括的に理解するには、MoEngage のアクセシブルなキャンペーンを参照してください。

ビジュアルへの代替テキスト(Alt Text)の追加

代替テキストは画像や GIF をテキストで説明するもので、スクリーンリーダーを利用するユーザーにも内容が理解できるようにします。
  • ドラッグ&ドロップエディターを使用する場合: In-App キャンペーンに Image または GIF 要素を追加するときは、Alt Text ボックスに明確で簡潔な説明を入力します。 ドラッグ&ドロップエディターでの画像の Alt Text ボックスを示すスクリーンショット。
  • ネイティブ In-App テンプレートの場合: Popup—Image, Text, and Button などのネイティブテンプレートでは、Accessibility Text ボックスに画像の代替テキストを入力します。 ネイティブテンプレートでの画像の Accessibility Text ボックスを示すスクリーンショット。
  • カスタム HTML In-App メッセージの場合: カスタム HTML を使用して In-App メッセージを作成する場合は、コード内のすべての __PROTECTED_14__ タグに、意味のある説明を含む alt 属性を直接追加する必要があります。 例: __PROTECTED_15__

代替テキストに関する考慮事項:

  • 画像を説明する: 代替テキストが画像の内容と目的を正確に説明していることを確認してください。画像に重要なテキストが含まれている場合は、それを代替テキストに含めます。効果的な代替テキストを書くためのヒントについては、MoEngage のアクセシブルなキャンペーンを参照してください。
  • 代替テキストでパーソナライゼーションを使用する: MoEngage の代替テキストボックスは、ユーザー属性やイベントデータに基づく動的な説明をサポートしています。
  • 静的なユーザーインターフェイス要素: MoEngage は、Close ボタン(X)などの標準的なユーザーインターフェイス要素に、デフォルトの代替テキストを自動的に含めます。これらを手動で設定する必要はありません。

動画コンテンツのアクセシビリティ

In-App メッセージに動画コンテンツが含まれる場合は、アクセシビリティのために次の点を考慮してください。
  • 字幕とトランスクリプトを追加する: 外部のツールやサービスを使用して、動画コンテンツの字幕とトランスクリプトを作成します。
  • トランスクリプトをリンクまたは埋め込む: In-App メッセージに動画コンテンツを追加する場合(埋め込みかリンクかにかかわらず)、ユーザーがトランスクリプトにアクセスする手段も必ず提供してください。たとえば、動画の近くにトランスクリプトへのリンクを含めます。MoEngage はトランスクリプトを自動生成しません。
  • 動画コントロール: Play、Pause、Mute、Unmute ボタンなどの動画コントロールに Accessibility Text を追加します。これにより、支援技術を使用するユーザーを含むすべてのユーザーが、コントロールを簡単に理解できるようになります。 動画コントロールの Accessibility Text フィールドを示すスクリーンショット。

Rating テンプレートのアクセシビリティ

Nudge - Rating テンプレートでは、スクリーンリーダーが選択された評価を自動的に読み上げ、続いて関連するテキストを読み上げます。例: 「4 out of 5 stars, Beyond Expectations.」

フォントサイズとレイアウトの適応性の確保

MoEngage の In-App メッセージは、ユーザーの設定に適応するように設計されています。
  • フォントの自動スケーリング: In-App メッセージ内のテキストは、通常、ユーザーが Android または iOS デバイスで選択したフォントサイズ設定に従います。通常、これを手動で設定する必要はありません。ただし、非常に大きなテキストがレイアウトにどのような影響を与えるかを考慮してください。
  • コンテンツのスクロール:
    • Full Screen In-App メッセージの場合: ユーザーの大きなフォント設定によってコンテンツがはみ出す場合、スクロールが自動的に有効になります。
    • Nudges(邪魔にならない In-App メッセージ)の場合: 必要に応じて Nudge 内のコンテンツがスクロール可能になり、Nudge 自体の位置は維持されます。

キーボードナビゲーションとフォーカス管理

MoEngage SDK は、優れたユーザー体験を確保するために、キーボードナビゲーションとフォーカスを管理します。
  • フォーカスの処理: In-App メッセージが表示されると、フォーカスは自動的にメッセージに移動し、侵入型のメッセージでは適切にトラップされます。メッセージが閉じると、通常、フォーカスは前の要素に戻ります。
  • アクセシブルな Close ボタン: In-App メッセージの標準の Close ボタン(X)には、デフォルトでアクセシブルなラベルが含まれています。カスタムの Close ボタンを作成する場合(たとえば HTML In-App メッセージで)、キーボードでアクセス可能で、適切なアクセシブルな名前が付いていることを確認してください。

タッチターゲットサイズの設定

  • ネイティブテンプレート: MoEngage のネイティブ In-App テンプレートは、アクセシビリティガイドラインを満たすことを目指したタッチターゲットサイズで設計されています。
  • カスタム HTML In-App メッセージ: カスタム HTML を使用して In-App メッセージをデザインする場合は、すべてのインタラクティブ要素(ボタン、リンク)が簡単にタップできる十分な大きさであることを確認してください。タッチターゲットサイズに関する一般的なガイドラインについては、MoEngage のアクセシブルなキャンペーンを参照してください。

TV In-App に関する考慮事項への対応

TV プラットフォーム専用に In-App メッセージをデザインする場合:
  • プラットフォームのガイドライン: 対象となる TV プラットフォーム固有のアクセシビリティ要件とナビゲーションパターン(リモコンによる操作など)に注意してください。コンテンツ、特にカスタムのインタラクティブ要素に互換性があることを確認してください。
In-App キャンペーンでこれらの要素を設定することで、アクセシビリティを大幅に向上させることができます。優れたユーザー体験を確保するため、常にさまざまなデバイスで In-App メッセージをテストし、可能であればアクセシビリティツールを使用してください。

よくある質問

  1. In-App メッセージがデバイスの高さを超えるとどうなりますか?
    In-App メッセージの高さがデバイスの表示高さを超える場合、メッセージはレンダリングされません。
  2. In-App テンプレートに画像は必須ですか?
    画像が必須となるのは、画像を含むように設計された In-App テンプレートのみです。これらのテンプレートに画像を指定しない場合、ユーザーのデバイスには表示されません。
  3. テキストは異なるデバイスサイズに合わせてスケーリングされますか?
    現在、テキストは異なるデバイスサイズに合わせて自動的にスケーリングされません。メッセージの作成時に指定したフォントサイズがすべてのデバイスで使用されます。
  4. In-App メッセージから画像を削除できますか?
    現在、画像コンポーネントを含む In-App メッセージをエンドユーザーのデバイスに表示するには、画像が必須です。
  5. In-App メッセージから背景色を削除できますか?
    はい。不透明度を 0 に設定することで、In-App メッセージから背景色を削除できます。
  6. アプリが横向きモードの場合、In-App メッセージはどうなりますか?
    現在、事前構築済みの In-App メッセージは、アプリが横向きモードの場合には表示されません。ただし、HTML In-App メッセージは、作成時に横向きが許可されていれば表示されます。
  7. In-App メッセージはタブレットでサポートされていますか?
    いいえ。事前構築済みの In-App メッセージは現在タブレットではサポートされていません。ただし、HTML In-App メッセージはサポートされています。