アプリ内テンプレート

Overview

MoEngageのアプリ内キャンペーンは、効果的なユースケースのための組み込みガイダンスを備えた事前設計されたテンプレートを提供します。これらのテンプレートは、迅速かつ効率的にキャンペーンを作成するのに役立ち、以下の利点を提供します:

  • 人気があり効果的なユースケースをサポートします。
  • 組み込みのヘルプガイドを含めてください。
  • 使いやすいです。
  • 迅速なキャンペーン作成をサポートします。

MoEngageは、In-Appキャンペーン用のネイティブテンプレートとHTMLテンプレートの両方を提供しています。

テンプレートタイプ

キャンペーンの要件に応じて、さまざまなタイプのテンプレートを使用してください:

テンプレートタイプ Description
ポップアップ 中央に透明なオーバーレイがかかった画面に ポップアップ テンプレートが表示されます。このテンプレートを使用して、ユーザーの注意をプロモーションや重要なお知らせに集中させてください。
フルスクリーン フルスクリーン テンプレート は画面全体を占有し、アプリをブロックします。必須のアプリ更新などの重要な情報には、このテンプレートを使用してください。
評価 この 評価 テンプレートは、ユーザーがアプリ内で5つ星の評価を提供できる特別なポップアップテンプレートです。このテンプレートを使用して、リターゲティングの目的でユーザーのフィードバックを収集してください。
ナッジ

A Nudge テンプレートは、ユーザーがアプリとのインタラクションを続けることを可能にする、非侵入型のメッセージです。ナッジはアプリ内に埋め込まれて表示されるか、画面の上部または下部に表示されることがあります。新しい情報やプロモーションアラートを提供するために、これらのテンプレートを使用してください。

前提条件: ナッジには追加のSDK統合が必要です。詳細については、 こちら を参照してください。

重要: ニッジを作成する際には、 カスタムイベントで トリガー条件を選択しないでください。ニッジはイベントトリガーでは機能しません。

iOSアプリのインターフェース内でアプリ内のヌッジが表示されるようにするには、コンテンツ作成時に テンプレート設定 セクションで iOSセーフエリア トグルをオンにしてください。次の画像に示すように:

iOSのセーフエリア設定を示すスクリーンショット

Self Handled A セルフハンドル テンプレートでは、MoEngage のアプリ内キャンペーン配信、セグメンテーション、およびパーソナライズ機能を使用しながら、メッセージコンテンツを自分でレンダリングできます。このオプションは、複雑でカスタムのメッセージビジュアルを作成するのに便利です。

ネイティブのアプリ内テンプレートをカスタマイズする

すべてのデバイスで最適に表示されるように、これらのガイドラインに従って、アプリ内テンプレートを調整してください。

画像をカスタマイズする

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

画像のアスペクト比

MoEngageは、各テンプレートタイプに対して以下の画像アスペクト比を推奨しています:

テンプレート名 推奨アスペクト比(幅:高さ)
ポップアップ - 画像、テキスト & 3つのボタン 画像は自動的にサイズが変更されます。最適な表示のために、1:1のアスペクト比で、少なくとも50x50ピクセルを使用してください。
ポップアップ - 画像、テキスト & ボタン 画像は自動的にサイズ変更されます。最適な表示のために、1:2、2:3、3:2、2:1のようなアスペクト比を使用し、歪みを防ぐために最小サイズを450x450ピクセルにしてください。
ポップアップ - 画像、ヘッダー、テキスト & ボタン 画像は自動的にサイズが変更されます。最適な表示のために、1:2、2:3、3:2、2:1のようなアスペクト比を使用し、歪みを防ぐために最小寸法を450x450ピクセルにしてください。
ポップアップ - 画像と2つのボタン 画像は自動的にリサイズされます。最適な表示のために、1:2、2:3、3:2、2:1のようなアスペクト比を使用し、歪みを防ぐために最小寸法を450x450ピクセルにしてください。
ポップアップ - 画像付き評価 画像は自動的にリサイズされます。最適な表示のために、1:1のアスペクト比で、少なくとも50x50ピクセルを使用してください。
ポップアップ - 画像 高解像度の画像を推奨します。最大1200x2000ピクセル、最小450x450ピクセル。
ポップアップ - 画像とボタン 高解像度の画像を推奨します。最大1200x2000ピクセル、最小600x600ピクセル。
フルスクリーン - 画像、テキスト & ボタン 画像は、歪みを防ぐために、アスペクト比3:4または3:5で、かつ少なくとも450x600ピクセルのものを使用してください。
フルスクリーン - 画像 画像は3:4または3:5のアスペクト比で、少なくとも450x600ピクセルを使用して、大きなデバイスでの歪みを防いでください。
ヌッジ - 画像 約5:1または6:1のアスペクト比を持つワイド画像を使用してください。
SMS サインアップ このテンプレートを使用して、ユーザーがサインアップし、SMS通知を受け取ることに同意できるようにします。2種類があります: 全画面 - 画像付きSMSサインアップ ポップアップ - 画像なしSMSサインアップ

受け入れられた画像タイプ

アプリ内ネイティブテンプレートに対して、.png、.jpeg、および .gif 画像をアップロードできます。

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

画像の品質とサイズ

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

デバイスの画像スケーリング

アプリ内メッセージは、さまざまな画面サイズとDPIを持つデバイスに表示されます。これは、アップロードした画像が異なるデバイスの寸法に合わせて拡大または縮小されることを意味します。例えば、600 x 1000 ピクセルの画像をポップアップ - 画像テンプレートにアップロードすると、メッセージが 400 ピクセルを占める 320 ピクセル幅のデバイスに表示される場合、画像の幅は 300 ピクセルに縮小されます。その高さは元のアスペクト比(3:5)に基づいて計算され、300 x 500 ピクセルの画像が得られます。このプロセスは、画像が比率を保ち、歪まないようにします。

背景画像

アプリ内メッセージの背景画像を設定するには:

  1. キャンペーン作成の ステップ2 コンテンツ )で、 テンプレート設定 をクリックします。
  2. テンプレートの背景画像 の下で、次のオプションのいずれかを選択します:
    • 画像のURL をクリックし、画像のURLを入力または貼り付けます。
    • 画像をアップロード をクリックし、画像をドラッグアンドドロップするか、 コンピュータからアップロード をクリックして画像を選択します。

テンプレートの背景画像を設定するオプションを示すスクリーンショット。

warning

Warning

バックグラウンド画像は、他のアプリ内コンテンツ画像のようにはスケールしません。代わりに、背景画像はメッセージの幅と高さに合わせて調整され、これは内部ウィジェットによって計算されます。これにより画像が引き伸ばされる可能性があります。

背景色

アプリ内メッセージの背景色を設定することができます。また、背景色を削除してメッセージを透明にすることもできます。

  1. キャンペーン作成の ステップ2 コンテンツ )で、 テンプレート設定 をクリックしてください。
  2. 背景色 の下で、色を選択してください。
  3. 電話の背景色 を選択してください。

テンプレートの背景色を設定するオプションを示すスクリーンショット。

Nudgeテンプレートを使用してアプリ内キャンペーンを作成する

ナッジテンプレートを使用すると、ユーザー体験を向上させ、インパクトのあるパーソナライズを通じて投資利益率(ROI)を改善する、非侵入型のアプリ内メッセージを作成できます。MoEngageは以下のNudgeテンプレートを提供しています:

テンプレート名 Description
ポップアップ - GIF & ボタン このテンプレートには、背景画像、GIF、およびボタンが含まれています。発表に使用してください。
ナッジ - 評価 このテンプレートには、背景画像、テキスト、評価、ボタンが含まれています。評価テキストをカスタマイズできます。ユーザーフィードバックを収集するために使用してください。
ナッジ - テキスト & ボタン このテンプレートには背景画像、テキスト、およびボタンが含まれています。新しいオファー、プロモーションメッセージ、そしてヒントに使用してください。
ナッジ - 画像とテキスト このテンプレートには、背景画像、テキスト、および画像が含まれています。新しいオファー、プロモーションメッセージ、および発表に使用してください。
Nudge - GIF このテンプレートには背景画像とGIFが含まれています。お知らせに使用してください。
ナッジ - ビデオ このテンプレートには、背景画像と動画が含まれています。お知らせに使用してください。
ポップアップ - ビデオ & ボタン このテンプレートには、背景画像、ビデオ、ボタンが含まれています。お知らせに使用してください。
ナッジ - 画像のみ このテンプレートには、背景画像と画像が含まれています。新しいオファーやプロモーションメッセージに使用してください。
ヌッジ - テキストのみ このテンプレートには背景画像とテキストが含まれています。新しいオファー、プロモーションメッセージ、ヒントを表示するために使用してください。
ナッジ - 画像、テキスト&ボタン このテンプレートには、背景画像、テキスト、画像、およびボタンが含まれています。新しいオファー、プロモーションメッセージ、ヒントを表示するために使用してください。
info

Note

Nudgesは、InApp iOS SDKバージョン4.15.00およびInApp Android SDKバージョン7.0.0からサポートされています。詳細については、 In-App Nativ Nudges を参照してください。

Nudgeテンプレートを使用してアプリ内キャンペーンを作成するには、次の手順に従ってください:

  1. In ステップ 2 のアプリ内キャンペーン作成で、 テンプレートを検索 ボックスに「Nudges」と入力するか、左側の タイプでフィルタ メニューから Nudges を選択します。テンプレートセレクターは、すべてのNudgeテンプレートを表示します。
  2. 希望するNudgeテンプレートにカーソルを合わせてから、 選択 をクリックします。テンプレートのプレビューは、ホバーすると表示されます。テンプレートを選択すると、テンプレートエディタが表示されます。
  3. 以下のフィールドをテンプレートエディターに入力して、あなたのナッジを作成してください。変更を加えると、テンプレートのプレビューが表示されます。
    • テンプレート設定
      セクション Field Description
      配置と背景 ナッジ配置 ヌッジは画面の下部に表示されます。選択してください 左下 または 右下
      デフォルト表示サイズ このドロップダウンリストからヌッジの表示サイズを選択してください: 最小化 または 全画面
      最小化コンテナ幅 ナッジコンテナの幅を選択してください。このオプションは、最小化された表示でのみ利用可能です。
      ナッジの背景

      次のいずれかを選択して、ヌッジに背景を追加します:

      • 画像をアップロード : コンピュータから画像をアップロードします。
      • 画像のURL : 背景画像を取得するためのURLを追加してください。
      • 背景色 : ナッジに背景色を追加します。
      アニメーション エントリーアニメーション ユーザーにヌッジが最初に表示されるときのヌッジのエントリーアニメーションをドロップダウンリストから選択してください。
      エグジットアニメーション プルダウンリストからナッジの終了アニメーション(ナッジが解除または削除されたとき)を選択してください。
      閉じるボタン 表示 表示 を切り替えて、ナッジから閉じるボタンを表示または非表示にします。
      タイプ ドロップダウンリストからボタンの種類を選択してください。一部のオプションはAndroid専用であり、一部はiOS専用です。プラットフォーム名は括弧内に表示されます(例えば、 (Android))。
      クローズボタンの配置 このドロップダウンリストを使用して、閉じるボタンの位置を指定してください: または
      マージン ヌッジコンテナのマージンを指定してください。
      上、下、右、左 ヌッジコンテナの上、下、右、左のマージンを指定します。
      Border スケールを使用してピクセル単位で境界幅を指定します。
      半径 スケールを使用してピクセル単位でボーダー半径を指定します。
      ボーダーの色 テキストボックスをクリックして、境界線の色を選択します。
    • GIF
      セクション Field Description
      画像ソース Upload GIF コンピュータから表示するGIFを選択してください。
      GIF URL GIFを取得するためのURLを追加してください。
      マージン GIFのマージンを指定してください。
      上、下、右、左 GIFの上、下、右、左のマージンを指定してください。
      Padding GIFのパディング幅をピクセル単位でスケールを使用して指定してください。
      上、下、右、左 GIFの上、下、右、左のパディングを指定してください。
      半径 GIFのパディングのボーダー半径をピクセル単位でスケールを使用して指定してください。
      ボーダーカラー テキストボックスをクリックして、GIFのパディングの境界線の色を選択します。
      Border ヌッジコンテナ内のGIFの境界幅をピクセル単位でスケールを使用して指定してください。
      半径 ヌッジコンテナ内のGIFのボーダー半径をピクセル単位でスケールを使用して指定します。
      ボーダーの色 ヌッジコンテナ内のGIFのボーダーカラーを選択するには、テキストボックスをクリックしてください。

      プレビュー内のGIFをクリックしてカスタマイズすることもできます。

    • ボタン
      セクション Field Description
      ボタンの外観 ボタンの種類 ボタンのタイプを指定してください: 塗りつぶし アウトライン 、または テキスト
      ボタンテキスト ボタンに表示するテキストを指定してください。
      フォントサイズ ボタンのテキストのフォントサイズを指定してください。
      フォントカラー ボタンテキストのフォントカラーを指定してください。
      カスタムフォント ボタンテキストのためのカスタムフォントの名前を指定してください(アプリバンドルに含まれているもの)。
      ボタンの色 テキストボックスをクリックして、カラ―グラデーションを選択することでボタンの色を指定します。
      集中状態 フォントサイズ ユーザーがリモコンを使用してボタンに移動したときのテキストサイズを指定します。
      フォントカラー リモコンを使用してボタンに移動したときのテキストの色を指定します。
      ボタンの色 リモコンを使用してユーザーがボタンに移動したときのボタンの色を指定します。
      アクション Default ボタンのデフォルトアクションは 却下 です(クリックするとヌッジが閉じます)。このデフォルトアクションは、 デリート アイコンを デフォルト ドロップダウンの隣でクリックすることで削除できます。
      + アクション カスタムアクションを追加するには +アクション をクリックしてください。カスタムドロップダウンリストからアクションを選択してください。デフォルトのアクションは、ナッジを閉じます。詳細については、 カスタムアクション を参照してください。
      幅、マージン & パディング ボタンの幅を指定してください。
      マージン ボタンのマージンを指定してください。
      上、下、右、左 ボタンの上、下、右、左のマージンを指定してください。
      Padding ボタンのパディング幅をピクセル単位でスケールを使用して指定してください。
      上, 下, 右, 左 ボタンの上、下、右、左のパディングを指定してください。
      Border ヌッジコンテナ内のボタンの境界線の幅をピクセル単位でスケールを使用して指定します。
      半径 ヌッジコンテナ内のボタンのボーダー半径をピクセル単位でスケールを使用して指定してください。
      ボーダーの色 テキストボックスをクリックして、ヌッジコンテナ内のボタンの境界線の色を選択します。

      プレビューのボタンをクリックしてカスタマイズすることもできます。

      ヌッジテンプレート要素のカスタマイズを示すGIF。

  4. テンプレートをプレビューする。
  5. キャンペーンをテストします。詳細については、 アプリ内キャンペーンのテスト を参照してください。
  6. キャンペーンを ステップ 3 でスケジュールし、その後公開します。

TVテンプレート

TVテンプレートを使用すると、TVプラットフォーム上で魅力的でパーソナライズされたアプリ内体験を提供できます。これらのテンプレートはユーザーとのインタラクションを向上させ、投資収益率(ROI)を改善します。MoEngageは、あなたのニーズに合わせたさまざまなTVテンプレートを提供しています:

テンプレート名 Description
TVバナー: テキストと画像、2つのボタン このテンプレートには背景画像とテキストが含まれており、最大2つのボタンを追加できます。バナーを作成するためにそれを使用します。
TVポップアップ:3つのテキストと3つのボタン このテンプレートには背景画像が含まれており、最大で3つのテキストフィールドと3つのボタンを追加することができます。ポップアップを作成するためにそれを使用します。
TVポップアップ:1つのボタン付きの3つのテキスト このテンプレートには背景画像が含まれており、最大3つのテキストフィールドと1つのボタンを追加できます。ポップアップを作成するためにそれを使用します。
テレビポップアップ:3つのテキストと2つのボタン このテンプレートには背景画像が含まれており、最大で3つのテキストフィールドと2つのボタンを追加できます。ポップアップを作成するためにそれを使用します。
TVバナー: 1つのボタン付きのテキスト このテンプレートには、背景画像、テキスト、およびボタンが含まれています。バナーを作成するためにそれを使用してください。
テレビバナー:2つのボタン付きのテキスト このテンプレートには、背景画像、テキスト、2つのボタンが含まれています。バナーを作成するためにそれを使用してください。
TVバナー: テキストと画像、ボタン1つ このテンプレートには、背景画像、テキスト、画像、そして1つのボタンが含まれています。バナーを作成するためにそれを使用してください。
テレビポップアップ:ボタンなしのテキスト3つ このテンプレートには背景画像が含まれており、最大で3つのテキストフィールドを追加できます。ポップアップを作成するためにそれを使用します。

TV テンプレートを使用してアプリ内キャンペーンを作成するには、次の手順に従います:

  1. In Step 1 of In-App campaign creation, in the Target Platforms section, select TV .テンプレートセレクターは、キャンペーン作成の次のステップで、すべてのTVテンプレートを表示します。
  2. 希望するテレビテンプレートにカーソルを合わせてから、 テンプレートを選択 をクリックします。テンプレートのプレビューは、ホバーすると表示されます。テンプレートを選択すると、テンプレートエディタが表示されます。
  3. キャンペーンを作成するために、テンプレートエディタの以下のフィールドに記入してください。変更を加えると、テンプレートのプレビューが表示されます。
    • テンプレート設定
      セクション Field Description
      配置と背景 ナッジの配置 ヌッジは画面の下部に表示されます。選択してください 左下 または 右下
      電話の背景色 テキストの背景色を指定してください。この色は、アプリの画面の上部とアプリ内メッセージの背後に表示されます。
      テンプレートの背景画像

      次のいずれかを選択して、ナッジに背景を追加します:

      • 画像をアップロード : コンピュータから画像をアップロードします。
      • 画像のURL : 背景画像を取得するためのURLを追加してください。
      • 背景色 : 背景色を追加します。
      アニメーション エントリーアニメーション ユーザーに対してヌッジが最初に表示されるときのヌッジのエントリーアニメーションをドロップダウンリストから選択してください。
      退出アニメーション プルダウンリストからナッジの終了アニメーション(ナッジが解消または削除されたとき)を選択します。
      幅とマージン テレビコンテナの幅を指定してください。
      マージン テレビコンテナのマージンを指定してください。
      上、下、右、左 TVコンテナの上、下、右、左のマージンを指定してください。
      Border スケールを使用して、ピクセル単位で境界幅を指定してください。
      半径 スケールを使用して、ピクセル単位でボーダー半径を指定してください。
      境界線の色 テキストボックスをクリックして、境界線の色を選択します。
    • Image
      セクション Field Description
      画像ソース Upload Image コンピュータからテンプレートに表示する画像を選択してください。
      Image URL 画像を取得するためのURLを追加してください。
      マージン & パディング マージン 画像のマージンを指定してください。
      上、下、右、左 テキストの上、下、右、左のマージンを指定してください。
      Padding テキストのパディングを指定してください。
      上、下、右、左 テキストの上、下、右、左のパディングを指定します。
      Border 画像のボーダーの幅を指定します。
      半径 画像の境界の半径を指定してください。
      ボーダーカラー テレビコンテナに含まれる画像の境界線の色を選択するには、テキストボックスをクリックしてください。
      画像コンテナの幅(最大15%) 画像コンテナの幅を指定してください。
    • Text
      セクション Field Description
      テキストコンテンツ 見出し テキストを表示するための見出しを指定してください。
      フォントサイズ テキストのフォントサイズを指定してください。
      フォントカラー テキストのフォントカラーを指定してください。
      カスタムフォント アプリバンドルに利用可能なテキスト用のカスタムフォントの名前を指定してください。
      背景色 テキストの背景色を指定します。
      幅、マージン & パディング テキストの幅を指定してください。
      マージン テキストのマージンを指定してください。
      上, 下, 右, 左 テキストの上、下、右、左の余白を指定してください。
      Padding テキストのパディングを指定してください。
      トップ、ボトム、右、左 テキストの上、下、右、左のパディングを指定してください。
      Border 境界の幅を指定してください。
      半径 TVコンテナ内のテキストのボーダー半径をピクセル単位でスケールを使用して指定してください。
      境界線の色 テキストボックスをクリックして、TVコンテナ内のテキストの境界線の色を選択します。
    • ボタン
      セクション Field Description
      ボタンの外観 ボタンの種類 ボタンの種類を指定してください: 塗りつぶし , 輪郭 , または テキスト
      ボタンテキスト ボタンに表示するテキストを指定してください。
      フォントサイズ ボタンのテキストのフォントサイズを指定してください。
      フォントカラー ボタンテキストのフォントカラーを指定してください。
      カスタムフォント ボタンのテキストに使用するカスタムフォントの名前(アプリバンドル内にあるもの)を指定してください。
      ボタンの色 テキストボックスをクリックして、色のグラデーションを選択することでボタンの色を指定します。
      集中状態 フォントサイズ リモコンを使用してボタンに移動したときのテキストサイズを指定します。
      フォントの色 リモコンを使用してボタンに移動したときのテキストの色を指定します。
      ボタンの色 リモコンを使用してユーザーがボタンに移動したときのボタンの色を指定します。
      アクション Default ボタンのデフォルトアクションは 閉じる です(クリックするとテンプレートが閉じます)。このデフォルトアクションは、 デリート アイコンを デフォルト ドロップダウンの隣でクリックすることで削除できます。
      + アクション クリックして +アクション を追加します。 カスタム ドロップダウンリストからアクションを選択します。
      幅、マージン & パディング ボタンの幅を指定してください。
      マージン ボタンのマージンを指定してください。
      トップ, ボトム, 右, 左 ボタンの上、下、右、左のマージンを指定してください。
      Padding ボタンのパディングを指定してください。
      上, 下, 右, 左 ボタンの上、下、右、左のパディングを指定します。
      Border テレビコンテナ内のボタンの境界線の幅をスケールを使用してピクセル単位で指定します。
      半径 TVコンテナ内のボタンのボーダー半径をピクセル単位でスケールを使用して指定してください。
      境界線の色 テキストボックスをクリックして、TVコンテナ内のボタンの境界線の色を選択します。
  4. テンプレートをプレビューします。
  5. キャンペーンをテストします。詳細については、 アプリ内キャンペーンのテスト を参照してください。
  6. キャンペーンを ステップ3 でスケジュールし、その後公開してください。

SMSサインアップテンプレート

warning

Warning

この機能は現在、北米地域でのみ有効です。詳細については、あなたのCSMに連絡するか、 サポートチケットを提出してください

SMSサインアップテンプレートは、ユーザーからSMS通知を受け取るための同意をリクエストすることができます。北米地域のコンプライアンスに関する詳細については、 北米地域のSMS を参照してください。

MoEngageは2つのSMSサインアップテンプレートを提供しています:

  • 全画面 - 画像付きSMSサインアップ
  • ポップアップ - 画像なしのSMSサインアップ

SMSサインアップテンプレートオプションを表示するスクリーンショット。

フルスクリーン - 画像付きSMSサインアップ

画像を含むSMSサインアップテンプレートを作成する際は、必要に応じて画像とテキストを修正し、次の手順に従ってください:

  1. 「テキストメッセージにサインアップすることにより、提供された電話番号に対して、繰り返し自動化されたプロモーションおよびパーソナライズされたテキストメッセージ(カートリマインダー)を受信することに同意します。 同意は購入の条件ではありません。 メッセージおよびデータ料金が適用される場合があります。 メッセージの頻度は異なります。 ヘルプが必要な場合はHELPと返信し、キャンセルするにはSTOPと返信してください。」

  2. 必要に応じて サービス利用規約 を設定してください。
  3. 必要に応じて プライバシーポリシー を設定してください。
  4. ボタンを設定して同意を受け取る。
Field Description
モバイル番号 同意を受け取るために使用される携帯電話番号と通知を購読するための番号を提供してください。
メッセージ オプトインキーワードを追加します。キーワードに関する詳細は、 サブスクリプションとキーワードの設定 を参照してください。

ポップアップ - 画像なしのSMSサインアップ

画像なしのSMSサインアップテンプレートを作成する際は、必要に応じてテキストを修正し、次の手順に従ってください:

  1. "テキストメッセージにサインアップすることによって、提供された電話番号に自動的に繰り返されるプロモーションおよびパーソナライズされたテキストメッセージ(カートリマインダー)を受け取ることに同意します。 同意は購入の条件ではありません。 メッセージおよびデータ料金が適用される場合があります。 メッセージの頻度は異なります。 ヘルプが必要な場合はHELPと返信し、キャンセルするにはSTOPと返信してください。

  2. 利用規約 を必要に応じて設定してください。
  3. プライバシーポリシー を必要に応じて設定してください。
  4. 同意を受け取るためにボタンを設定します。

    画像なしのSMSサインアップテンプレートを示すスクリーンショット。

Field Description
モバイル番号 通知の受信に同意し、購読するために使用される携帯電話番号を提供してください。
メッセージ Opt-In キーワードを追加してください。キーワードの詳細については、 サブスクリプションとキーワードの設定 を参照してください。

パーソナライゼーション

さまざまなデータソースを使用して、キャンペーンコンテンツをパーソナライズできます。詳細については、以下を参照してください:

GIFを使用して@記号を使ったコンテンツのパーソナライズ方法を示しています。

コンテンツをパーソナライズするには、以下の手順に従ってください:

  1. @ をコンテンツエディタに入力して、パーソナライズオプションを開きます。
  2. データパーソナライズ または コンテンツブロック を選択してください。
  3. 「データパーソナライズ」を選択した場合、次のオプションのいずれかを選択してください:
    1. ユーザー属性
    2. パーソナライズが機能しない場合の代替(フォールバック)として次のオプションのいずれかを選択してください:
      • フォールバックなし :パーソナライズが失敗した場合、代替コンテンツは表示されません。
      • アプリ内で送信しない :パーソナライズが失敗した場合、アプリ内メッセージは送信されません。
      • テキストを置き換える :パーソナライズが失敗した場合に表示するテキストを指定します。
    3. 製品セット
    4. コンテンツAPI :コンテンツAPIパラメータの値を変更します。
  4. もし コンテンツブロック を選択した場合:
    1. 挿入するコンテンツブロックを選択します。
    2. コンテンツブロックのコンテンツのみを挿入 をクリックします。
      info

      情報

      • ブロックからのコンテンツのみが挿入されます。
      • 挿入されたコンテンツは元のコンテンツブロックから切り離されます。
      • 元のコンテンツブロックへの将来の更新は、挿入されたコンテンツには反映されません。
  5. 完了を クリック します。

アプリ内メッセージのアクセシビリティを設定する

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

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

代替テキストは、画像やGIFのテキスト説明を提供し、スクリーンリーダーに依存するユーザーにとって理解できるようにします。

  • ドラッグアンドドロップエディタの使用: インアプリキャンペーンに 画像 または GIF 要素を追加する際は、 代替テキスト ボックスに明確で簡潔な説明を入力してください。

    ドラッグアンドドロップエディタの画像のための代替テキストボックスを表示するスクリーンショット。

  • ネイティブインアプリテンプレートの場合: ネイティブテンプレート、例えば ポップアップ—画像、テキスト、ボタン では、 アクセシビリティテキスト ボックスに画像の代替テキストを入力します。

    ネイティブテンプレートの画像用アクセシビリティテキストボックスを示すスクリーンショット。

  • カスタムHTMLのアプリ内メッセージについて: カスタムHTMLでアプリ内メッセージを作成する場合は、コード内のすべての <img> タグに意味のある説明を持つ alt 属性を追加する責任があります。

    例えば: <img src="image_url.png" alt="画像の説明">

代替テキストの考慮事項:

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

ビデオコンテンツのアクセシビリティ

アプリ内メッセージに動画コンテンツが含まれている場合は、アクセシビリティのために以下を考慮してください:

  • キャプションとトランスクリプトを追加: 外部ツールやサービスを使用して、ビデオコンテンツのキャプションとトランスクリプトを作成します。
  • リンクまたは埋め込みトランスクリプト: アプリ内メッセージに動画コンテンツを追加する際(埋め込みまたはリンクされた場合)、ユーザーがトランスクリプトにアクセスできる方法も提供するようにしてください。たとえば、動画の近くにトランスクリプトへのリンクを含めてください。MoEngageはトランスクリプトを自動的に生成しません。
  • ビデオコントロール: 再生 一時停止 ミュート 、および ミュート解除 ボタンなどのビデオコントロールに アクセシビリティテキスト を追加します。これにより、支援技術を使用しているユーザーを含むすべてのユーザーが、それらを簡単に理解できるようになります。

    ビデオコントロールのアクセシビリティテキストフィールドを示すスクリーンショット。

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

ナッジ - 評価 テンプレートでは、スクリーンリーダーが自動的に選択された評価を読み上げ、その後に関連するテキストが続きます。星4つ、期待を超えて。

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

MoEngageのアプリ内メッセージは、ユーザーの好みに適応するように設計されています:

  • 自動フォントスケーリング: アプリ内メッセージのテキストは、一般的にユーザーがAndroidまたはiOSデバイスで選択したフォントサイズ設定を尊重します。通常、これを手動で設定する必要はありません。ただし、非常に大きなテキストがレイアウトにどのように影響するかを考慮してください。
  • コンテンツスクロール:
    • 強調表示された フルスクリーンインアプリ メッセージの場合:ユーザーの大きなフォント設定によりコンテンツがオーバーフローする場合、スクロールが自動的に有効になります。
    • 強調表示された Nudges (非侵入型のアプリ内メッセージ): 必要に応じて、ナッジ内のコンテンツはスクロール可能になりますが、ナッジ自体はその位置を維持します。

キーボードナビゲーションとフォーカスマネジメント

MoEngage SDKは、良好なユーザーエクスペリエンスを確保するために、キーボードナビゲーションとフォーカスを管理します:

  • フォーカスの取り扱い: アプリ内メッセージが表示されると、フォーカスは自動的にメッセージに移動し、侵入的なメッセージに対して適切にトラップされます。メッセージが閉じると、フォーカスは通常、前の要素に戻ります。
  • アクセシブルな閉じるボタン: 標準の 閉じる ボタン (X) は、アプリ内メッセージにデフォルトでアクセシブルラベルが含まれています。カスタムの 閉じる ボタン (たとえば、HTMLのアプリ内メッセージで) を作成する場合は、キーボードでアクセス可能で、適切なアクセシブル名があることを確認してください。

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

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

TVアプリ内の考慮事項

TVプラットフォーム向けに特にインアプリメッセージを設計する場合:

  • プラットフォームガイドライン: 対象のテレビプラットフォームの特定のアクセシビリティ要件やナビゲーションパターン(例:リモコン操作)を認識してください。特にカスタムインタラクティブ要素を含むコンテンツが互換性があることを確認してください。

In-Appキャンペーンでこれらの要素を構成することで、アクセシビリティを大幅に向上させることができます。常に異なるデバイスでアプリ内メッセージをテストし、可能であればアクセシビリティツールを使用して良好なユーザーエクスペリエンスを確保してください。

Frequently Asked Questions

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

この記事は役に立ちましたか?
5人中1人がこの記事が役に立ったと言っています

How can we improve this article?