カスタムメッセージ （ベータ版）¶
カスタムWebメッセージ機能はベータ版になります。ご利用にあたっては ベータ版利用規約 をご承諾の上でご利用いただきますようお願いいたします。 ご利用の申し込みなどのご不明点がございましたら、担当の弊社カスタマーサクセスメンバーまでご連絡ください。
注釈
- アプリ内メッセージではご利用いただけません。
警告
- カスタムメッセージの利用時は、必ずHTML/CSS/JavaScriptの知識・経験の豊富な人が操作・編集を行ってください。
- 動的なスクリプト実行を防ぐため、不正な要素や属性は実際のメッセージ上では消えていたり、サニタイズされて無効化される場合があります。また、この仕様は機能改善やバグ修正によって事前の予告なく変更される可能性があります。
- テンプレートの内容をそのまま利用しない限り、カスタムメッセージの編集画面上でレスポンシブ対応に必要なCSSやアニメーションのCSSの記述はございません。必要に応じて適宜ご準備ください。
カスタムメッセージを作成する¶
カスタムメッセージを作成する方法は2種類あります。
スタンダードテンプレートを利用する¶
- 配信したいメッセージをテンプレートの一覧から選択し、Webメッセージの作成画面でタイプにある カスタム を選択します。
- カスタムボタンを押下すると、テキストエディタが画面左側に表示されます。選択したテンプレートのHTML、CSSがそのままセットされていますので、必要に応じてHTMLやCSSを編集してください。
注釈
- スタンダードで入力されたテキストの内容は画像も含めカスタムへ引き継がれます。
- カスタムで編集した内容はスタンダードへ引き継がれません。また、カスタム編集中にスタンダードへ変更するとカスタムで編集した内容は破棄されます。
カスタムメッセージを編集する¶
パターンを複製する¶
- メッセージ項目にある 追加 ボタンを押下し、 パターンを複製 ボタンを押下します。
- 複製されたパターンが表示されるので、エディタからメッセージを編集します。なお、カスタムメッセージでパターンを複製した場合は、スタンダードタイプのメッセージに変更することはできません。
カスタムメッセージを複製する¶
- 複製したいカスタムメッセージを選択し、複製ボタンを押下します。なお、複製元がカスタムメッセージの場合はスタンダードタイプのメッセージに変更することはできません。
- メッセージ編集画面に遷移後、エディタからメッセージを編集します。
コンテンツを編集する¶
コンテンツを編集します。 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--wrapper属性を設定してください。
<div class="container" data-repro--wrapper> message </div>
- 対象要素に
data-repro--close属性を追加してください。
<div class="btn" data-repro--close> ☓ </div>
効果測定で計測されるアクションボタンを設定する¶
アクションボタンに属性を設定することで、任意の要素へのクリックなどを効果測定の配信結果に表示される ボタン1押下数 、 ボタン2押下数 として集計することが可能です。
- メッセージの一番外側の要素に
data-repro--wrapper属性を設定してください。
<div class="container" data-repro--wrapper> message </div>
- ボタン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>
注釈
data-repro で始まる各種属性については、1つのメッセージ内につき単一の要素にしか利用できません。 例えば、 data-repro--close という属性を付与した要素を複数作成してもすべての要素で同様の振る舞いは持ちません。
アニメーションを設定する¶
カスタムメッセージの表示・非表示の動きはそれぞれWeb SDKにより対象の要素の opacity プロパティを 0 と 1 に変更することで実現しています。 例えば、フェードインなどをご利用の場合は、 opacity プロパティの振る舞いをもとに適切な要素に opacity プロパティを記述してください。
カスタムメッセージで画像を設定する¶
- メッセージで画像を利用する場合は、HTML上で挿入したい位置にカーソルを合わせ、テキストエディタ下部にある 画像を追加 ボタンを押してください。なお、画像付テンプレートの場合は、カーソルを指定しなくてもテンプレート上の画像の位置に自動で画像が追加されます。
- パソコン上のフォルダから画像を選択して画像をアップロードすると、指定したカーソルの位置に
img src=のタグと画像のURLが生成され、プレビュー上にも画像が反映されます。
注釈
- 画像を追加 ボタンでアップロードできる画像ファイルサイズは最大1MBです。なお、 画像を追加 ボタンを用いなければ、利用できる画像サイズに制限はありませんが、推奨画像サイズは変わらず最大1MBです。
- 画像の無いテンプレートを選択して 画像を追加 ボタンを利用する場合、
<div class="repro-xxxx--container">のタグ内にカーソルを指定してください。同タグ内にカーソルを指定しない場合、HTML構文の最終行にimg src=のタグと画像のURLが生成され、メッセージの外に画像がアップロードされることになります。 - 管理画面上のプレビューは作成画面上のものとなるため、実機でも見た目をご確認ください。
- 実機でのプレビューは、 Webメッセージ の プレビュー機能を使った確認方法 をご確認の上、プレビュー機能をご活用ください。
- script タグは使用できません。