フォームファイル内にあるindex.html（入力ページ）の詳細説明です。 ソースコード内にコメントアウトで説明の記載があります。 下記フォームサンプルページのブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。 ＞フォームサンプルページ ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U ＞フォームサンプルダウンロード外部サイトのサンクスページからリダイレクトしてタグ付与する方法
LIFFの外部サイト機能を使って、LPをLIFFで開くようにします。 サンクスページからオリジナルフォームへリダイレクトさせてタグを付与します。
【導線例】（※LIFF内） ①【外部サイト】お客様LP ↓ ②【外部サイト】確認ページ ↓ ③【外部サイト】サンクスページ ↓ リダイレクト ↓ ④【オリジナルフォーム】タグ付与 （※必要に応じてサンクスページの表示作成）
※スマホのみの施策となります。 PCで①外部サイトURLのLPにアクセスした際は④でタグ付与はできません。 またスマホでもLIFF以外から購入した場合は同様にタグ付与できません。
（1）①LPのURLをLIFFの外部サイトに設定 LIFFの外部サイト設定方法はこちら＞ ↓ （2）③サンクスページにjavascriptでオリジナルフォームへリダイレクト設定 href内のLIFF呼び出しURLを変更する。
<script>
location.href="line://app/1656436409-●●●●●";
</script>↓ （3）④オリジナルフォームにタグ付与の記述をコピペで追加 アクセス時にタグ付与、送信が行われます。 タグコード部分に付与したいタグコードをセットしてください。
<!-- 削除禁止 -->
<form id="form-name" method="POST" action="###cancellationurl###">
<!-- 削除禁止 --><input type="hidden" id="useridfield" name="luid"><!-- 削除禁止 -->
<!-- 削除禁止 --><input type="hidden" id="fid" name="fid" value="###fid###"><!-- 削除禁止 -->
<!-- 削除禁止 --><input type="hidden" id="liffid" name="liffid" value="###liffid###"><!-- 削除禁止 -->
<!-- 削除禁止 --><input type="hidden" id="bot_id" name="bot_id" value="###botid###"><!-- 削除禁止 -->
</form>
<!-- 削除禁止 -->
<!-- 削除禁止 --><input type="hidden" id="addtag"><!-- 削除禁止 -->
<!-- 削除禁止 -->
<script charset="utf-8" src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
<script src="liff-starter.js"></script>
<script>
window.onload = function (e) {
liff.init({
liffId: "###liffid###"
}).then(() => {
liff.getProfile().then(function (profile) {
document.getElementById('useridfield').value = profile.userId;
}).catch(function (error) {});
})
.catch((err) => {});
};
</script>
<!-- 削除禁止 -->
<!-- 削除禁止 -->
<script>
//タグ付与
AddTag('タグコード');
var alertmsg = function(){
AddTagProc();
//alert("3秒経過、タグ付与");
}
setTimeout(alertmsg, 3000);
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>
<!-- 削除禁止 -->▼検証済みカート （最終検証日：2022/8/19） ・shopify ※サンクスページのリダイレクト処理はカートに依存しているため カート側の仕様変更で使えなくなることがあります。 ※サンプルフォーム（アラートは実装時に外してください。） プレビュー＞ ダウンロード＞オリジナルフォームで、送信ボタンを押したらタグを削除する方法
送信ボタンを押したときにタグを削除するには、対象のオリジナルフォームのHTMLファイル内に削除するタグを指定する必要があります。 HTMLファイルのダウンロード方法につきましては下記をご参照ください。 ＞既存のオリジナルフォーム（LIFF）のダウンロード方法 （1）ダウンロードが終わりましたら、ファイルを解凍。 ↓ （2）index.htmlをご使用のテキストエディターで開きまして、 「id="del_tags"」の「value」に削除したいタグコードを記述してください。 記述後ファイルの上書き（保存）を忘れずにしてください。
<!-- 削除禁止 --><input type="hidden" id="del_tags" name="del_tags" value="タグコード"><!-- 削除禁止 -->上記の行がない場合はformの直下に設置してください。
↓ （3）記述が終わりましたら、「オリジナルフォーム（LIFF）のアップロード方法」の手順に沿ってファイルをアップロードする。 設定したタグの動作確認方法は下記をご参照ください。 ＞送信時タグ付与の動作確認方法
下記フォームサンプルページのソースコードと併せてご確認いただくとわかりやすいです。 フォームサンプル：https://help.ecai.jp/form/demo01/ DL：https://help.ecai.jp/form/demo01.zip ※ソースコード確認方法 windows：Ctrl + U mac ：option + command + U【フォーム】ラジオボタンの作り方
■見本
下記フォームサンプルページを元に説明します。 フォームサンプルページのソースコードをブラウザ上でご確認いただくか、ファイルをダウンロードして内容をご確認ください。 ＞フォームサンプルページ ＞フォームサンプルダウンロード ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U
(パターン１) 2カラム・ラジオボタン
■見本
フォームサンプルページの質問４が「2カラム・ラジオボタン」タイプになりますので、こちらをサンプルコードよりコピペしてご使用ください。
①の<section></section>部分をコピペする ②classは「q」を指定で初期非表示、その他必要に応じてclassを設定（サンプルでは「gender」としてます。） ③送信用タイトル、type属性は「hidden」設定、name属性は前の質問から連番になるように指定、value属性は管理画面に出力されるタイトル ④質問ナンバーを指定 ⑤質問テキストを指定 ⑥選択支を増やすときは<li></li>までをコピペで増やす ⑦選択支内容を指定、type属性は「radio」設定、name属性は前の質問から連番になるように指定、value属性は送信内容を指定 ※ data-prompt-position="topLeft"はバリデーションの表示位置を指定 ⑧選択支の表示テキストを指定 ⑨class「col2」で2カラムを指定（※name属性のcolとは別物です）
(パターン2) 3カラム・ラジオボタン
■見本
フォームサンプルページの質問2が「3カラム・ラジオボタン」タイプになりますので、こちらをサンプルコードよりコピペしてご使用ください。
①の<section></section>部分をコピペする ②classは「q」を指定で初期非表示、その他必要に応じてclassを設定（サンプルでは「app_type」としてます。） ③送信用タイトル、type属性は「hidden」設定、name属性は前の質問から連番になるように指定、value属性は管理画面に出力されるタイトル ④質問ナンバーを指定 ⑤質問テキストを指定 ⑥class「col3」で3カラムを指定（※name属性のcolとは別物です） ⑦選択支を増やすときは<li></li>までをコピペで増やす ⑧選択支内容を指定、type属性は「radio」設定、name属性は前の質問から連番になるように指定、value属性は送信内容を指定 ※ data-prompt-position="topLeft"はバリデーションの表示位置を指定 ⑨選択支の表示テキストを指定
(パターン3) 2カラム・ラジオボタン画像タイプ
■見本
フォームサンプルページの質問1が「2カラム・ラジオボタン画像タイプ」になりますので、こちらをサンプルコードよりコピペしてご使用ください。
①の<section></section>部分をコピペする ②classは「q」を指定で初期非表示、その他必要に応じてclassを設定（サンプルでは「item」としてます。） ③送信用タイトル、type属性は「hidden」設定、name属性は前の質問から連番になるように指定、value属性は管理画面に出力されるタイトル ④質問ナンバーを指定 ⑤質問テキストを指定 ⑥class「col2」で2カラムを指定（※name属性のcolとは別物です） ⑦選択支を増やすときは<li></li>までをコピペで増やす ⑧選択支内容を指定、type属性は「radio」設定、name属性は前の質問から連番になるように指定、value属性は送信内容を指定 ※ data-prompt-position="topLeft"はバリデーションの表示位置を指定 ⑨選択肢の画像を指定 ⑩選択支の表示テキストを指定【オリジナルフォーム】表示・非表示の出し分け設定
下記フォームサンプルページを元に説明します。 フォームサンプルページをブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。 フォームサンプルページ＞ フォームサンプルダウンロード＞ ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U
【使用ファイル】 (A) index.html (B) css/style.css
(パターン１)設問の選択で、次の設問を表示する
(B) css/style.css 初期表示で非表示にしたい設問はcssで非表示にしておく 初期表示したい設問は表示にしておく
(A) index.html changeイベントを使用して、選択時に次の設問を表示させる
(パターン２)設問の選択内容によって、表示を出し分ける
(A) index.html changeイベントとif文を使用して、選択ごとに次の設問を出し分ける
下記フォームサンプルページを元に説明します。 フォームサンプルページをブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。 ＞フォームサンプルページ ＞フォームサンプルダウンロード ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U
【編集ファイル】 index.html ①質問1が全部入力されると質問2が表示される
②htmlコード
③JS処理部分（質問1が全部入力されると質問2が表示される）
↓
②受信BOX
↓
↓
④CSVダウンロードしたいデータにチェック
↓
⑤CSVエクスポート
↓
↓
⑦ジョブリスト
↓
⑧CSVをダウンロード
※CSVファイルを開く際のパスワードはECAIログインパスワードと同じ
※CSVダウンロードのボタンが出るまで3分ほどかかる場合があります。ボタンが出ない場合はページをリロードしてください。
▼タグを付けることができるアクション一覧
・会員リスト（※1） ・タグの自動設定（※2） ・一斉配信メッセージ（※3） ・応答メッセージ（※3） ・ステップメッセージ（※3） ・リマインドメッセージ（※3） ・ポストバック（※4） ┗カルーセル ┗画像カルーセル ┗ボタン ┗選択ボタン ┗クイックリプライ ┗リッチメニュー ・1:1トーク（※5） ・広告リスト（※6） ・LIFF（オリジナルフォーム）（※7）
各アクションのタグ操作箇所は下記画像をご確認ください。
▼会員リスト（※1）
▼タグの自動設定（※2）
▼一斉配信メッセージ・応答メッセージ・ステップメッセージ・リマインドメッセージ（※3）
▼ポストバック（カルーセル・画像カルーセル・ボタン・選択ボタン・クイックリプライ・リッチメニュー）（※4）
▼1:1トーク（※5）
▼広告リスト（※6）
▼LIFF（オリジナルフォーム）（※7）
オリジナルフォームで、送信ボタンを押したらタグを付与する方法はこちら＞
オリジナルフォームはHTMLを自由にデザインが可能なため、規定のサイズ、形式などはございません。 ただし画像データが非常に重かったり、サイズが大きすぎたりしますとユーザビリティーを損ないます。 推奨のサイズは以下になりますので、参考にしてください。 ■引き止めバナー、継続促進バナー ・形式：jpg.png ①正方形バナー（1：1） ・サイズ横×縦：1040×1040px ※バナー下にボタンを設置する場合におすすめ ②縦型バナー ・サイズ横×縦：1040×1800px ※スマートフォン１画面のおおよそ収まるサイズ ③縦型バナー大 ・サイズ横×縦：1040×2800px ※スマートフォン画面の約1.5スクロールのサイズ https://gyazo.com/cbe746c9b921c5cb5278af4fefcbc5d5 ■ポップアップバナー（モーダルバナー） ・形式：jpg.png,gif ①正方形バナー（1：1） ・サイズ横×縦：600×600px ②縦型バナー（2：3） ・サイズ横×縦：600×900px【フォーム】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日保持HTML5のiframeという機能を使います。 サンプルページをダウンロードし、ソースコードをご確認下さい。 サンプルページ＞ ダウンロード＞ ※ソースコード確認方法 windows：Ctrl + U mac ：option + command + U 実装にはオリジナルフォームの編集が必要になります。 編集方法につきましては下記ガイドをご確認下さい。 オリジナルフォームの編集方法はこちら＞ （1）対象のフォームのindex.htmlの挿入箇所に下記を記述 ※別ページのURLは変更する
<div class="iframe-wrapper">
<iframe src="別ページのURL" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>（2）下記スタイルを追加 padding-bottomの値は、別ページのコンテンツの高さに合わせてご変更下さい。
<style>
.iframe-wrapper {
position: relative;
padding-bottom: 94.25%;
height: 0;
overflow: hidden;
}
.iframe-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>■見本
下記サンプルページを元に説明します。 サンプルページのソースコードをブラウザ上でご確認いただくか、ファイルをダウンロードして内容をご確認ください。 サンプルページ＞ サンプルページダウンロード＞
※ソースコード確認方法 サンプルページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U
■仕様 ・質問２の解約を選択すると、ポップアップバナーが表示されます。 ・ポップアップバナーで解約が阻止された場合は指定のタグが付与されます。 ・<!-- 削除禁止 -->部分はデータの送信に必要なので削除しないでください。 ■編集ファイル：index.html (1)ポップアップを発動させたい回答に「onClick="showModal();"」を設定
(2)ポップアップバナーの表示部分のHTMLを設定 ①ポップアップバナー画像、ボタン画像設置 ②完了バナー画像、閉じるボタン設置
(3) (1)で呼び出す「showModal()」、完了バナー(サンクスバナー)の挙動設定 フォーム離脱時にタグを付与する場合は、AddTagにタグコードを貼り付けてください。
（4）バナー部分のスタイルの設定
（1）コンテンツ ＞ LIFF
↓ （2）対象フォームの「LIFF呼び出しURL」をコピーする
↓ （3）1：1トークより友達登録している管理用アカウントや自分のアカウントを選択 テキストメッセージに「LIFF呼び出しURL」をペーストして送信
↓ （4） ここからは実機でのLINE操作となります。 友達登録しているスマホより送られたメッセージ確認 「LIFF呼び出しURL」を開く
↓ （5）表示されたオリジナルフォームに内容を入力しエントリー（送信）する
↓ （6）送信結果は管理画面に戻り「受信BOX」よりご確認ください。 受信BOXの確認方法につきましてはこちらをご確認ください【フォーム】画像の追加方法
下記フォームサンプルページを元に説明します。 フォームサンプルページをブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。 ＞フォームサンプルページ ＞フォームサンプルダウンロード ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U
【編集ファイル】
index.html
①画像の挿入箇所に<figure></figure>で囲われている部分をコピー＆ペーストしてください。
②画像のパスを設定
※画像のパス（画像名）は文字化け防止のため、半角英数字にしてください。
③画像名を記入（表示はされません、設定なしでも可、altは日本語可）
サンプルコード（コピー＆ペースト用）
<figure>
<div><img src="images/bnr3.png" alt="追加画像"></div>
</figure>下記フォームサンプルページを元に説明します。 フォームサンプルページをブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。 ＞フォームサンプルページ ＞フォームサンプルダウンロード ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U
【仕様】 質問３を選択時に下記ポップアップバナーが表示されます。 「外部サイトへリンク」ボタンを押すと遷移する前に指定のタグを付与します。
【仕様詳細】 使用ファイル：index.html （1）ポップアップバナーの設置 ①表示バナーの１つ目を設置 ②表示バナーの２つ目を設置、更に増やす場合は複製して同列に追加する。 ③バナー表示画像設定 ④閉じるボタン設定 ⑤外部サイトへリンクボタン設定 ⑥外部サイトへ離脱しない場合は変わりに完了バナーを使用する（今回は使用しない）
↓ （2）ポップアップバナーを表示させるイベントを設定 ①質問１と質問３の取得に必要な変数をセットする ②質問３（申請種別）の選択内容を取得 ③質問１（商品）の選択内容を取得 ④全バナーを非表示 ⑤条件分岐：解約かつ商品１を選択している ⑥２回表示できないように、初回表示にチェックを入れる ⑦指定のタグコードをセットする ⑧バナー１を表示させる ⑨モーダルウインドウを表示させる ⑩条件分岐：解約かつ商品２を選択している ⑪ ⑩の条件の場合に指定のタグコードをセットする ⑫ ⑩の条件の場合にバナー２を表示させる
↓ （3）バナークリック時の挙動設定 ①バナー１の「外部サイトへリンク」をクリックした時 ②バナーを非表示にする ③モーダルウインドウを閉じるボタンを無効にする ④ECAIにタグを送信する ⑤タグ送信後のしダイレクト先を設定 ⑥バナー２の挙動設定 ⑦「閉じる」ボタンを押下でモーダルウインドウ（ポップアップバナー）を閉じる
↓ （4）質問3選択時にshowModal();のクリックイベントを呼び出す設定をする
上記のように質問内容のテキストより少し小さいフォントサイズでマイクロコピーを入れたい場合は、 下記コードをコピーして、挿入箇所へペーストしてください。 改行したい場合は<li>～</li>を増やします。
<ul class="note">
<li>※こちらに表示したいテキストを記入してください。</li>
<li>※こちらに表示したいテキストを記入してください。</li>
</ul>※ class="note"でスタイルの調整を行っております。1：1トーク画面に表示されるLIFFの最大数
1：1トークの右サイドメニューにあるLIFFは最大5件までの表示になっております。
それ以上の表示は、右サイドメニュ【詳細】をクリックして個人詳細ページでご確認ください。
タグコードとは、作成したタグに紐づくコードになります。 オリジナルフォーム内ではこちらを指定して使用してください。 「 会員 ＞ タグリスト 」 で確認ができます。
■目的 オリジナルフォーム送信後に完了ページを表示させずトーク画面に戻る方法です。 ■セット所有時間 5分 下記フォームサンプルページを元に説明します。 サンプルページをブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。 フォームサンプルページ＞ フォームサンプルダウンロード＞ ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U ■セットの流れ サンプルページを例に説明をしていきます。 編集ファイル：complete.html フォーム送信後に表示される完了ページ(complete.html)に、自動でLIFFを閉じる動作を入れます。 実際の閉じる動作はLINEのLIFF内でしか動作しないのでご注意ください。 （1）body閉じの上に下記２つのコードを追加
<!-- 削除禁止 -->
<script>
liffclose();
</script>
<!-- 削除禁止 -->※下記2つ目のコードは、フォーム内に既に記載がある場合は記載しなくてOKです
<!-- 削除禁止 -->
<script charset="utf-8" src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
<script src="liff-starter.js"></script>
<script>
window.onload = function (e) {
liff.init({ liffId: "###liffid###" }).then(() => {
liff.getProfile().then(function (profile) {
document.getElementById('useridfield').value = profile.userId;
//alert(profile.userId);
}).catch(function (error) {
//window.alert('Error getting profile: ' + error);
});
})
.catch((err) => {
});
};
</script>
<script>
function liffclose() {
liff.closeWindow();
}
</script>
<!-- 削除禁止 -->（2）完了ページのコンテンツ部分は、コメントアウトか削除して非表示にする
ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。フォーム内質問と設定col(name属性)の確認方法
（1）コンテンツ ＞ LIFF
↓
（2）対象フォーム の 「フォーム修正」選択
↓
（3）すべてを開く
↓
（4）フォーム内質問とそちらに紐づいている設定col(name属性)の確認を行えます。 ※二重に定義されていると、後に定義されているcolで上書きされ、一部受信が出来なくなります
【フォームの種類について】 オリジナルフォーム（LIFF）は大きく下記の2種類に分けられます。 ①解約・休止・サイクル変更フォーム ②その他のフォーム（本人確認フォーム含む） ①解約・休止・サイクル変更フォームで取得した情報はASSダッシュボード、受信BOXに反映されます。 ②その他のフォームで取得した情報は受信BOXに反映されます。また本人確認フォームとして設定しますと、取得した情報を会員リストの顧客情報として反映することができます。 【設定方法について】 LIFFの設定画面でフォーム種類を選択し、保存してください。
【注意事項】 オリジナルフォームの編集画面で、現在アップロードされているフォームの種類が確認できます。 こちらのフォーム種類とLIFFの設定フォームは同じにしてください。 異なりますとオリジナルフォームから正常にデータを取得できません。
アップロードされているフォームの設定方法につきましては。各フォームの詳細設定ガイドをご参照ください。 ⇒解約・休止・サイクル変更フォーム内のcol(name属性)の記載ルール ⇒本人確認フォーム内のcol(name属性)の記載ルールオリジナルフォームのPV数、ユニークユーザー数を計測する方法
外部ツールのGoogleアナリティクスを使用することで計測ができます。 アナリティクスの機能は多機能にわたるため、ツールについての細かい使用方法につきましては割愛させていただきます。 知りたい情報はインターネットから取得してご対応下さい。 (1)Googleアカウントの作成 アカウント作成はこちら＞ ↓ (2)アナリティクスにログイン ログインはこちら＞ ↓ (3)アナリティクスでサイト設定をする サイト設定はこちら＞ ↓ (4)サイト設定後、計測用のトラッキングタグをコピペしてください。 ①対象のアカウント選択 ②管理 ③データストリーム ④(3)で設定したWEBサイトを選択 ⑤トラッキングタグをコピペする
↓ (5)コピペしたコードを、オリジナルフォーム（LIFF）の「index.html」,「complete.html」のhead内に設置してください。 オリジナルフォームを編集するには下記ガイドを参照下さい。 既存のオリジナルフォーム（LIFF）のダウンロード方法 オリジナルフォーム（LIFF）のアップロード方法 ↓ (6)設置後、ユーザーのアクセスが行われますとアナリティクスの管理画面に計測内容が表示されます。 PV数、ユニークユーザー数が計測できますので、マーケティングにご活用ください。
設置の設定代行(有償)も行っております。 ご希望の方は下記フォームからお問い合わせください。 Googleアナリティクス設定代行に関するお問い合わせはこちら＞【解約・休止・サイクル変更・スキップ】申請フォームのHTMLファイル内容説明
フォームファイル内にあるindex.html（入力ページ）の詳細説明です。 ソースコード内にコメントアウトで説明の記載があります。 下記フォームサンプルページのブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。 ＞フォームサンプルページ ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U ＞フォームサンプルダウンロードBOT差し替え時に行うこと
BOT差し替えをした際に、引き継げない設定があります。
引き継げない設定はBOT差し替え後に、下記手順に沿って再設定してください。
▼引き継げない設定
【1】会員リスト 【2】個別予約メッセージ 【3】リッチメニュー 【4】タグ追従設定 【5】LIFF 【6】RPA設定
【1】会員リストの再設定（削除）
①会員＞会員リスト
↓
②全会員選択
↓
➂削除
【2】個別予約メッセージの再設定（削除）
④メッセージ＞個別予約メッセージ
↓
⑤削除
【3】リッチメニューの再設定（保存し直し）
⑥コンテンツ＞リッチメニュー
↓
⑦編集
↓
⑧何も変更せずに「保存する」
全リッチメニューに対し行う
【4】タグ追従設定の再設定（保存し直し）
⑨コンテンツ＞タグ追従設定
↓
⑩編集
↓
⑪何も変更せずに「保存する」
全リッチメニューに対し行う
【5】LIFFの再設定（新規作成）
⑫コンテンツ＞LIFF
↓
⑬再設定したいLIFFを「編集」
↓
⑭ダウンロード
↓
⑮LIFFを作成
┗設定手順はこちら＞
※設定手順「（2）」からを行い「⑭」でダウンロードしたファイルを選択する
【6】RPA設定（再設定）
⑯3BO>RPA設定
↓
⑰「⑮」で作成したLIFF（オリジナルフォーム）を選択
↓
⑱追加する
┗自動解約処理の設定方法はこちら＞
┗自動休止・スキップ処理の設定方法はこちら＞
RPA設定はフォームごとに設定が必要なため、「⑮」で作成したフォームに設定する必要があります。
■目的
ウェブページをLINE上に表示したいときはLIFFの外部サイトを使用します。
LIFFとは？
■セット所要時間
3分
■セットの流れ
① 左サイドメニュー＞コンテンツ＞②作成
↓
③ LIFF管理名を入れる。お客様には表示されません。社内管理用です。
↓
④ 画面サイズを設定 LINE内で何パーセントで見せるかです。視認性が良いのはFull（全画面）になるのでECAIでは全画面を推奨しています。作成後に後から編集可能です。
↓
⑤ 外部サイトにチェックを入れて表示させたいURLを挿入
↓
⑥ 保存を押して完了
LINE Front-end Framework（LIFF）とは
「LIFFとは何か」をひとことで表すと「ウェブページをLINE上に表示できる仕組み」です。ユーザー体験として外部リンクでもLINE内で表示されるので心地よく外部サイトを表示させることが可能になります。
LIFFの設定方法
① 左サイドメニュー＞コンテンツ＞②作成
↓
③ LIFF管理名を入れる。お客様には表示されません。社内管理用です。
↓
④ 画面サイズを設定 LINE内で何パーセントで見せるかです。視認性が良いのはFull（全画面）になるのでECAIでは全画面を推奨しています。作成後に後から編集可能です。
↓
⑤ 外部サイトにチェックを入れて表示させたいURLを挿入
↓
⑥ 保存を押して完了
■見本
下記フォームサンプルページを元に説明します。 フォームサンプルページのソースコードをブラウザ上でご確認いただくか、ファイルをダウンロードして内容をご確認ください。 ＞フォームサンプルページ ＞フォームサンプルダウンロード ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U
フォームサンプルページの質問６が「2カラム・チェックボックスタイプ」になりますので、こちらをサンプルコードよりコピペしてご使用ください。
①の<section></section>部分をコピペする
②classは「q」を指定で初期非表示、その他必要に応じてclassを設定（サンプルでは「trigger」としてます。）
③送信用タイトル、type属性は「hidden」設定、name属性は前の質問から連番になるように指定、value属性は管理画面に出力されるタイトル
④質問ナンバーを指定
⑤質問テキストを指定
⑥class「col2」で2カラムを指定（※name属性のcolとは別物です）
⑦選択支を増やすときは<li></li>までをコピペで追加して増やす
⑧選択支内容を指定、type属性は「checkbox」設定、value属性は送信内容を指定
※name属性は前の質問から連番になるようにし、複数回答を取得できるように[]指定
※ data-prompt-position="topLeft"はバリデーションの表示位置を指定
⑨選択支の表示テキストを指定
【フォーム】継続促進バナーの設置方法
質問の途中で、上記のような継続を促すバナーを表示させる方法についてのガイドです。 継続を促すタイミングにつきましては任意となりますが、サンプル例では解約理由の選択時にバナーが表示される仕様になります。 下記のサンプルページをご確認ください。 （※バナー表示条件：質問3 効果を実感できなかった or 価格が高い or 商品が余っている 選択） 下記フォームサンプルページを元に説明します。 ブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。 ＞フォームサンプルページ ＞フォームサンプルダウンロード(11) ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U 1.バナー作成 ↓ 2.バナーの挿入部分に質問とバナーを設置【ファイル：index.html】 ①画像追加 ②③④申請種別に関する質問はname属性col_1に格納 ⇒ 参照）申請種別の質問をフォーム内に2回以上使用する場合
↓ 3.休止期間の設定 ①②③休止期間に関する質問はname属性col_2に格納【ファイル：index.html】 ⇒ 参照）申請種別の質問をフォーム内に2回以上使用する場合
↓ 4.申請種別(col_1)，休止期間(col_2)の送信設定【ファイル：index.html】
↓ 5. 2，3の呼び出し設定【ファイル：index.html】
↓ 6.質問3の解約理由によって出し分け【ファイル：display.js】 解約理由が「効果を実感できなかった」「価格が高い」「商品が余っている」の時にバナーを表示 ※バナーを複数設定する場合はこちらで条件分岐を追加
↓ 7.継続促進バナーの質問3-1の解約理由によって出し分け【ファイル：display.js】 ①以降の質問を非表示 ②休止選択時処理 ③スキップ選択時処理 ④解約選択時処理 ⑤ ②で休止選択時に休止期間選択時処理
↓ 8.name属性が変更になった場合は、重複しないように調整する（連続番号にする） ⇒解約・休止・サイクル変更フォーム内のcol(name属性)の記載ルールオリジナルフォーム（LIFF）の最大数
オリジナルフォーム（LIFF）の発行最大数は1LINEログインチャネルで30件までとなります。
30件を超えた場合はLIFFの登録ができなくなります。（使用しなくなったLIFFを削除することで追加できるようになります）
■目的 各質問ごとにタグを付与する方法の説明です。 タグ付与したい質問が複数あるときに有効です。 タグ付与したい質問が1つのみの場合はこちら＞ ■セット所要時間 45分 ■サンプルコード フォームサンプルページ＞ フォームサンプルページダウンロード＞ ※ソースコード確認方法 windows：Ctrl + U mac ：option + command + U ■セットの流れ サンプルの例はチェックボックスとラジオボタンの２つの場合です。 3つ以上の設定も可能です。 各質問の回答時にタグを設定し、フォーム送信時にそれぞれのタグをまとめて付与します。 タグコードに本番用のタグコードをご設定ください。 送信時にデフォルトのタグを設定する場合は、240行目の[]にタグコードを記載してください。 例）['abababab']
<script>
$(function () {
//ラジオボタン選択
var periodTags
$('.period input').on('change', function () {
periodTags = [];//空の配列
var val = $(this).val();
if(val == '１ヶ月'){
periodTags.push('タグコード1');
}
else if(val == '2ヶ月'){
periodTags.push('タグコード2');
}
else if(val == '3ヶ月'){
periodTags.push('タグコード3');
}
else if(val == 'それ以上'){
periodTags.push('タグコード4');
}
});
//チェックボックス選択
var triggerTags
$('.trigger input').on('change', function () {
triggerTags = [];//空の配列
$('.trigger input:checkbox:checked').each(function() {
var val = $(this).val();
if(val == '自分にピッタリな商品だと思ったから'){
triggerTags.push('タグコード5');
}
else if(val == '有名人・雑誌・TVなどの影響を受けたから'){
triggerTags.push('タグコード6');
}
else if(val == '友人知人の紹介だから'){
triggerTags.push('タグコード7');
}
else if(val == '試してみたかったから'){
triggerTags.push('タグコード8');
}
});
//ボタン表示
if ($('.btn.entry').css('display') == 'none') {
$('.btn.entry').show();
scrollNext('#scrollAnchor');
}
});
//送信時にまとめてタグ付与
$('.btn-submit').on('click', function () {
if ($("#form-name").validationEngine('validate')) {
//連打防止ローディング
$('.btn').hide();
$('.loading').show();
var tags = [];//空の配列
var tags = tags.concat(periodTags,triggerTags);//タグをまとめる
//申請時タグに配列のtags追加
document.getElementById("add_tags").value = tags;
//return false;//コメントアウト外すと送信されません
}
});
});
</script>ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。