メインコンテンツへスキップ
  1. Repro Help&Support
  2. ReproApp
  3. 機能ガイド
  4. アプリ内メッセージ
loading

    アプリ内メッセージのメッセージを設定する：HTML（WebView）

    Suzuki Mariko
    • 更新
    app

    この記事では「アプリ内メッセージのテンプレートを選択する」で説明したHTML（WebView）のテンプレートを選択した場合、メッセージとして設定可能な項目を説明します。

    「アプリ内メッセージの作成をはじめる」に従い、キャンペーンを作成しアプリ内メッセージのコンテンツにあたるメッセージ部分を設定するための記事です。

    メッセージ

    編集できる内容はテンプレートにより異なりますが、それぞれの項目を説明します。
    各項目はテンプレートによって指定がない項目もあります。

    HTMLinApp.png

    項目名 説明
    パターン 操作対象のパターンを選択します。
    [追加]をクリックするとA/Bテストを行うためのパターンを複数作成できます。詳しくは「アプリ内メッセージでA/Bテストをする」で説明します。
    タイプ スタンダードとカスタムを選択することができます。スタンダードはテンプレートの項目を穴埋め式で記入することができます。カスタムはHTML・CSSを編集することができます。
    詳しくは「アプリ内メッセージをHTMLとCSS、JavaScriptでカスタマイズする」を確認してください。
    オーバーレイ メッセージの背景となる部分の色を設定します。
    ダイアログ メッセージのダイアログ部分の色を設定します。
    閉じるボタン 閉じるボタンの背景色とアイコンの色を設定します。
    画像 メッセージに表示する画像を指定します。
    見出し メッセージのヘッダーを指定します。
    本文 メッセージの本文とテキストの色を設定します。
    アクションボタン メッセージに表示するボタンの設定をします。
    選択したテンプレートによりボタンを1つまたは2つ設定でき、ボタンの背景色とテキストの色を設定できます。
    ディープリンクもしくはURL（任意） URLを指定するとボタンをタップした時に指定したURLのページを開くことができます。（最大文字数：1000字）
    アプリを起動しアプリ内の任意の画面に遷移したり指定したURLのWebページを開くことができます。
    URLもしくはディープリンクを指定しなかった場合、ボタンをタップするとアプリ内メッセージが閉じます。
    トラッキングイベント名（任意） ボタンをタップしたときに記録されるイベント名を入力します。
    配信結果の確認時、効果測定に利用できます。
    プレビュー 作成しているメッセージのデザインを確認できます。
    YouTube URL 動画埋め込み（YouTube＋テキスト＋ボタン）テンプレートで必要な設定です。
    Googleフォーム URL アンケート埋め込み（Googleフォーム）テンプレートで必要な設定です。
    Silver EggRecommendation設定 レコメンド（シルバーエッグ）テンプレートで必要な設定です。

    オーバーレイ

    オーバーレイでは、メッセージの背景となる部分の色を設定します。
    色と透明度を調節することができます。

    overlay_htmlinapp.png

    ダイアログ

    ダイアログは、ダイアログのテンプレートでのみ設定することができる背景色です。
    メッセージ本体（見出し、本文、ボタン）の背景色にあたります。
    色と透明度を調節することができます。

    dialog_htmlinapp.png

    画像

    画像メッセージで指定できる画像サイズは、テンプレートによって異なります。

    • ファイルフォーマット：JPEG/PNG
    • ファイルサイズ：最大1MB、推奨 300KB以内
    • 画像サイズ（縦と横）：最大長3000px
    注釈💬

    選択したファイルサイズが大きい場合は、メッセージが表示されるまでに時間がかかる場合があります。そのため、300KB以内のファイルサイズの使用を推奨します。

    テンプレート毎の推奨サイズ（最小値）は下記です。
    推奨サイズより小さいサイズの画像の登録は可能ですが、端末での表示が粗くなる可能性があります。

    大きな画像のダイアログ
    600px ✕ 500px

    image1_htmlinapp.png

    小さな画像のダイアログ
    150px ✕ 150px以上

    image2_htmlinaapp.png

    ディープリンクもしくはURL

    アプリを起動しアプリ内の任意の画面に遷移したり、指定したURLのWebページを開くことができます。
    URLもしくはディープリンクを指定しなかった場合、ボタンをタップするとアプリ内メッセージが閉じます。
    ディープリンクは以下3種類のディープリンクに対応しています。

    • ユニバーサルリンク
    • アプリリンク
    • カスタムURL Scheme

    ユニバーサルリンクとアプリリンクを指定したい場合は、「プッシュ通知やアプリ内メッセージのディープリンクで指定できる形式はなんですか？」を参考に実装を検討してください。

    HTMLinApp_url.png

    各テンプレートで共通の設定が完了しました。
    ここからは、各機能に限定して必要な設定項目を説明します。

    動画埋め込み（YouTube＋テキスト＋ボタン）

    ヒント💡

    動画埋め込みを利用するためには、下記を満たす必要があります。

    • Repro iOS SDK 5.2.0以上が導入されたアプリで、端末がiOS 9以上である
    • Repro Android SDK 5.1.0以上が導入されたアプリで、端末がAndroid 5以上である

    条件を満たさない端末にはアプリ内メッセージが配信されず、表示されません。

    動画埋め込み（YouTube＋テキスト＋ボタン）YouTube URLを指定します。

    youtube_htmlinapp.png

    項目名 説明
    YouTube URL メッセージに表示するYouTubeのURLを指定します。
    指定するURLは、埋め込み用のURLを指定してください。
    指定できるURLの文字列長は最大2000文字です。

    埋め込み用のURLはYouTubeの画面から取得する必要があるので、手順を説明します。

    1. 埋め込みたいYouTube動画の画面をひらく
    2. 再生画面下欄の[共有]をクリックし、共有メニューを表示する
      youtube_share.png
    3. [埋め込む]をクリックし埋め込み用のURLを表示する
      youtube_click.png
    4. src=""に記載の値が埋め込み用のURLなので、この値をコピーする
      Youtube_embed.png
      上記の場合、https://www.youtube.com/embed/K_40bCCjyFEが埋め込み用のURLとなる
    注釈💬
    • YouTube URLはhttps://www.youtube.com/embed/{id}?query=trueの形式に沿う必要があり、形式が異なる場合はメッセージの保存ができません
    • URLパラメータにはplaysinline=1が自動で付与されます、playsinlineのパラメータは付与しないでください
    • playsinline以外のパラメータを付与することは可能ですが、OSや端末によってはパラメータが効かない可能性もあるため、実機での検証を推奨します
    • Android端末ではOSや機種によって動画の全画面表示が行えないため、fs=0のURLパラメータで全画面表示ボタンの表示を制御することを検討してください
    • YouTube動画の公開が終了している、もしくは埋め込み不可に設定されているなどの理由で、配信されたメッセージ内の動画が再生されない場合があります、配信時には動画が表示可能かを確認してください
    警告⚠

    Unityを使ってビルドされたAndroidアプリでは、YouTubeの動画を埋め込んだメッセージが配信されますが動画が再生されません。

    アンケート埋め込み（Googleフォーム）

    ヒント💡

    アンケート埋め込みを利用するためには、下記を満たす必要があります。

    • Repro iOS SDK 5.2.0以上が導入されたアプリで、端末がiOS 9以上である
    • Repro Android SDK 5.1.0以上が導入されたアプリで、端末がAndroid 5以上である

    条件を満たさない端末にはアプリ内メッセージが配信されず、表示されません。

    アンケート埋め込み（Googleフォーム）テンプレートではGoogleフォーム URLの指定が必要です。

    googleform_htmlinapp.png

    項目名 説明
    Googleフォーム URL メッセージに表示する GoogleフォームのURLを指定します。
    指定するURLは、埋め込み用のURLを入力してください。
    指定できるURLの文字列長は最大2000文字です。

    GoogleフォームのURLはGoogleフォームの画面から取得する必要があるので、手順を説明します。

    1. 埋め込みたいGoogleフォームの画面をひらく
    2. [送信]をクリックし、フォームを送信のメニューを表示する
      form_click.png
    3. [< >]をクリックし、埋め込み用URLを表示する
    4. src=""に記載の値が埋め込み用のURLなので、この値をコピーする
      form_URL.png
      上記の場合、https://docs.google.com/forms/d/e/1FAIpQLSe〜が埋め込み用のURLとなる
    注釈💬
    • GoogleフォームURLはhttps://docs.google.com/forms/d/e/{form_id}/viewform?embedded=trueの形式に沿う必要があり、形式が異なる場合はメッセージの保存ができません
    • embedded以外のパラメータを付与することは可能ですが、OSや端末によってはパラメータが効かない可能性もあるため注意してください
    • Googleフォームの公開が終了している、回答者の権限が絞られているなどにより配信されたメッセージ内のアンケートが表示できない場合があります、配信時にはアンケートが回答可能か確認してください

    レコメンド（シルバーエッグ）

    レコメンド（シルバーエッグ）テンプレートでは、Silver Egg Recommendation設定が必要です。
    詳しい設定方法は「開発ドキュメント > シルバーエッグレコメンドメッセージ」を確認してください。

    silveregg.png

    項目名 説明
    Silver Egg Recommendation設定 商品名と価格のテキストの色を設定します。
    Spec ID SpecIDを入力します。
    注釈💬

    シルバーエッグレコメンドメッセージはベータ版機能となります。利用を希望する場合は弊社営業、もしくはカスタマーサクセス担当までお問い合わせください。

    アプリ内メッセージのメッセージ部分の設定が完了しました。
    次の設定項目にあたる「アプリ内メッセージの配信対象者を各パターンに振り分ける」を参照してください。

    関連記事