ポップアップバナー管理

ポップアップバナー管理について

ポップアップバナーとは、表示したいページファイルに専用ソースを直接記述することで、LPページなどにお得な情報や、確認ページでアップセル、購入完了ページでクーポン発行など様々なシーンでご利用いただけます。

マーケティング管理>ポップアップバナー管理より登録・編集が行えます。

また、グローバルタグ設定に専用ソースを設置すれば、特定のADコードやLPフォームページにも設置することが可能です。
※設置できるページはグローバルタグ設定の設定ページに限られます。

グローバルタグ設定については下記マニュアルをご参照ください。
グローバルタグ設定_マニュアル


表示イメージ


※ポップアップ表示イメージです。




新規登録・編集・設置

新規登録

STEP1.  ポップアップバナー管理画面の新規登録を押下

STEP2.  各項目を設定し上記内容で登録する押下


設定項目詳細
タイトル 必須 管理用です。
わかりやすいタイトルを登録してください。
特権代理店 必須 詳細は管理画面の?にマウスオーバーすると説明が表示されます。
ポップアップバナー 必須 テキストエリアに、ポップアップバナーを表示するHTMLソースを記述してください。
こちらを押下するとサンプルソースが表示されます。
※サンプルソースは上部の「表示イメージ」で表示されているものとなります。
サイズ単位 必須 表示するサイズの単位を選択
サイズ 必須 ポップアップ全体のサイズの指定
ターゲット 必須 一覧の対象項目に設定したターゲットが表示されます。
なお、ここで設定したPC・スマートフォンでの表示に設定されるわけではございません。
ポップアップバナー
タイプ 必須
時限 アクセス後、設定した時間にポップアップ表示されます。
[発火時間]の項目で時間を設定します。
離脱時 ページから離脱する際に表示されます。
※離脱時の表示はブラウザバックしたときのみ表示されます。
スクロール 任意の位置までスクロール(移動)するとポップアップ表示されます。
[スクロール位置]の項目で設定します。
発火時間 必須 ポップアップバナータイプを[時限]の選択時に表示されます。
アクセス後に何秒したら表示するかを設定します。
設定は1~120秒の間で設定可能です。
スクロール位置 必須 ポップアップバナータイプを[スクロール]の選択時に表示されます。
HTMLタグid指定となります。任意のidの位置までスクロール(移動)するとポップアップ表示されます。
例)の位置に移動した時に表示したい場合は、aaaaaaと入力してください。
開始日時 期間限定時の開始時間を設定します。
終了日時 期間限定時の終了時間を設定します。
稼動/非稼動 必須 稼働/非稼働の設定をします。


編集方法

ポップアップバナー管理画面には登録されている一覧が表示されます。
一覧のID番号を押下し編集画面から行えます。


設置方法

ポップアップバナー管理画面には登録されている一覧が表示されます。
一覧内の「設置用HTML」に表示されているソースを表示させたいページファイルに記述、もしくはグローバルタグ設定に設置してください。
※グローバルタグ設定に設置する場合、「挿入位置」は「bodyタグ内」で登録してください。

タグ設置後には設置したページでポップアップバナーが表示されているかの確認を行ってください。




ポップアップバナー活用方法

注意 ※編集を行う際は必ずバックアップをお取りください。
※編集後は必ず動作テストを行ってください。
※デザインカスタマイズはサポート対象外です。



表示イメージ

商品選択をして購入促進(LP商品自動選択)を表示するポップアップバナー。
ダイレクト購入リンクやLP商品自動選択で簡易的に購入に進む導線をつくります。


ダイレクト購入リンクやLP商品自動選択で簡易的に購入に進む導線をつくります。

【サンプルソースコード】
<style type="text/css">
.xbtn_1 {
font-size: 30px;
position: absolute;
top: 10px;
right: 10px;
padding: 10px;
cursor: pointer;
text-decoration: none;
font-weight: bold;
}
.add_pop{
border-radius: 5px;
background:#fff;
padding:8%;
text-align:center;
}
.add_pop_tx {
margin: 10px 0px 0;
}
</style>
<div class= "add_pop">
<span class = "xbtn_1  popup_banner_close" id="">x</span>
<a href="#" data-value-name="【商品ID】" class="auto_select_name popup_banner_close" id="autoset_coupon_code"style="cursor: pointer">
<img src="*******************"></a>
</div>
<script>
$(function(){
  $(".auto_select_name").click(function(){
    var product_id = $(this).attr("data-value-name");
    $("#product_id").val(product_id);
    $('#class_category_select').empty();
    lp_init(product_id, $('#quantity').val(), null);
    lp.adjustScroll(
       '#product_id', <!--{* 基準となる位置のidを指定してください *}-->
       -20,           <!--{* この数値は適宜修正してください *}-->
       true           <!--{* スクロールアニメーションが不要の場合は false にしてください。 *}-->
    );
    return false;
  });
});
</script>
【商品ID】の個所には自動選択する商品IDをご記入ください。
*******************の個所を画像のパスをご記入ください。

この記事の目次

  1. ポップアップバナーについて
  2. 新規登録・編集・設置
  3. ポップアップバナー活用方法

ありがとうございました。
よろしければ、ご意見をお聞かせください。

件名、コメントをご入力いただき、『送信』ボタンをクリックしてください。

ご意見を送られない場合は、『閉じる』ボタンをクリックしてください。

件名:

お問い合わせ内容:

閉じる