アプリ内メッセージは、組み込み(Native)とHTML(WebView)という2つのタイプがあります。
HTML(WebView)は、HTMLとCSSを記述しオリジナルデザインのメッセージが配信できます。
また、オリジナル(ID1000)テンプレートを利用すれば、JavaScriptを記述でき、動きのあるメッセージの配信も可能です。
この記事では、アプリ内メッセージのカスタム方法を説明します。
テンプレートの種類は「アプリ内メッセージのテンプレートを選択する」で説明しています。
また、カスタムの利用時は、必ずHTMLやCSS、JavaScriptの知識・経験の豊富な人が操作・編集を行ってください。
そういったリソースの確保が難しい場合、有償でメッセージ作成代行を承ることができます。詳しくは担当のカスタマーサクセスまでお声がけください。
HTML(WebView)でHTML・CSSを利用しカスタマイズ
HTML(WebView)のアプリ内メッセージで、HTML・CSSを記述する方法は2つあります。
- テンプレートで自動生成されるHTML・CSSを利用し、各種テンプレートのデザインを流用する
- オリジナルテンプレートで、すべてのHTML・CSSを記述し、0から作成する
それぞれのカスタマイズを行うための方法を紹介します。
もし、アプリ内メッセージそのものの作成方法がわからない場合は、「アプリ内メッセージのメッセージを設定する:HTML(WebView)」を確認してください。
各種テンプレートのデザインを流用
テンプレートを選択するとき、HTML(WebView)から好きなデザインを選択します。
その後、表示される画面で、カスタムをクリックしてください。
すると、必要最低限のHTML・CSSが記述された状態でエディタが表示されます。
カスタムに切り替える前に、スタンダードで入力した項目はそのままコードに反映されます。
しかし、カスタムで編集した内容はスタンダードへ引き継がれません。そのため、カスタム編集中にスタンダードをクリックすると、編集した内容は破棄されます。
オリジナルテンプレートで0から作成
ID1000のオリジナルテンプレートを選択します。
その後、表示される画面で、HTML・CSSが記述できるエディタが表示されます。
オリジナルテンプレートを利用する場合、レスポンシブ対応を行うにはCSSを用意する必要があります。デフォルトではCSSやアニメーションCSSの記述はありません。
HTML(WebView)のカスタム
カスタムを選択した場合、表示される各項目の説明をします。
カスタムを選択しない時も表示される項目は「アプリ内メッセージのメッセージを設定する:HTML(WebView)」を参照してください。
項目名 | 説明 |
---|---|
コンテンツ | HTML・CSSを入力します。 HTML・CSSのボタンをクリックすると、編集する対象を切り替えます。 |
画像を追加 | メッセージに表示するための画像をアップロードします。 画像を選択し、アップロードが完了すると、エディタ上でカーソルがある箇所に img タグが挿入されます。カーソルがエディタ内にない場合、HTML構文の最終行に追加されるため、正しい箇所に動かしてください。また、自社サーバーにホスティングされている画像を利用する場合は、この機能を利用せず直接 img タグを記述できます。画像サイズは最大1MBで、300KB 以内を推奨します。 |
コンテンツ
HTMLは下記のルールに従って記述してください。
トップレベルは単一の要素で構成
トップレベルが単一の要素になる必要があります。
<!-- Good -->
<div>
<div>message1</div>
<div>message2</div>
<div>
<!-- Bad -->
<div> message1</div>
<div> message2</div>
トップレベルはタグで囲まれた要素で構成
トップレベルはタグで囲まれている要素としてください。
タグで囲われていないテキストのみのメッセージは作成できません。
<!-- Good -->
<p>message</p>
<!-- Bad -->
message
コンテンツ内で使用できるタグの一覧は、「アプリ内メッセージで使用できるタグはなんですか?」で確認できます。
HTML(WebView)で使えるHTML属性
HTMLに記述する要素に属性を指定すると、メッセージのふるまいを追加できます。
メッセージを非表示にするための設定
表示されたメッセージを非表示にするためには、data-repro--close
属性を使用します。
対象の要素がタップされたとき、メッセージを閉じる挙動を実現できます。
表示中のメッセージを非表示にさせたい要素に対し、HTML属性を追加してください。
<div class="btn" data-repro--close> x </div>
効果測定で計測されるアクションボタンとするための設定
表示されたメッセージのボタン押下数を計測するためには、data-repro--primary-btn
とdata-repro--secondary-btn
属性を使用します。
対象の要素がタップされたとき、ボタン押下数として計測した上で、メッセージを閉じます。
そのため、data-repro--close
属性の併用は不要です。
ボタン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の押下時、任意のイベント名でトラッキングするための設定
ボタン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>
この例では、イベント名「tap_button_1」と「tap_button_2」がトラッキングされます。
data-repro--primary-cta-event
およびdata-repro--secondary-cta-event
の属性を付与しない場合、自動的にイベント名「in_app_message」としてトラッキングします。
-
data-repro--primary-cta-event
およびdata-repro--secondary-cta-event
は同一のHTML内で1回だけ設定可能で、2回以上の設定はできません -
data-repro--primary-cta-event=""
と記述すると、自動的にイベント名「in_app_message」としてトラッキングします -
data-repro--secondary-cta-event=""
と記述すると、イベントがトラッキングされません
オリジナルテンプレートをJavaScriptで追加カスタマイズ
オリジナル(ID1000)テンプレートのみ、JavaScriptを記述できます。
JavaScriptを記述することで、よりリッチなメッセージの配信を実現します。
動作環境
- iOS端末:Repro iOS SDK 5.5.0 以上が導入済のアプリで、OSが iOS 9 以上
- Android端末:Repro Android SDK 5.4.0 以上が導入済アプリで、OSが Android 5 以上
- 動作環境外では、正しくJavaScriptが動作しません
- 本機能を利用することで生じた一切の損失に関して当社は責任を負いかねます、詳しくはRepro利用規約を参照してください
JavaScriptを記述してできること
たとえば、下記のようなユースケースを実現できます。
- 特定の時間までのカウントダウンを表示する
- 複数の画像をカルーセルとして順番に表示する
- データを送受信し、受け取った値を埋め込み表示する
JavaScriptが記述できると施策の幅がぐっと広がります。
JavaScriptを利用してもできないこと
- アプリ内メッセージの表示自体に関する制御
- ユーザープロフィールやイベントの実行
代替案がご案内できる可能性もあるので、弊社のカスタマーサクセス担当、もしくはRepro管理画面の右下にあるアイコンよりチャットサポートへお問い合わせください。
JavaScriptの記述方法
- オリジナルテンプレートを利用してメッセージを作成
- エディタにJavaScriptタブが表示されるため、任意のJavaScriptを記述
意図した挙動を実現できているかは、メッセージ作成画面のプレビュー機能や実機へのテスト配信を行って、確認してください。
注意事項
- 当該のスクリプトはローカルな関数スコープとして実行されます
- 当該のスクリプトに対するトランスパイルの処理は行われません
- JavaScriptとして記述する内容については一切の制限を行いませんが、jQueryなどのライブラリはロードしません
- HTMLにscriptタグを記述できます、読み込みはonload時です
- JavaScriptエディター内のLinterは、JSHintを使用しています
アプリ内メッセージのカスタマイズを行うと、テンプレートでは表現できないような豊かなメッセージが配信できます。
必要に応じ、JavaScriptを利用した実装例をお渡しすることも可能です。理想に近いメッセージの配信を実現していきましょう。