【フォーム】2回目の申請をクッキー（アクセス履歴）を使って制限する
オリジナルフォーム（LIFF）による申請後に、2回目のアクセスに対して申請をできないようにします。
ブラウザに申請済みのクッキーを保持し判別するようにします。
サンプルページをダウンロードし、設定を進めて下さい。
下記フォームサンプルページのソースコードと併せてご確認いただくとわかりやすいです。
> フォームサンプルページ
> 送信完了サンプルページ
DL：フォームサンプルページ
※ソースコード確認方法
windows：Ctrl + U
mac ：option + command + U
（1）サンプルファイル内にあるjs.cookie.min.jsをjsファイルに格納
（2）index.htmlのhead部分に下記を追加
サンプルコード（コピー＆ペースト用）
<script src="js/js.cookie.min.js"></script>
<script>
//アクセス制限
$(function() {
const applied = Cookies.get('applied');
if(applied){
$(".wrap").css('display','none');
$(".wrap.applied").show();
}
return false;
});
</script>
（3）index.htmlのbody内に制限時の表示を追加
テキストの内容などは適宜変更下さい。
クッキーがある場合にこちらが表示されます。
サンプルコード（コピー＆ペースト用）
<div class="wrap applied" style="display: none;">
<section class="title">
<h2>エントリー受付</h2>
</section>
<section class="complete">
<p>恐れ入りますが、24時間は再申請できかねます。<br>エントリーにつきましては、24時間経ってから<br>手続きをお願い致します。</p>
<div class="btn">
<a class="blue" onclick="liffclose();">内容を確認したので閉じる</a>
</div>
</section>
</div>
（4）complete.htmlのhead部分に下記を追加
サンプルコード（コピー＆ペースト用）
<script src="js/js.cookie.min.js"></script>
（5）complete.htmlのbody閉じの上部分に下記を追加
使用するクッキーの保持のコメントアウト「//」を解除し、元の58行目はコメントアウトしてください。
サンプルコード（コピー＆ペースト用）
//クッキーセット
Cookies.set('applied', '申請中', {expires: 1/( 24 * 60 * 6)} );//10秒保持
// Cookies.set('applied', '申請中', {expires: 1/( 24 * 60)} );//1分保持
// Cookies.set('applied', '申請中', {expires: 1/ 24} );//1時間保持
// Cookies.set('applied', '申請中', {expires: 1});//1日保持
お客様チェックシート┃短縮URLにアクセスするとエラー表示になる
短縮URLにアクセスした際にエラー表示になるときは下記ご確認ください。
①LINEログインチャネルの設定があっているかどうか。
LINEログインチャネルの設定の確認方法はこちら＞
②対象のBOTの「LINEログイン」と「Messaging API」のチャネルが同じプロバイダーで作成されているか。
同じプロバイダーで作成されているかの確認はこちら＞
全てをチェックいただいても解決できなかった際はサポートまでご連絡くださいませ。
オリジナルフォームのPV(クリック数)を計測する方法
短縮URL機能を使用して、オリジナルフォーム（LIFF）のPV（クリック数）を計測できます。
（１）LIFF呼び出しURLをコピーする
↓
（２）リッチメニューなどオリジナルフォームにリンクする部分で短縮URLを設定する
※今回は解約・休止フォームを例に挙げておりますが、その他のフォームでも設定可能です
↓
（３）短縮URLの作成
①作成と編集のタブを選択
②管理名
③（１）でコピーしたLIFF呼び出しURLを張り付け
④必要がない場合はチェックを外す
※解約・休止フォームの場合は通常ログインしている状態となります。
⑤チェックする
⑥挿入（保存）
※すでに作成済みの場合は作成履歴より挿入して下さい。
↓
（４）短縮URLが挿入されていることを確認し保存
↓
（５）計測結果を見る
分析 ＞ 短縮URL
設定した短縮URLのクリック数（＝PV）を確認できます
↓
（６）オリジナルフォームの離脱率を算出する
申請数 ÷ PV × 100 ＝ 離脱率
対応フォーム、計測期間を合わせて、対応完了した申請数を上記式に当てはめてください。
フォーム立ち上げ時ポップアップ設置方法
下記フォームサンプルページを元に説明します。
フォームサンプルページをブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。
＞フォームサンプルページ
＞フォームサンプルダウンロード
※ソースコード確認方法
対象ページをChromeブラウザで開いて下記操作を行ってください。
windows：Ctrl + U
mac：option + command + U
（１）index.html
①画像の設定
②閉じるボタン
③離脱ボタン
④ポップアップ挙動
〈コピペ用コード〉
<!--フォーム立ち上げ時ポップアップ-->
<div id="modal-content">
<div class="pop">
<!--画像設置-->
<img src="images/bnr_popup2.png" alt="">
<!--ボタン設置-->
<ul>
<li><span id="modal-close">ダイエットをやめる</span></li>
<li><a href="">もう少しだけダイエット<br>を頑張ってみる！！</a></li>
</ul>
</div>
</div>
<script>
$(function () {
$("body").append('<div id="modal-overlay"></div>');
$("#modal-overlay,#modal-content").fadeIn("slow");
//モーダル閉じる
$("#modal-close").unbind().click(function () {
$("#modal-content,#modal-overlay").fadeOut("slow", function () {
$("#modal-overlay").remove();
});
});
});
</script>
<!--フォーム立ち上げ時ポップアップ-->
（２）style.css
738～793行目、
1073～1088行目（@media only screen and (min-width: 640px) ）、
/*=======================================
modal
=======================================*/
#modal-content {
width: 90%;
max-width: 320px;
margin: 0;
padding: 0;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
z-index: 2; }
#modal-overlay {
z-index: 1;
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 120%;
background-color: rgba(0, 0, 0, 0.75); }
.pop {
position: relative; }
.pop ul {
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
height: 50px;
display: flex;
justify-content: center; }
.pop li {
width: 126px;
margin: 0 4px; }
.pop a,
.pop span {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
height: 100%;
box-sizing: border-box;
border-radius: 25px;
font-size: 10px;
line-height: 1.4;
background: #006fe2;
color: #fff;
cursor: pointer; }
.pop span {
background: #fff;
color: #bbb;
border: 1px solid #bbb; }
@media only screen and (min-width: 640px) {
#modal-content {
max-width: 450px; }
.pop ul {
bottom: 20px;
height: 70px; }
.pop li {
width: 190px;
margin: 0 6px; }
.pop a,
.pop span {
border-radius: 35px;
font-size: 15px; }
}
（３）ポップアップバナーの画像をimagesフォルダに格納
お客様チェックシート┃既存の友だち登録時のタグ付与でエラー表示になる
既存の友だち登録時にタグ付与でエラー表示になるときは下記ご確認ください。
①LINEログインチャネルの設定があっているかどうか。
LINEログインチャネルの設定の確認方法はこちら＞
②対象のBOTの「LINEログイン」と「Messaging API」のチャネルが同じプロバイダーで作成されているか。
同じプロバイダーで作成されているかの確認はこちら＞
全てをチェックいただいても解決できなかった際はサポートまでご連絡くださいませ。
オリジナルフォームを開いた時にタグを付与する方法
■目的
オリジナルフォームを開いた時にタグ付与する方法の説明になります。
タグ付与によって、セグメントが切れたり、クリックの計測などが可能になります。
タグはフォームを開くたびに上書きされて付与されます。
■セット所有時間
おおよそ１０分
■セットの流れ
下記サンプルページを元に説明します。
ファイルをダウンロードして内容をご確認ください。
サンプルダウンロード＞
サンプルページ＞
※ソースコード確認方法
サンプルページをChromeブラウザで開いて下記操作を行ってください。
windows：Ctrl + U
mac：option + command + U
(1)下記コードを</body>タグの直上に設置
（サンプルページのindex.html 117～158行目）
<!-- 削除禁止 --><input type="hidden" id="addtag"><!-- 削除禁止 -->
<!-- 削除禁止 -->
<script>
$(window).on('load', function(){
setTimeout(delaySend, 1000);
});
AddTag('タグコード');//タグセット
var delaySend = function () {
AddTagProc();//タグ送信
}
function AddTag(TagCode) {
$("#addtag").val(TagCode);
}
function AddTagProc() {
var uid = $("#useridfield").val();
var fid = $("#fid").val();
var tag = $("#addtag").val();
var botid = $("#bot_id").val();
$.ajax({
type: "POST",
url: "/api/tag/add",
dataType: 'json',
data: {
"uid": uid,
"fid": fid,
"bot_id": botid,
"tag_code": tag
},
success: function (j_data) {},
error: function (XMLHttpRequest, textStatus, errorThrown) {},
complete: function () {}
});
}
function liffclose() {
liff.closeWindow();
}
</script>
<!-- 削除禁止 -->
（２）タグ設定
AddTag('タグコード');のタグコード部分に付与したいタグを設置
タグ作成についてはこちら＞
オリジナルフォームの編集についてはこちら＞
（３）フォームをアップロード
オリジナルフォームをLINEで開いてタグが付与されていれば完成です。
タグはフォームを開くたびに上書きされて付与されます。
注意点として、タグ付与と同時にそのタグ名でECAIに回答が送信されます。
そのため、１回の申請で２回の回答が行われるものとなります。
ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。
