下記フォームサンプルページのソースコードと併せてご確認ください。
フォームサンプルページ
https://help.ecai.jp/form/demo01/
※ソースコード確認方法
windows：Ctrl + U
mac：option + command + U
1-1 必須コードにおいて、「###cancellationurl###」を指定した場合に限りこのルールが有効となります。
1-2 各質問のname属性に起きまして、タイトル（送信内容のタイトル）と回答は必ずセットで設定する必要があります。
1-3 タイトルは必ずtype=”hidden”で設定する必要があります。
※タイトルの動的生成の禁止
ECAIではフォームの申請を受信した際に一つ前に申請された際の質問項目と照合を行い、変更の可否によってバージョン管理を行っております。
その為、バージョンを意図して変更しないように禁止とさせて頂いております。
1-4 checkbox及びradioタイプの回答において「value」属性は選択に利用している表示文字列を指定してください。指定文字列が回答結果としてそのまま取り込まれます。
（表示例）
1-5 質問項目は解約・休止・サイクル変更の申請種別ごとに最大45問となります。それ以上の質問項目は受け付けられません。
1-6 col_1_title ～ col_5_title及びcol_1 ～ col_5は下記の指定通りの設定をしてください。指定数字を変更すると正しく受け付けられなくなります。
1-7 共通項目：col_1_title ～ col_5_title及びcol_1 ～ col_5
※「name」属性の指定が正しければ、フォーム内の表示順は順不同で問題ありません
col_1_title：申請の種別に関する回答を指定します。
「value」属性に「解約」「サイクル変更」「休止」「スキップ」のいずれかを指定してください。
それ以外は完了ページで受付致しません。
col_2_title：休止期間に関する回答を指定します。
「value」属性に「10日」「20日」「30日」等の文字列を指定してください。
文字列は期間に相当する文字を入れ、指定の文言である必要はありません。
col_3_title：サイクル変更期間に関する回答を指定します。
「value」属性に「60日」「90日」「180日」等の文字列を入れてください。
文字列は期間に相当する文字を入れ、指定の文言である必要はありません。
※サイクル変更期間に関してはサンプルページに設定はございません。
col_4_title：選択する商品に関する回答を指定します。
「value」属性に商品名の文字列を指定してください。
col_5_title：顧客満足度に関する回答を指定します。
「value」属性は数字で設定してください。
1-8 col_6以降の数字については下記の通り、申請種別ごとに回答が設定可能となります。
〈申請種別〉
解約申請用：cancell_col_6 ～ cancell_col_50
サイクル変更用：cycle_col_6 ～ cycle_col_50
休止申請用：pause_col_6 ～ pause_col_50
※申請種別ごとに回答が取り込まれます。
※cancell_col_1～cancell_col_5、cycle_col_1～cycle_col_5、pause_col_1～pause_col_5は利用出来ません。
※設定できるのは最大でcol_50までとなります。
※二重に定義されていると、後に定義されているcolで上書きされ、一部受信が出来なくなります。
※管理画面の表示は番号の若い順に表示されます。詳細のルールはこちら＞
（記述例）
※「name」属性の数字（cancell_col_6など）は質問の並び順に合わせてください。
数字の順番に取り込まれる回答が取り込まれます。
1-9 申請種別にかかわらず、共通項目として回答を取得したい場合は、name属性に「cancell_」「cycle_」「pause_」を指定せず設定してください。 この場合の回答は、すべて受信BOXに送信されます。 例）col_6_title col_6 ※col_1_title ～ col_5_title 及び col_1 ～ col_5 は固定で使用しているため利用できません。 ※設定できるのは最大でcol_50までとなります。 ※管理画面の表示は番号の若い順に表示されます。詳細のルールはこちら＞
【注意点】 本人確認フォームと併用はできません。 理由としてはフォームの種別が異なるためです。 本人確認フォームを使用する場合は、フォームを2つに分けて運用をお願いします。 なお本人確認の内容にかかわらない情報取得の場合は、併用可となります。 本人確認フォームについてはこちら＞【フォーム】電話番号の入力時に「-」(ハイフン)を入れないようにする
本人確認フォームなどで電話番号を取得するときに、「-」(ハイフン)を入れないように制限をかけることができます。 既存のオリジナルフォームを変更しご対応下さい。 index.htmlの電話番号部分のclassを下記記述に変更して下さい。 ※半角数字のみの入力制限 ※10,11桁の入力制限
class="validate[required,custom[number],minSize[10],maxSize[11]]"
対象フォームのダウンロード、アップロードにつきましては下記ガイドを参照ください。 ⇒既存のオリジナルフォーム（LIFF）のダウンロード方法 ⇒オリジナルフォーム（LIFF）のアップロード方法オリジナルフォームで画像をアップロードする方法
■目的 オリジナルフォームで画像を取得したい場合に使用します。 取得した画像は、受信BOX、1：1トーク内で確認ができます。 ※画像を選択する際は、ファイルから選択するか、カメラ起動かで選ぶことができます。 ■セット所要時間 10分 ■サンプルコード フォームサンプルページ＞ フォームサンプルページダウンロード＞ ※ソースコード確認方法 windows：Ctrl + U mac ：option + command + U ■セットの流れ オリジナルフォームの編集方法につきましてはこちら＞ （1）<form>タグに「enctype="multipart/form-data"」を指定する 例）
<form id="form-check" novalidate method="POST" action="###formurl###" enctype="multipart/form-data">（2）画像添付用のフォームを作成 name属性は記載ルールに従ってご変更ください。 例）
<input type="hidden" name="col_8_title" value="添付画像">
<dt>添付画像<span>*</span></dt>
<dd>
<label>
<input type="file" name="col_8">
<span>ファイルを選択して下さい</span>
</label>
</dd>（3）デザインの調整 サンプルページのスタイルに合わせる場合にご使用ください。 ▼スタイル調整
.check input[type="file"]{
display: none;
}
.check input[type="file"] + span {
display: block;
width: 100%;
padding: 8px;
font-size: 5vw;
box-sizing: border-box;
border: 1px solid #d8d8d8;
border-radius: 3px;
background: #fff;
line-height: 1.4;
}▼ファイル添付時の表示切替
<script>
//添付画像のUI調整
$('input[type="file"]').on('change', function () {
var file = $(this).prop('files')[0];
$(this).next().text(file.name);
});
</script>（4）フォーム送信後、取得した画像を「受信BOX」、「1：1トーク」内のLIFFで確認 ▼受信BOX
▼1：1トーク内のLIFF
※画像のみ投稿可能となり、画像以外の場合は受け付けない為、空となります。 ※画像のサイズは10MBが上限となります。それ以上の場合は受け付けない為、空となります。
ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。【フォーム】送信時タグ付与の動作確認方法
（1）コンテンツ ＞ LIFF
↓ （2）対象フォームの「LIFF呼び出しURL」をコピーする
↓ （3）1：1トークより友達登録している自分のアカウントを選択 テキストメッセージに「LIFF呼び出しURL」をペーストして送信
↓ （4） ここからは実機での動作確認となります。 友達登録しているスマホより送られたメッセージ確認 「LIFF呼び出しURL」を開く
↓ （5）表示されたオリジナルフォームに内容を入力しエントリー（送信）する
↓ （6）管理画面に戻り、会員 ＞ 会員リスト を表示
↓ （7）対象会員 ＞ 詳細
↓ （8）想定通りのタグが付与されているか確認
タグの編集方法につきましては下記を参照ください。 タグの編集方法外部サイトのサンクスページからリダイレクトしてタグ付与する方法
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 ※サンクスページのリダイレクト処理はカートに依存しているため カート側の仕様変更で使えなくなることがあります。 ※サンプルフォーム（アラートは実装時に外してください。） プレビュー＞ ダウンロード＞【フォーム】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日保持
↓
②受信BOX
↓
↓
④CSVダウンロードしたいデータにチェック
↓
⑤CSVエクスポート
↓
↓
⑦ジョブリスト
↓
⑧CSVをダウンロード
※CSVファイルを開く際のパスワードはECAIログインパスワードと同じ
※CSVダウンロードのボタンが出るまで3分ほどかかる場合があります。ボタンが出ない場合はページをリロードしてください。
■見本
下記サンプルページを元に説明します。 サンプルページのソースコードをブラウザ上でご確認いただくか、ファイルをダウンロードして内容をご確認ください。 サンプルページ＞ サンプルページダウンロード＞
※ソースコード確認方法 サンプルページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U
■仕様 ・質問２の解約を選択すると、ポップアップバナーが表示されます。 ・ポップアップバナーで解約が阻止された場合は指定のタグが付与されます。 ・<!-- 削除禁止 -->部分はデータの送信に必要なので削除しないでください。 ■編集ファイル：index.html (1)ポップアップを発動させたい回答に「onClick="showModal();"」を設定
(2)ポップアップバナーの表示部分のHTMLを設定 ①ポップアップバナー画像、ボタン画像設置 ②完了バナー画像、閉じるボタン設置
(3) (1)で呼び出す「showModal()」、完了バナー(サンクスバナー)の挙動設定 フォーム離脱時にタグを付与する場合は、AddTagにタグコードを貼り付けてください。
（4）バナー部分のスタイルの設定
下記フォームサンプルページを元に説明します。 フォームサンプルページをブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。 ＞フォームサンプルページ ＞フォームサンプルダウンロード ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U
【編集ファイル】
index.html
①画像の挿入箇所に<figure></figure>で囲われている部分をコピー＆ペーストしてください。
②画像のパスを設定
※画像のパス（画像名）は文字化け防止のため、半角英数字にしてください。
③画像名を記入（表示はされません、設定なしでも可、altは日本語可）
サンプルコード（コピー＆ペースト用）
<figure>
<div><img src="images/bnr3.png" alt="追加画像"></div>
</figure>（1）コンテンツ ＞ LIFF
↓ （2）対象フォームの「LIFF呼び出しURL」をコピーする
↓ （3）1：1トークより友達登録している管理用アカウントや自分のアカウントを選択 テキストメッセージに「LIFF呼び出しURL」をペーストして送信
↓ （4） ここからは実機でのLINE操作となります。 友達登録しているスマホより送られたメッセージ確認 「LIFF呼び出しURL」を開く
↓ （5）表示されたオリジナルフォームに内容を入力しエントリー（送信）する
↓ （6）送信結果は管理画面に戻り「受信BOX」よりご確認ください。 受信BOXの確認方法につきましてはこちらをご確認くださいGoogleアナリティクスでオリジナルフォーム内のボタンをクリック計測する方法
オリジナルフォーム（LIFF）で回答ボタンなどのクリックを計測したいときに活用できます。 ガイドはGoogleアナリティクスのGA4バージョンでの設定方法となります。 計測設定には、Googleアカウントの取得（GA4）、トラッキングタグの設置が必要になります。 上記がまだの方は、先にお済ませください。 Googleアカウントの取得、トラッキングタグの設置について＞ （1）対象のオリジナルフォームをダウンロードし、index.htmlを編集します。 編集方法についてはこちら＞ ↓ （2）クリック計測したいinputタグに下記を記述 ①～③は質問内容に合わせて変更してください。
onclick="gtag('event', '①クリック（解約）',
{'event_category': '②質問2',
'event_label': '③解約'
});"↓ （3）正常に計測されますと、Googleアナリティクスのレポートのイベント表示で確認ができます。
また、探索メニューでより詳しく解析することも可能です。 詳しい解析にはディメンションの設定も必要なので、詳細につきましてはグーグルのサポートページをご確認下さい。 [GA4] ディメンションと指標はこちら＞
本人確認フォームで送信ボタンを押したときにタグを付与するには、対象フォームのHTMLファイル内にタグをセットする必要があります。 HTMLファイルのダウンロード方法につきましては下記をご参照ください。 ＞既存のオリジナルフォーム（LIFF）のダウンロード方法 （1）ダウンロードが終わりましたら、ファイルを解凍。 ↓ （2）index.htmlをご使用のテキストエディターで開きまして、 「id="add_tags"」の「value」に付与したいタグコードを記述してください。 タグコードとは＞ 記述後ファイルの上書きを忘れずにしてください。
↓ （3）記述が終わりましたら、「オリジナルフォーム（LIFF）のアップロード方法」の手順に沿ってファイルをアップロードする。 設定したタグの動作確認方法は下記をご参照ください。 ＞送信時タグ付与の動作確認方法
下記フォームサンプルページのソースコードと併せてご確認いただくとわかりやすいです。 フォームサンプル：https://help.ecai.jp/form/liff_person1.0/ DL：https://help.ecai.jp/form/liff_person1.0.zip ※ソースコード確認方法 windows：Ctrl + U mac ：option + command + Uオリジナルフォームのチャットワーク、スプレッドシート通知
■目的 オリジナルフォームで入力された内容をチャットワーク通知する方法の説明になります。 （※ECAIにも同時に送信されます） ■セット所要時間 60分 ■セット方法 チャットワーク通知を行うためには、Googleアカウントとチャットワークアカウントが必要になります。 どちらも無料で作成できますので、まずはアカウントを作成してください。 Googleアカウント作成＞ チャットワークアカウント作成＞ 【チャットワーク通知までの流れ】 ①オリジナルフォーム送信 ↓ ②スプレッドシートへ記入 ↓ ③スプレッドシートが変更されたらチャットワークへ送信 ↓ ④チャットワークに通知される （１）オリジナルフォームの送信設定 下記のサンプルページをもとに説明します。 フォームサンプルページ＞ フォームサンプルページダウンロード＞ ※ソースコード確認方法 windows：Ctrl + U mac ：option + command + U オリジナルフォームの編集方法はこちら＞ ①index.htmlにスプレッドシートに送信設定 ※画像ファイルを送ることはできません。
【コピペ用】
//★スプレッドシートに送信設定
function OnPost(){
const URL = "スプレッドシートのApps Scriptをデプロイした時のURL";
//質問1，2の回答を取得
const c1 = $('.q1 :radio:checked').val();
const c2 = $('.q2 :radio:checked').val();
let SendDATA = {
"column_1" : c1,
"column_2" : c2,
};
let postparam = {
"method" : "POST",
"mode" : "no-cors",
"Content-Type" : "application/x-www-form-urlencoded",
"body" : JSON.stringify(SendDATA)
};
//スプレッドシートに送信
fetch(URL, postparam);
}②送信時に「OnPost();」を呼び出す
（２）スプレッドシートの設定 ①スプレッドシートの新規作成 ＞ 拡張機能 ＞ Apps Script
↓
②Apps Scriptの設定
ここで一旦チャットワークへログインし、設定から「API Token」と「対象のルームID」を取得します
↓
Apps Scriptに戻り、「API Token」と「ルームID」をコピペします。
チャットワークへの送信処理はそれ以降の「doPost()」に設定します。
送信メッセージ部分は送信内容に合わせてご変更ください。
【コピペ用】
// 【編集対象】Chatwork API Token
const token = 'API Token';
// 【編集対象】登録情報を通知するグループチャットのルームID
const room_id = 'ルームID';
function doPost(e){
let Sheet = SpreadsheetApp.getActiveSheet();
let JsonDATA = JSON.parse(e.postData.getDataAsString());
let currnetDate = new Date(); //現在の日時
Sheet.appendRow([currnetDate,JsonDATA.column_1,JsonDATA.column_2]);
// 送信データを個別に取得
var val1 = JsonDATA.column_1;
var val2 = JsonDATA.column_2;
// チャットワークに送信するメッセージ
var message = '';
message += "[info][title]チャットワーク通知[/title]";
message += "依頼日時: " + currnetDate + "\n";
message += "【STEP１】" + val1 + "\n";
message += "【STEP２】" + val2 + "\n";
message += "[/info]";
// Chatworkへ送信
var client = ChatWorkClient.factory({token: token})
client.sendMessage({room_id: room_id ,body: message});
}↓
編集が終わりましたら保存します
③ライブラリの設定 ライブラリで下記スクリプトIDで検索し、ChatWorkClientを追加
スクリプトID: 1nf253qsOnZ-RcdcFu1Y2v4pGwTuuDxN5EbuvKEZprBWg764tjwA5fLav
④Apps Scriptの公開（デプロイ）
デプロイ ＞ 新しいデプロイ ＞ 設定 ＞ ウェブアプリ
↓
説明：任意の管理名
ウェブアプリ：自分
アクセスできるユーザー：全員
↓
承認画面は初回のデプロイ時のみの作業となります。
↓
スプレッドシートを作成したアカウントを選択
↓
Advancedをクリック
（※ボタンが小さいので注意）
↓
Go to 「スプレッドシートのタイトル」リンクをクリック
↓
Allowを選択
↓
デプロイが成功すると、ウェブアプリのURLが発行されますので、これをコピペします。
ここまででスプレッドシートの設定は完了です。
↓
コピペしたURLをオリジナルフォームに設定します。
（１）の①に戻っていただき、index.htmlへURLを設定し保存後、オリジナルフォームをECAIへアップロードして下さい。
（３）送信確認
オリジナルフォームから送信して、チャットワークへ通知がきましたら設定は完了です。
ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせて編集をお願いします。 またチャットワークへの通知設定の設定代行も行っております。 ご希望の場合は下記設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。 （目安）１設定：10,000円(税別)【フォーム】マイクロコピーの追加
上記のように質問内容のテキストより少し小さいフォントサイズでマイクロコピーを入れたい場合は、 下記コードをコピーして、挿入箇所へペーストしてください。 改行したい場合は<li>～</li>を増やします。
<ul class="note">
<li>※こちらに表示したいテキストを記入してください。</li>
<li>※こちらに表示したいテキストを記入してください。</li>
</ul>※ class="note"でスタイルの調整を行っております。フォーム内質問と設定col(name属性)の確認方法
（1）コンテンツ ＞ LIFF
↓
（2）対象フォーム の 「フォーム修正」選択
↓
（3）すべてを開く
↓
（4）フォーム内質問とそちらに紐づいている設定col(name属性)の確認を行えます。 ※二重に定義されていると、後に定義されているcolで上書きされ、一部受信が出来なくなります
オリジナルフォームは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オリジナルフォームのPV数、ユニークユーザー数を計測する方法
外部ツールのGoogleアナリティクスを使用することで計測ができます。 アナリティクスの機能は多機能にわたるため、ツールについての細かい使用方法につきましては割愛させていただきます。 知りたい情報はインターネットから取得してご対応下さい。 (1)Googleアカウントの作成 アカウント作成はこちら＞ ↓ (2)アナリティクスにログイン ログインはこちら＞ ↓ (3)アナリティクスでサイト設定をする サイト設定はこちら＞ ↓ (4)サイト設定後、計測用のトラッキングタグをコピペしてください。 ①対象のアカウント選択 ②管理 ③データストリーム ④(3)で設定したWEBサイトを選択 ⑤トラッキングタグをコピペする
↓ (5)コピペしたコードを、オリジナルフォーム（LIFF）の「index.html」,「complete.html」のhead内に設置してください。 オリジナルフォームを編集するには下記ガイドを参照下さい。 既存のオリジナルフォーム（LIFF）のダウンロード方法 オリジナルフォーム（LIFF）のアップロード方法 ↓ (6)設置後、ユーザーのアクセスが行われますとアナリティクスの管理画面に計測内容が表示されます。 PV数、ユニークユーザー数が計測できますので、マーケティングにご活用ください。
設置の設定代行(有償)も行っております。 ご希望の方は下記フォームからお問い合わせください。 Googleアナリティクス設定代行に関するお問い合わせはこちら＞オリジナルフォーム（LIFF）の種類、設定について
【フォームの種類について】 オリジナルフォーム（LIFF）は大きく下記の2種類に分けられます。 ①解約・休止・サイクル変更フォーム ②その他のフォーム（本人確認フォーム含む） ①解約・休止・サイクル変更フォームで取得した情報はASSダッシュボード、受信BOXに反映されます。 ②その他のフォームで取得した情報は受信BOXに反映されます。また本人確認フォームとして設定しますと、取得した情報を会員リストの顧客情報として反映することができます。 【設定方法について】 LIFFの設定画面でフォーム種類を選択し、保存してください。
【注意事項】 オリジナルフォームの編集画面で、現在アップロードされているフォームの種類が確認できます。 こちらのフォーム種類とLIFFの設定フォームは同じにしてください。 異なりますとオリジナルフォームから正常にデータを取得できません。
アップロードされているフォームの設定方法につきましては。各フォームの詳細設定ガイドをご参照ください。 ⇒解約・休止・サイクル変更フォーム内のcol(name属性)の記載ルール ⇒本人確認フォーム内のcol(name属性)の記載ルールタグを付けることができるアクション一覧
▼タグを付けることができるアクション一覧
・会員リスト（※1） ・タグの自動設定（※2） ・一斉配信メッセージ（※3） ・応答メッセージ（※3） ・ステップメッセージ（※3） ・リマインドメッセージ（※3） ・ポストバック（※4） ┗カルーセル ┗画像カルーセル ┗ボタン ┗選択ボタン ┗クイックリプライ ┗リッチメニュー ・1:1トーク（※5） ・広告リスト（※6） ・LIFF（オリジナルフォーム）（※7）
各アクションのタグ操作箇所は下記画像をご確認ください。
▼会員リスト（※1）
▼タグの自動設定（※2）
▼一斉配信メッセージ・応答メッセージ・ステップメッセージ・リマインドメッセージ（※3）
▼ポストバック（カルーセル・画像カルーセル・ボタン・選択ボタン・クイックリプライ・リッチメニュー）（※4）
▼1:1トーク（※5）
▼広告リスト（※6）
▼LIFF（オリジナルフォーム）（※7）
オリジナルフォームで、送信ボタンを押したらタグを付与する方法はこちら＞
下記フォームサンプルページを元に説明します。 フォームサンプルページをブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。 ＞フォームサンプルページ ＞フォームサンプルダウンロード ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U
【仕様】 質問３を選択時に下記ポップアップバナーが表示されます。 「外部サイトへリンク」ボタンを押すと遷移する前に指定のタグを付与します。
【仕様詳細】 使用ファイル：index.html （1）ポップアップバナーの設置 ①表示バナーの１つ目を設置 ②表示バナーの２つ目を設置、更に増やす場合は複製して同列に追加する。 ③バナー表示画像設定 ④閉じるボタン設定 ⑤外部サイトへリンクボタン設定 ⑥外部サイトへ離脱しない場合は変わりに完了バナーを使用する（今回は使用しない）
↓ （2）ポップアップバナーを表示させるイベントを設定 ①質問１と質問３の取得に必要な変数をセットする ②質問３（申請種別）の選択内容を取得 ③質問１（商品）の選択内容を取得 ④全バナーを非表示 ⑤条件分岐：解約かつ商品１を選択している ⑥２回表示できないように、初回表示にチェックを入れる ⑦指定のタグコードをセットする ⑧バナー１を表示させる ⑨モーダルウインドウを表示させる ⑩条件分岐：解約かつ商品２を選択している ⑪ ⑩の条件の場合に指定のタグコードをセットする ⑫ ⑩の条件の場合にバナー２を表示させる
↓ （3）バナークリック時の挙動設定 ①バナー１の「外部サイトへリンク」をクリックした時 ②バナーを非表示にする ③モーダルウインドウを閉じるボタンを無効にする ④ECAIにタグを送信する ⑤タグ送信後のしダイレクト先を設定 ⑥バナー２の挙動設定 ⑦「閉じる」ボタンを押下でモーダルウインドウ（ポップアップバナー）を閉じる
↓ （4）質問3選択時にshowModal();のクリックイベントを呼び出す設定をする
フォームファイル内にあるindex.html（入力ページ）の詳細説明です。 ソースコード内にコメントアウトで説明の記載があります。 下記フォームサンプルページのブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。 ＞フォームサンプルページ ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U ＞フォームサンプルダウンロード【オリジナルフォーム】入力チェックの設定について
■目的 オリジナルフォームの入力チェックの設定についての説明 ■セット所要時間 10分 ■セットの流れ 下記フォームサンプルページを元に説明します。 フォームサンプルページのソースコードをブラウザ上でご確認いただくか、ファイルをダウンロードして内容をご確認ください。 フォームサンプルページ＞ フォームサンプルダウンロード＞ ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U
(1)必要ファイルは４つ 下記４ファイルを<head>内で読み込んでください。 （※ECAIのテンプレートを使用している場合、すでに設置されています。） ・jquery本体 ・validationEngine.css ・validationEngine.js ・日本語化ファイル
（２）回答のclassに”validate[required]”を指定
※data-prompt-positionでアラート表示の位置を調整できます。
ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。フォーム離脱時に、サンクスバナーを表示してタグを付与する方法
画面操作途中におけるタグ付与設定が必要になります。 オリジナルフォームのHTMLファイル編集が必要となりますので、対象ファイルをダウンロードします。 HTMLファイルのダウンロード方法につきましては下記をご参照ください。 > 既存のオリジナルフォーム（LIFF）のダウンロード方法 下記フォームサンプルページのソースコードと併せてご確認いただくとわかりやすいです。 > フォームサンプルページ DL：フォームサンプルページ ※ソースコード確認方法 windows：Ctrl + U mac ：option + command + U ダウンロードが終わりましたらファイルを解凍し、index.htmlをご使用のテキストエディターで開きます。 設定方法としては、 Javascriptのコードにおいて予め「AddTag」をcallしてタグをセットした上で、「AddTagProc」をcallしてください。 例：AddTag("drGCNjCUEg0"); 例：AddTagProc(); 【設定方法の詳細】 （1）付与されるタグは「id="addtag"」に格納します。 ※サンプルフォームに関しては表示バナー部分のHTMLに記述しています。
↓
（2）バナー表示の際に、付与したいタグを記述した「AddTag("タグコード")」をcallする。
（バナー表示例）
↓ （3）サンクスバナー表示の際に「AddTagProc」をcallする。 ※サンプルフォームに関しては「1000円割引」を押下するとサンクスバナーが表示されます。
（サンクスバナー表示例）
↓ （4）LIFFを閉じる場合、Javascriptのコードにおいて「liffclose」をcallしてください。
↓ （5）「AddTag()」「AddTagProc()」「liffclose()」関数についてはbody終了タグ上部にまとめて記述しておく 記述後ファイルの上書きを忘れずにしてください。
記述が終わりましたら、「オリジナルフォーム（LIFF）のアップロード方法」の手順に沿ってファイルをアップロードする。 付与したタグの動作確認方法は下記をご参照ください。 > 付与したタグの動作確認方法【フォーム】チェックボックスの作り方（解約休止フォームタイプ）
■見本
下記フォームサンプルページを元に説明します。 フォームサンプルページのソースコードをブラウザ上でご確認いただくか、ファイルをダウンロードして内容をご確認ください。 ＞フォームサンプルページ ＞フォームサンプルダウンロード ※ソースコード確認方法 対象ページを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"はバリデーションの表示位置を指定
⑨選択支の表示テキストを指定
フォームテスト環境の作成方法
本番環境へアップロードする前に動作テストを行いたい場合は、テスト用のLIFFを別途ご登録頂いてテスト送信を行ってください。
（1）コンテンツ>LIFF ページに移動
↓ （2） 「作成」ボタンをクリック
↓
（3）テスト用のLIFFを作成する
LIFF管理名には「テスト」などわかりやすくする
※解約・休止・サイクル変更に関わるフォームの場合は、「解約」「休止」「サイクル変更」の文字列をLIFF管理名に必ず入れて登録してください。
※解約・休止・サイクル変更に関わるフォーム以外の場合は、「解約」「休止」「サイクル変更」の文字列を含まないよう設定してください。
画面サイズを選択（特に指定のない場合は「Full」を選択）
オリジナルフォームにチェック、「保存する」をクリック
↓ （4） 作成したフォームの右側「フォーム編集」をクリック
↓ （5）「参照」ボタンをクリックしてテスト送信したいフォームデータを選択、「保存する」をクリック
フォームデータのダウンロード方法は下記を参照ください。 ＞既存のオリジナルフォーム（LIFF）のダウンロード方法
↓ （6） ⑪プレビュー、⑫設問内容をご確認できます。
※【解約・休止・サイクル変更・スキップ】申請フォームの場合、ASSダッシュボードに「お客様申請」と「テスト申請」が混在する形となる為、「名前○○の申請は処理しない」など社内ルールの周知をしていただけたらと思います。 テスト送信につきましては下記を参照ください。 ＞【解約・休止・サイクル変更・スキップ】エントリーフォームテスト送信方法 フォームアップロード後のチェック項目につきましては下記を参照ください。 ＞【簡易版】フォームアップロード後のチェック項目【オリジナルフォーム】チェックボックスの作り方
■見本
下記フォームサンプルページを元に説明します。 フォームサンプルページのソースコードをブラウザ上でご確認いただくか、ファイルをダウンロードして内容をご確認ください。 フォームサンプルページ＞ フォームサンプルダウンロード＞ ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U
フォームサンプルページの質問３が「チェックボックスタイプ」になりますので、こちらをサンプルコードよりコピペしてご使用ください。
①ECAI側で表示されるタイトルを「value」に設定（フォームには表示されません） ②質問番号を指定 ③質問テキストを指定 ④name属性は前の質問から連番になるようにし、複数回答を取得できるように[]指定 ⑤value属性は送信内容を指定（⑤⑥は同じだとわかりやすい） ⑥選択支の表示テキストを指定 選択支を増やすときは<li></li>までをコピペで追加して増やす
ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。オリジナルフォームを送信後にトーク画面に戻る方法
■目的 オリジナルフォーム送信後に完了ページを表示させずトーク画面に戻る方法です。 ■セット所有時間 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、チャットワークよりご依頼をお願いします。申請種別の質問をフォーム内に2回以上使用する場合
申請種別（col_1）はフォーム内に１つのみ設定できるというルールがあります。 そのため申請種別の質問を複数設置する場合は、最終回答が「col_1」に格納される必要があります。 col(name属性)の記載ルールは下記参照 ⇒解約・休止・サイクル変更フォーム内のcol(name属性)の記載ルール 下記フォームサンプルページを元に説明します。 ブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。 ＞フォームサンプルページ ＞フォームサンプルダウンロード(16) ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U （1）申請種別にあたる「col_1_title」,「col_1」をtype="hidden"にて設置
↓ （2）col_1に格納するための呼び出し関数をJavascriptで設定
↓ （3）１つ目の申請種別に関する質問 ①col_6以降の任意の順番で設定 ②SetAppType();を呼び出して、選択内容をcol_1に格納する
↓ （4）2つ目の申請種別に関する質問 ①col_6以降の任意の順番で設定 ②SetAppType();を呼び出して、選択内容をcol_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>