Webメッセージをカスタムする – Repro Help&Support

メッセージのタイプより、「カスタム」を利用することで、HTML、CSS、JavaScriptを自由に記載し、メッセージのデザインを作成できます。そのため、Webサイトのイメージに合わせたWebメッセージの作成が可能です。

例えば、「メッセージをフェードインさせる」といった、テンプレート利用では対応できないリッチな表現が可能になります。

注釈💬

カスタムの利用時は、必ずHTML/CSS/JavaScriptの知識・経験の豊富な人が操作・編集を行ってください
本機能を利用することで生じた一切の損失に関して、当社は責任を負いかねます。詳しくはRepro利用規約をご確認ください

カスタムを利用するための方法

カスタムを利用する方法は下記2種類あります。

メッセージのタイプをカスタムへ切り替え
オリジナルテンプレートを利用

それぞれ説明します。

メッセージのタイプをカスタムへ切り替え

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

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

注釈💬

カスタム編集中に「スタンダード」へ変更すると、カスタムで編集した内容は破棄されますのでご注意ください。

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

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

メッセージセクションの画面左側にテキストエディタが表示されます。

オリジナルテンプレートを選択した場合、HTML、CSSはセットされません。ご自身でHTMLとCSSを記入してください。

HTML・CSSの利用

それではメッセージの記述方法について説明します。はじめに、HTMLとCSSを利用する方法を記載します。

注釈💬

HTMLにscriptタグは使用できません。JavaScriptを利用する場合は、「JavaScript」タブをクリックしてください。

メッセージの編集

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

トップレベルが単一の要素となるようにする

<!-- OK --> 
<div> 
<div>message1</div> 
<div>message2</div> 
</div>
<!-- NG --> 
<div> message1</div> 
<div> message2</div>

トップレベルがタグで囲まれた要素となるようにする

<!-- OK --> 
<p>message</p> 
<!-- NG --> 
message

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

効果測定で計測する場合は、タグにRepro独自の属性を設定してください。

効果測定タグの設定

Repro管理画面上のキャンペーン配信結果でボタンクリックを計測するためには、効果測定タグを設定する必要があります。メッセージの一番外側の要素に data-repro--wrapper属性を設定してください。

<div class="container" data-repro--wrapper> message </div>

警告⚠

data-repro--wrapper属性を設定しないと効果測定が行われないので、必ず設定してください。

ボタンの計測

ボタンクリック時に計測する場合は、効果測定したい要素に対して下記属性を設定してください。

data-repro--primary-btn
data-repro--secondary-btn
data-repro--third-btn
data-repro--fourth-btn

<div class="btn" data-repro--primary-btn>button_1</div>
<div class="btn" data-repro--secondary-btn>button_2</div>
<div class="btn" data-repro--third-btn>button_3</div>
<div class="btn" data-repro--fourth-btn>button_4</div>

画像の計測

画像クリック時に計測する場合は、効果測定したい要素に対して下記属性を設定してください。

data-repro--primary-image
data-repro--secondary-image
data-repro--third-image
data-repro--fourth-image

<div class="image" data-repro--primary-image=""><img src="image_1" alt="primary-image"></div>
<div class="image" data-repro--secondary-image=""><img src="image_2" alt="secondary-image"></div>
<div class="image" data-repro--third-image=""><img src="image_3" alt="third-image"></div>
<div class="image" data-repro--fourth-image=""><img src="image_4" alt="fourth-image"></div>

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

メッセージを非表示にする場合、対象要素にdata-repro--close属性を付与することで、ボタンをクリックしてメッセージを閉じることができます。

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

また、data-repro--no-close属性をアクションボタンに付与することで、ボタンをクリックしてもメッセージを閉じないように挙動を変更することが可能です。

リンクの設定

リンクを設定する場合は、href属性を利用してください。

<a href="https://repro.io/">Repro会社概要</a>

注釈💬

WebSDKの仕様上、target="_blank" をアクションボタンに設定していてもリンク先への遷移は下記のような振る舞いに上書きされますので、ご注意ください。

当該のWebサイトと同一ドメインのリンクを遷移先に設定した場合：現在開かれているタブと同一のタブ上でリンク先へと遷移
当該のWebサイトと別ドメインのリンクを遷移先に設定した場合：現在開かれているタブとは別のタブ上でリンク先へと遷移

アニメーションの設定

カスタムの表示・非表示の動きはそれぞれWeb SDKにより対象の要素のopacityプロパティを「0」と「1」に変更することで実現しています。

例えば、フェードインなどをご利用の場合は、 opacityプロパティの振る舞いをもとに適切な要素に opacityプロパティを記述してください。

画像を追加

メッセージで画像を利用する場合は、HTML上で挿入したい位置にカーソルを合わせ、テキストエディタ下部にある[画像を追加]ボタンをクリックしてください。

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

注釈💬

[画像を追加]ボタンでアップロードできる画像ファイルサイズは最大1MBです。[画像を追加]ボタンを用いなければ利用できる画像サイズに制限はありませんが、推奨画像サイズは変わらず最大1MBです

CSSの適用範囲設定

「CSSの適用範囲をメッセージ内に限定する」にチェックが入っている場合、カスタム内で作成されたCSSはメッセージ内でのみ有効となります。

上記チェックボックスからチェックを外すと、CSSがウェブサイト全体に適用されます。

利用可能なHTMLタグ・属性

動的なスクリプト実行を防ぐため、利用可能なタグ・属性以外は無効化されます。

利用可能なタグの一覧はカスタムで利用可能なHTMLタグ・属性を参照してください。

JavaScriptの利用

次に、JavaScriptの利用方法を説明します。

事前準備

JavaScriptを利用するにあたり、事前に管理画面でJavaScript編集機能をONにする必要があります。

管理画面の左メニューより、[設定] > [プロジェクト設定]をクリックし、プロジェクト設定画面へ遷移してください。

プロジェクト設定画面の[機能設定]タブより、「WebメッセージのJavaScript編集を有効にする」をOnにしてください。

これでJavaScriptの編集ができるようになりました。

注釈💬

「WebメッセージのJavaScript編集を有効にする」をOnからOffに切り替えた場合、Webメッセージの配信自体がなくなるわけではなく、カスタムJavaScriptを使って記述された挙動のみ無効となります。

Webメッセージの配信を停止したい場合は、メッセージ画面から停止してください。

JavaScriptを利用したコンテンツの作成

メッセージの編集画面のコンテンツで「JavaScript」タブを選択してください。

テキストエリアにJavaScriptが記載できるようになります。

message.show();を記載する

インプレッションに計上されるタイミングは、message.show(); が実行されたタイミングです。そのため、メッセージを表示するためには必ず message.show();を当該のスクリプト内に記載してください。

message.close();を記載する

data-repro--close属性のついた要素が存在しないメッセージの場合、必ず当該のスクリプト内のどこかで message.close();を記載してください。message.close();が記載されない場合、メッセージを閉じることができません。

注釈💬

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

JavaScript実装例

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

ページを50%スクロールしたら、メッセージを表示させる

var body = window.document.body;
var html = window.document.documentElement;
window.addEventListener('scroll', function onScroll() {
    var scrollTop = html.scrollTop || body.scrollTop;
    var pageHeight = Math.max.apply(null, [body.clientHeight, body.scrollHeight, html.scrollHeight, html.clientHeight]);
    var viewHeight = html.clientHeight || body.clientHeight;
    var scrollRate = ((scrollTop + viewHeight) / pageHeight) * 100;
    if (scrollRate > 50) {
        message.show();
        window.removeEventListener('scroll', onScroll);
    }
});

メッセージの表示を5秒遅らせる

window.setTimeout(function() {
    message.show();
}, 5000);

注釈💬

上記サンプルコードの場合、メッセージの表示トリガーが発火してから5秒以内にユーザーがサイトを閉じた場合は「インプレッション」にカウントされません。

JavaScript利用時の注意点

Session cookieに関しての注意点

お客様のReproアカウントが乗っ取られた場合に、本機能はXSSのSINKとなる可能性がございます。そのような攻撃に備えて、Webサイト内でご利用されているSession cookieにHttpOnly属性がついているかのご確認をお願いします。

効果測定に関する注意点

コントロールグループを利用される場合、コントロールグループと比較する際の条件や基準を揃えるため、コントロールグループにもその他のパターンと同様にJavaScriptを設定いただくことを推奨しております。

例えば、ページを50%スクロールした際にメッセージを表示する施策を行う場合、コントロールグループにもスクロール50%で計測するよう同様のJavaScriptを設定してください。

また、コントロールグループの振り分けが1%以上でパターン1のメッセージタイプがカスタムの場合、スタンダードからカスタムに変更した時点のスクロール率と経過時間を含むJavaScriptコードがコントロールグループに自動反映されます。ただし、それ以降にカスタムで行われた変更内容は自動的に反映されませんので、必要に応じてコントロールグループ内のJavaScriptを個別で編集してください。

基準の要素を利用する場合の注意点

「埋め込み」のテンプレートを選択し「基準の要素」を設定した場合、対象の要素がないとカスタムで記述するJavaScriptは実行されないのでご注意ください。

カウントダウンテンプレートを利用する場合の注意点

カウントダウンのテンプレート内でカスタムを利用する場合は、data-repro-template--countdown-wrapper属性を消去しないようにご注意ください。効果測定が正しく行われません。