HTMLアプリ内メッセージ¶

警告

HTMLアプリ内メッセージの利用時は、必ずHTML/CSS/JavaScriptの知識・経験の豊富な人が操作・編集を行ってください。
テンプレートの内容をそのまま利用しない限り、HTMLアプリ内メッセージの編集画面上でレスポンシブ対応に必要なCSSやアニメーションのCSSの記述はございません。必要に応じて適宜ご準備ください。

HTMLアプリ内メッセージを作成する¶

HTMLアプリ内メッセージを作成する方法は2種類あります。

スタンダードテンプレートを利用する¶

配信したいメッセージをテンプレートの一覧から選択し、アプリ内メッセージの作成画面でタイプにある カスタム を選択します。

カスタムボタンを押下すると、テキストエディタが画面左側に表示されます。選択したテンプレートのHTML、CSSがそのままセットされていますので、必要に応じてHTMLやCSSを編集してください。

注釈

スタンダードで入力されたテキストの内容は画像も含めカスタムへ引き継がれます。
カスタムで編集した内容はスタンダードへ引き継がれません。また、カスタム編集中にスタンダードへ変更するとカスタムで編集した内容は破棄されます。

オリジナルテンプレートを利用する¶

テンプレートの一覧からオリジナルテンプレート(ID1000)を選択します。

HTMLアプリ内メッセージを編集する¶

パターンを複製する¶

メッセージ項目にある追加ボタンを押下し、 パターンを複製 ボタンを押下します。

複製されたパターンが表示されるので、エディタからメッセージを編集します。なお、HTMLアプリ内メッセージでパターンを複製した場合は、スタンダードタイプのメッセージに変更することはできません。

HTMLアプリ内メッセージを複製する¶

複製したいメッセージを選択し、複製ボタンを押下します。なお、複製元がHTMLアプリ内メッセージの場合はスタンダードタイプのメッセージに変更することはできません。

メッセージ編集画面に遷移後、エディタからメッセージを編集します。

コンテンツを編集する¶

コンテンツを編集します。 HTMLは以下のルールに沿って編集してください。

トップレベルが単一の要素となるよう記述してください。

<!-- Good -->
<div>
  <div>message1</div>
  <div>message2</div>
<div>

<!-- Bad -->
<div> message1</div>
<div> message2</div>

トップレベルがタグで囲まれた要素となるよう記述してください。

<!-- Good -->
<p>message</p>

<!-- Bad -->
message

メッセージを非表示にする要素を設定する¶

対象要素に data-repro--close 属性を追加してください。

<div class="btn" data-repro--close> ☓ </div>

効果測定で計測されるアクションボタンを設定する¶

アクションボタンに属性を設定することで、任意の要素へのクリックなどを効果測定の配信結果に表示される ボタン1押下数 、 ボタン2押下数 として集計することが可能です。

ボタン1・2押下数として効果測定したい要素に対して、それぞれ data-repro--primary-btn と data-repro--secondary-btn の属性を付与します。

<div class="btn" data-repro--primary-btn>button_1</div>
<div class="btn" data-repro--secondary-btn>button_2</div>

ボタン1・2をクリックした場合のトラッキングイベント名を指定する場合は、それぞれ data-repro--primary-cta-event と data-repro--secondary-cta-event の属性を付与します。

<div class="btn" data-repro--primary-btn data-repro--primary-cta-event="tap_button_1">button_1</div>
<div class="btn" data-repro--secondary-btn data-repro--secondary-cta-event="tap_button_2">button_2</div>

注釈

data-repro--primary-cta-event および data-repro--secondary-cta-event は同一の HTML 内で2回以上設定することはできません。
data-repro--primary-cta-event および data-repro--secondary-cta-event の属性を付与しない場合は、トラッキングイベント名として in_app_message が設定されます。
data-repro--primary-cta-event="" と記述した場合は、トラッキングイベント名として in_app_message が設定されます。data-repro--primary-secondary-event="" と記述した場合は、トラッキングイベント名は設定されず、要素をクリックしてもイベントは発火しません。

HTMLアプリ内メッセージで画像を設定する¶

メッセージで画像を利用する場合は、HTML上で挿入したい位置にカーソルを合わせ、テキストエディタ下部にある 画像を追加 ボタンを押してください。なお、画像付テンプレートの場合は、カーソルを指定しなくてもテンプレート上の画像の位置に自動で画像が追加されます。

パソコン上のフォルダから画像を選択して画像をアップロードすると、指定したカーソルの位置に img src= のタグと画像のURLが生成され、プレビュー上にも画像が反映されます。

注釈

画像を追加 ボタンでアップロードできる画像ファイルサイズは最大1MBです。なお、 画像を追加 ボタンを用いなければ、利用できる画像サイズに制限はありませんが、推奨画像サイズは変わらず最大1MBです。
画像の無いテンプレートを選択して 画像を追加 ボタンを利用する場合、<div class="repro-xxxx--container"> のタグ内にカーソルを指定してください。同タグ内にカーソルを指定しない場合、HTML構文の最終行に img src= のタグと画像のURLが生成され、メッセージの外に画像がアップロードされることになります。
管理画面上のプレビューは作成画面上のものとなるため、実機でも見た目をご確認ください。

HTMLアプリ内メッセージでJavaScriptを利用する¶

ID1000のテンプレートのみ、JavaScriptを記述することが可能です。JavaScriptを記述することでよりリッチな表現が可能になります。

警告

HTMLアプリ内メッセージでJavaScriptを利用するには、Repro iOS SDK 5.5.0以上かつ iOS 9 以上、もしくはRepro Android SDK 5.4.0 以上かつ Android 5 以上を利用してください。対象バージョン未満では、JavaScriptが動作しません。
本機能を利用することで生じた一切の損失に関して、当社は責任を負いかねます。詳しくはRepro利用規約(https://repro.io/company/legal/term/)をご確認ください。

導入手順¶

アプリ内メッセージを参考にしてメッセージを作成してください。その際、ID1000のテンプレートを選択して下さい。
1.で作成したメッセージの編集画面のコンテンツでJavaScriptを選択してJavaScriptを編集をすることができます。

実装例に関して、ご希望の方は、管理画面右下のチャットもしくは弊社の営業担当へお問い合わせください。

注釈

当該のスクリプトは ローカルな関数スコープとして実行されます ので、ご注意ください。
当該のスクリプトに対する トランスパイルの処理は行われません ので、ご注意ください。
JavaScriptとして記述する内容については一切の制限を行いませんが、jQueryなどのライブラリはロードしません。
JavaScriptエディター内のLinterは、JSHintを使用しています。

思った通りの動きを実現出来ているかをプレビューの機能を使って、確認することが出来ます。

注釈

管理画面上のプレビューは作成画面上のものとなるため、実機でも見た目をご確認ください。
ID1000以外のテンプレートでは、JavaScriptはご利用になれません。

HTMLアプリ内メッセージでイベントトラッキングおよびユーザープロフィールの設定を行う¶

JavaScriptを用いて処理を記述することで、任意のイベントのトラッキングやユーザープロフィールの設定を行うことができます。

実装例

以下のスクリプトはあくまでサンプルになりますので、その旨ご了承の上ご利用ください。

フォームに入力されたメールアドレスをユーザープロフィールに登録する例

// Email address input form
var email = document.getElementById("email-form");
// Register button
var registerButton = document.getElementById("register-button");
// Register the e-mail address to user profile
registerButton.onclick = function() {
    Repro.setUserEmailAddress(email.value);
    // Close the in-app message
    Repro.closeDialog();
}

その他、詳細な利用方法についてはユーザープロフィールおよびイベントトラッキングを参照してください。

警告

HTMLアプリ内メッセージでの任意のイベントのトラッキングおよびユーザープロフィールの設定を行うには、iOS SDK 5.19.0 以上および Android SDK 5.18.0 以上を利用する必要があります。

HTMLアプリ内メッセージでイベントプロパティの取得を行う¶

JavaScriptを用いて処理を記述することで、アプリ内メッセージを開いた際のトリガーとなったイベントのプロパティを取得することができます。

実装例

ショップ画面を開いたときにイベントをトラックし、そのイベントをトリガーとして表示されたアプリ内メッセージの中でユーザーの居住地に応じた画像を表示する例

// This is a sample of an application being developed in Java

// Runs when the store page is opened
Map<String, Object> properties = new HashMap<>();
properties.put("residenceArea", "tokyo");
Repro.track("openedStorePage", properties); // Shows an in-app message

// Replace the src property of a <img src=""> tag according to the user's location
document.getElementById("topImage").src = "https://example.com/img/area/" + Repro.triggeredEventProperties.residenceArea + ".jpg";

警告

HTMLアプリ内メッセージ内でイベントプロパティの取得を行うには、iOS SDK 5.19.0 以上および Android SDK 5.18.0 以上を利用する必要があります。

その他の設定¶

配信設定などのその他のメッセージ設定につきましては、アプリ内メッセージをご確認ください。