ガチャ風のアニメーションをLIFF(オリジナルフォーム)で使用して、その結果によってメッセージを出し分ける方法
■目的
LIFF(オリジナルフォーム)を使用して、ガチャ風のアニメーションの結果によってメッセージを出し分けることができます。
当たりを表示することでユーザーの次へのアクションへ誘導しやすくなります。
■セット所要時間
20分
■セットの流れ
下記LP作成サイトからガチャのLPを作成いただき、ECAI管理画面のLIFFへアップロード してください。
(1)LP作成サイトを開く
LP作成サイト>
(2)基本設定
①トークルーム内で使用を選択
②ページタイトルを入力
③ポスタータイトルを入力
④抽選前の表示テキストを入力
⑤2回目が回せるまでの時間制限を設定できます。
※1回のみ回せるようにするには無制限を選択してください。
(3)抽選タイプ 【当たり / ハズレ】 を選択した場合
①当たりの確率を整数で設定(ハズレの確率は自動で計算されます)
②当たった時に表示されるテキスト
③CTAボタンのテキスト
④CTAボタンをクリックした時に付与されるタグ の設定
※タグ を作成していない場合は管理画面より作成をして下さい。
⑤ハズレも同様に設定を行って下さい。
(4)抽選タイプ 【1等 / 2等 / 3等 】 を選択した場合
①当たりの確率を整数で設定(ハズレの確率は自動で計算されます)
②当たった時に表示されるテキスト
③CTAボタンのテキスト
④CTAボタンをクリックした時に付与されるタグ の設定
※タグ を作成していない場合は管理画面より作成をして下さい。
⑤ 2等 / 3等も同様に設定を行って下さい。
(5)高度な設定 、プレビュー、ダウンロード
①高度な設定ではhead内とbody内に計測用のタグなどを設置することができます。
②プレビューで表示の確認ができます。初期化は入力内容が削除されます。
③フッターのメニューバーよりZIPファイルがダウンロードできます。
(6)アップロード
①ダウンロードしたZIPファイルはECAI管理画面のLIFFへアップロード してください。
②保存する。
※LIFFの作成につきましてはこちら>
(7)LIFFを使う
設定したLIFFのURLをメッセージなどに差し込んで使用します。
使い方はこちら>
(8)タグトリガーステップメッセージの設定
タグをトリガーとしたステップメッセージ の設定を行って下さい。
ガチャLPを使って友だち追加時のメッセージ、特典などを出し分ける方法
■目的
友だち登録用のLPでガチャのアニメーションを使用し当たり外れでユーザーを振り分けそれぞれに特典などを提示することができます。
■セット所要時間
30分
■セットの流れ
下記LP作成サイトからガチャのLPを作成いただき、任意のサーバーもしくはECAI管理画面のLIFFへアップロード してください。
※任意のサーバーはご自身でご用意をお願いします。
(1)LP作成サイトを開く
LP作成サイト>
(2)基本設定
①ページタイトルを入力
②ポスタータイトルを入力
③抽選前の表示テキストを入力
(3)抽選タイプ 【当たり / ハズレ】 を選択した場合
④当たりの確率を整数で設定(ハズレの確率は自動で計算されます)
⑤当たった時に表示されるテキスト
⑥CTAボタンのテキスト
⑦CTAボタンに友達登録URLを設定
広告コード付きのURL を使用することでタグ付与、流入元計測が可能になります。
⑧ハズレも同様に設定を行って下さい。
(4)抽選タイプ 【1等 / 2等 / 3等 】 を選択した場合
⑨当たりの確率を整数で設定(合計が100%になるように設定してください)
⑩当たった時に表示されるテキスト
⑪CTAボタンのテキスト
⑫CTAボタンに友達登録URLを設定
広告コード付きのURL を使用することでタグ付与、流入元計測が可能になります。
⑬ 2等 / 3等も同様に設定を行って下さい。
(5)ダウンロード、プレビュー、高度な設定
⑭フッターのメニューバーよりZIPファイルがダウンロードできます。
⑮プレビューで表示の確認ができます。初期化は入力内容が削除されます。
⑯高度な設定ではhead内とbody内に計測用のタグなどを設置することができます。
(6)アップロード
ご自身でご用意いただいた任意のサーバーもしくはECAI管理画面のLIFFへアップロード してください。
ECAIのLIFFへアップロードした場合は、表示確認用のURLをWEB用としてご使用いただけます。
(7)メッセージの設定
友だち登録時のステップメッセージ にてタグの絞り込みを行いメッセージの設定を行って下さい。
オリジナルフォームをアップロードしたけどプレビューがローディング画像から変わらない
オリジナルフォームをアップロードしたけどプレビューがローディング画像から変わらない場合は、
一旦保存をしていただいてから再度プレビュー画面をご確認をお願いします。
※アップロードされる際は元データのバックアップ(ダウンロード)は必ず行ってください。
WEBページにオリジナルフォームを埋め込む方法
■目的
WEBページにオリジナルフォームを設置することで、そこで取得した情報をECAI上で扱うことができます。
■セット所要時間
20分
■セットの流れ
任意のオリジナルフォーム を用意し、そちらに設定されているLIFF-URLをECAIの短縮URL に変換します。
ECAIで設定された短縮URL はWEB上で開くと自動でLINEアプリが立ち上がりますので、LINEブラウザ上でフォームの入力を行うことができます。
※PCからのアクセスの場合はLINEアプリが開けないため、可能なのはスマホのみの動作限定となります。
PCからのアクセスの際にスマホとは別の処理が必要な場合は、別途コーディングをしてご対応ください。
(1)オリジナルフォームの作成
オリジナルフォーム を作成し、LIFF-URLをコピーしてください。
LIFF-URLは下記ガイドの「呼び出しURLをコピー」の部分を参照してください。
※すでに作成済みの場合は次の項目へ
オリジナルフォームの使い方>
(2)短縮URLの設定
上記でコピーしたLIFF-URLを短縮URL に設定してください。
(3)任意のWEBページに短縮URLを設置
スマホで設置した短縮URLをタップし、LINEが立ち上がってフォームが表示されれば設定は完了です。
LPなどのWEBページでECAIのタグを付与する方法
■目的
LINEアプリ以外でLPなどのWEBページでECAIのタグを付与したいときに有効です。
■セット所要時間
30分
■セットの流れ
短縮URL を使い、任意のページに自動でリダイレクトさせることでタグ付与を行います。
サンプルの例は商品購入後のサンクスページからリダイレクトをさせてタグを付与させる設定となります。
導線は下記のようになります。
【流れ】
①サンクスページ
↓
②短縮URLに自動でリダイレクトさせてタグ付与させる
↓
③サンクスページ(リダイレクト後)
サンプルページ>
サンプルダウンロード>
※ソースコード確認方法
対象ページをChromeブラウザで開いて下記操作を行ってください。
windows:Ctrl + U
mac:option + command + U
(1)リダイレクト後に表示させるページの作成
最初に③のリダイレクト後に表示させるページの作成します。
①のサンクスページからリダイレクトさせる場合は③でサンクスページの表示を行ってください。
※サーバーはご自身でご用意ください。
(2)短縮URLの設定
作成した③のサンクスページのURLで短縮URL を作成し、付与したいタグを設定してください。
(3)リダイレクト設定
タグを付与させたいページにリダイレクト設定を行います。
下記コードの短縮URLを変更し</body>の直上にこちらを追記してください。
<script>
location.href="作成した短縮URLを設定";
</script>
カレンダーを使いオリジナルフォームで入力した日時を取得する方法
■目的
何かしらの予約などをする際に、日時を取得したい時などに使用します。
テキストで入力してもらうことも可能ですが、カレンダーやラジオボタンを使用することでスムーズに日時の取得をすることができます。
■セット所要時間
30分
■セットの流れ
サンプルページをダウンロードしてご希望のLIFFへアップロードすることですぐにご使用いただけます。
ただしデフォルトから変更が必要な場合は、要件に合わせてご変更をお願いします。
サンプルページ>
サンプルダウンロード>
※ソースコード確認方法
対象ページをChromeブラウザで開いて下記操作を行ってください。
windows:Ctrl + U
mac:option + command + U
オリジナルフォームの編集やアップロードにつきましては下記ガイドを参照ください。
オリジナルフォームの編集方法>
(1)デフォルトの設定について
①カレンダー部分
・初期表示は当日
・土日祝日は選択付加
・当日から1か月後まで選択可
②時間帯
・チェックボックス or プルダウン選択(第二希望まで)
(2)土日祝日の制御について
①2025年以降の祝日や、特定の日付を指定する場合はこちらのリストに追加してください。
②土日祝日を選べるようにするには303~318行目のbeforeShowDayを下記のようにコメントアウトとするか削除してください。
(3)表示期間を制限ついて
表示期間を制限するには下記部分を変更してください。デフォルトは1か月の表示になります。
制限をかけない場合は該当箇所をコメントアウトとするか削除してください。
また当日を入れない場合は、minDateの値を「today」から「1」に変更してください。
例)
minDate : 1,
(4)時間帯について
時間帯の入力につきましてはチェックボックス or プルダウン選択が用意されています。
どちらか使用されない方をコメントアウトとするか削除してご使用ください。
ガイドの内容はあくまでもサンプルになります。 ご希望の要件にあわせて編集をお願いします。
またデザイン変更や入力制限などの設定代行も行っております。 ご希望の場合は下記設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。 (目安)1設定:5,000円(税別)~
計測タグに使用しているjqueryが使用できない時の回避策
■目的
広告運用において計測タグに使用しているjqueryが原因で広告の審査に影響が出てしまうことを回避できます
■セット所要時間
10分
■セットの流れ
LP計測 の際に設置するトラッキングコードは使用せず、以下のトラッキングコードを使用します。
こちらはjqueryを使用せずに作られたコードになります。
設置方法につきましては下記を参照してください。
広告リストのLPクリック数、LCV(友だち登録数)の設定>
★①には管理画面に使用されているURLのサブドメイン部分を指定して下さい。
例)https://demo.ecai.jp/ですとdemoの部分
★②にはLPからの計測に記載されている友だち登録のURLを指定して下さい。
〈設置するトラッキングコード〉
※</body>の閉じタグの直上に設置
<script>
var cookiedomain = getDomain(document.domain);
var paramobj = {};
// クエリパラメータから `ecaiad` を取得し、Cookieに設定
if (typeof getParam('ecaiad') !== 'undefined') {
document.cookie = 'ecaiad=' + getParam('ecaiad');
}
// Cookieを配列として取得
var arr = getCookieArray();
document.addEventListener('DOMContentLoaded', function () {
// クエリパラメータのチェックとオブジェクトの作成
if (getParam('ecaiad')) paramobj['ecaiad'] = getParam('ecaiad');
if (getParam('tcd')) paramobj['tcd'] = getParam('tcd');
if (getParam('ccid')) paramobj['ccid'] = getParam('ccid');
if (getParam('coid')) paramobj['coid'] = getParam('coid');
if (getParam('csid')) paramobj['csid'] = getParam('csid');
// HTML要素 #cv の値を取得
var cvElement = document.getElementById('cv');
if (cvElement) {
paramobj['cv'] = cvElement.getAttribute('value');
}
// 現在のURLを取得
if (window.location.href) {
paramobj['url'] = window.location.href;
}
// パラメータオブジェクトが存在する場合、クエリ文字列を作成
if (Object.keys(paramobj).length > 0) {
var query = '?' + Object.entries(paramobj).map(function (e) {
return `${e[0]}=${e[1]}`;
}).join('&');
// 外部スクリプトの読み込み
var script = document.createElement('script');
script.src = "https://★① .ecai.jp/aclog" + query;
document.head.appendChild(script);
}
});
// URLから指定されたクエリパラメータを取得
function getParam(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
// ドメイン名を抽出
function getDomain(url) {
var arr_uri = url.match(/^(.*?)([a-z0-9][a-z0-9\-]{1,63}\.[a-z\.]{2,6})[\:[0-9]*]?([\/].*?)?$/i);
return arr_uri[2];
}
// Cookieを配列形式で取得
function getCookieArray() {
var arr = {};
if (document.cookie !== '') {
var tmp = document.cookie.split('; ');
for (var i = 0; i < tmp.length; i++) {
var data = tmp[i].split('=');
arr[data[0]] = decodeURIComponent(data[1]);
}
}
return arr;
}
// URLSearchParams を使ってクエリパラメータを取得
var params = (new URL(document.location)).searchParams;
var adCode = params.get("ecaiad");
var url = "★② ";
// adCode が存在する場合、リンクを更新
if (adCode) {
// 指定された href を持つすべての <a> 要素を取得
var targets = document.querySelectorAll("a[href='" + url + "']");
for (var i = 0; i < targets.length; i++) {
targets[i].href = url + adCode; // href を更新
}
}
</script>
1つのLPで複数の広告コードのクリック数、CV計測(商品購入)を設定する方法
■目的
通常の設定ですと1つのLPで1つの広告コードの運用になるのですが、複数の広告コードに対応できるようになります。
広告コードごとにLPを作成する必要がないので運用面での効率が上がります。
■セット所要時間
30分
■セットの流れ
ページ遷移する際に広告コードをブラウザのストレージで持ちまわすようにします。
下記のサンプルページではLP→確認ページ→完了ページと遷移します。
サンプルページ>
サンプルダウンロード>
※ソースコード確認方法
対象ページをChromeブラウザで開いて下記操作を行ってください。
windows:Ctrl + U
mac:option + command + U
今回のガイドでは基本的な設置方法は割愛しておりますので、確認したい方は下記ガイドを参照ください。
商品購入のLPクリック数、CV計測の設定方法>
(1)LPページ(商品購入ページ)の設定
※サンプルのindex.htmlファイルです
※LPページにアクセスする際はキャンペーンURL(広告コード付きURL)をご使用ください
①jquery設置
②トラッキングコードは使用する広告リストで発行されているものを設置してください
③広告コードをブラウザのストレージに格納
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- トラッキングコード -->
<script src="https://★★★★★.ecai.jp/store/js/ecai.js"></script>
<!-- トラッキングコード -->
<script>
var params = (new URL(document.location)).searchParams;
var ecaiAd = params.get("ecaiad");
localStorage.setItem('ecaiAd', ecaiAd);
</script>
↓
(2)完了ページの設定
①jquery設置
②id属性にcvを設定し、inputタグをhiddenで配置
③ローカルストレージより広告コードを取得し、②のinputタグに設定
設定後ローカルストレージの広告コードは削除します
④トラッキングコードは使用する広告リストで発行されているものを設置してください
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<input type="hidden" id="cv" value="">
<script>
var ecaiAd = localStorage.getItem('ecaiAd');
$('#cv').val(ecaiAd);//コードセット
localStorage.removeItem("ecaiAd");//
</script>
↓
(3)計測テスト
①キャンペーンURL(広告コード付きURL)にアクセスするとカウントされます
②完了ページまで表示されるとカウントされます
オリジナルフォームの完了ページを閉じたときに白紙ページが残る場合の対処法
■目的
オリジナルフォームの完了ページを閉じたときに白紙ページが残ってしまうときの対処方法です。
ケースとしては短縮URLでLIFF-URLを使用した際などになります。
■セット所要時間
10分
■セットの流れ
オリジナルフォームを編集します。
編集方法に関してはこちら>
(1)友だち登録URLをコピーします
友だち登録URLの確認方法はこちら>
(2)complete.htmlの編集
完了ページには概ね閉じるボタンがあると思いますのでそちらを編集します。
ない場合は新たに作成してください。
閉じるボタンのaタグにonclickイベントがある場合は削除します。
そしてhref属性を追加し、先ほどコピペした友だち登録URL をセットしてください。
(3)
ファイル編集後、閉じるボタンを押してトーク画面が表示されるか確認をして下さい。
ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。
LPページ内にある質問などの回答によって広告コードを出し分けて設定する方法
■目的
LPページ内にある質問の回答によって広告コードを分けることで、友だち登録時に付与されるタグも分けることができますので、それぞれにステップメッセージなどをセットすることが可能になります。
■セット所要時間
30分
■セットの流れ
同時にLPからの計測を行いたい場合はこちら を参照ください。
ただしLCVは動的に変更されてしまいますのでクリックのみの計測となります。
サンプルページ>
サンプルダウンロード>
※ソースコード確認方法
対象ページをChromeブラウザで開いて下記操作を行ってください。
windows:Ctrl + U
mac:option + command + U
(1)広告コードの発行
最初に出し分けるための広告コードを直接計測 で2つご用意ください。
(2)LPページ(トップページ)の設定
ラジオボタンで「はい、いいえ」の回答によって広告コードが変わるサンプルコードです。
①、③に作成した広告コードをそれぞれ設置してください。
②、④に広告コードが空の状態 の友だち追加URLを設置してください。
URLは直接計測 のガイドの3-2の部分になります。
<!-- 回答によって広告コードの変更 直接計測で設定を行なう -->
<script>
var adCodeAnswer;
var addFriend = document.querySelectorAll(".add_friend"); //ボタン要素取得
$('.q :radio').on('change', function () {
var val = $('.q :radio:checked').val();
if (val == 'はい') {
adCodeAnswer = '広告コード1';
for (var i = 0; i < addFriend.length; i++) {
addFriend[i].href = "https://demo.ecai.jp/optin/9?ecaiad=" + adCodeAnswer;
}
} else if (val == 'いいえ') {
adCodeAnswer = '広告コード2';
for (var i = 0; i < addFriend.length; i++) {
addFriend[i].href = "https://demo.ecai.jp/optin/9?ecaiad=" + adCodeAnswer;
}
}
});
</script>
ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。
LPページなど生成したキャンペーンURLの広告コードを下層のページに引き継ぐ方法
■目的
友だち登録ページがサイトのトップページではなく下層のページにある場合に広告コードを下層ページに引き継ぐことができます。
■セット所要時間
30分
■セットの流れ
キャンペーンURLでアクセスしたページでブラウザのローカルストレージに広告コードを格納します。
下層にある友だち登録ページに遷移した際に格納した広告コードを引き継ぎます。
下層ページに広告コードを引き継ぐ必要がない場合はこちら>
サンプルページ>
サンプルダウンロード>
※ソースコード確認方法
対象ページをChromeブラウザで開いて下記操作を行ってください。
windows:Ctrl + U
mac:option + command + U
(1)LPページ(トップページ)の設定
①jquery設置
②トラッキングコードの設置(デフォルトのものとは内容が異なります)
こちらで広告コードをローカルストレージに格納します
③ECAI管理画面に使われているサブドメインに変更して下さい
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://★★★★★.ecai.jp/store/js/ecai.js"></script>
<script>
var params = (new URL(document.location)).searchParams;
var ecaiAd = params.get("ecaiad");
localStorage.setItem('ecaiAd', ecaiAd);
</script>
(2)下層ページ(友だち登録ページ)の設定
①jquery設置
②広告設定の友だち登録用のリンクを設定してください
https://gyazo.com/4f5d9f0a8227cbe972248e30a28b5e4e
③トラッキングコードの設置(デフォルトのものとは内容が異なります)
こちらで広告コードを現在のページに引き継いでます
④ECAI管理画面に使われているサブドメインに変更して下さい
⑤広告設定の友だち登録用のリンクを設定してください
※href=部分は不要
https://gyazo.com/4f5d9f0a8227cbe972248e30a28b5e4e
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://★★★★★.ecai.jp/store/js/ecai.js"></script>
<script>
let ecaiAd = localStorage.getItem('ecaiAd');
var url = "https://★★★★★.ecai.jp/optin/★?ecaiad=";
if(ecaiAd){var target = $("a[href='" + url + "']");
for (var i = 0; i < target.length; i++) {target[i].href = url + ecaiAd;}}
</script>
ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。
【オリジナルフォーム】マイスピー連携
■目的
オリジナルフォームで取得した情報をフォーム送信時にマイスピーにも送信することができます。
LINEで垢バンしてしまった時の保険としても活用できます。
■セット所要時間
2時間
■セットの流れ
(1)マイスピーでシナリオ設定(新規作成)
↓
(2)ECAIで取得したい情報をオリジナルフォームで作成
↓
(3)オリジナルフォームの完了ページにマイスピーに送信する処理を実装する
今回は姓名、メールアドレスをマイスピーに送信するサンプルとなります。
他の情報を取得したい場合は、マイスピー側の取得情報にECAI側のオリジナルフォームを合わせる必要があります。
サンプルページ>
サンプルダウンロード>
※ソースコード確認方法
対象ページをChromeブラウザで開いて下記操作を行ってください。
windows:Ctrl + U
mac:option + command + U
(1)マイスピーでシナリオ設定
①マイスピーでシナリオを新規で作成
デフォルトで姓、名、メールアドレスの3項目を取得できるフォームが作成できます。
内容を変更される場合は、マイスピーのマニュアルに沿って変更をお願いします。
↓
②登録フォーム設定
登録フォーム設定の確認画面の設定はスキップにして下さい
(2)ECAIで取得したい情報をオリジナルフォームで作成
①オリジナルフォームで作成
サンプルをダウンロード し、index.htmlを編集してオリジナルフォームの入力項目をマイスピーに合わせてください。
デフォルトでは姓、名、メールアドレスを取得するフォームとなっております。
オリジナルフォームの編集方法はこちら>
↓
②送信時に入力内容をローカルストレージに格納
(3)オリジナルフォームの完了ページにマイスピーに送信する処理を実装する
先ほどローカルストレージに格納した情報を使って、それを完了ページでは自動でマイスピーに送信を行う処理を実装していきます。
ユーザー側には実際の入力内容は見えず、ローディング画像が表示されている間に裏側で送信処理が行われます。
①マイスピーの送信先URLを設定
A. 登録ページのURLをコピーします
↓
B. complete.htmlのformタグのアクション部分に設定します
↓
②送信項目の設定
マイスピーに送る情報をデフォルトから変更している場合は、formタグ内に項目を追加してください。
A. 登録フォームデザインの本文内の入力部分のソースをコピーします
↓
B.complete.htmlのformタグ内に貼り付け
デフォルトでは姓、名、メールアドレスを取得するフォームになっていますが、送信項目が同じ場合はそのままでも大丈夫です。
↓
③ローカルストレージの情報を自動でマイスピーに送信
ローカルストレージの情報を②のvalueに格納し、自動でマイスピーに送信する処理を追加します。
こちらも同様にデフォルトから変更した場合は、送信内容を手動で変更してください。
↓
④送信テスト
最後にスマホのLINEアプリより送信テストを行って、マイスピーに入力内容が反映されるかご確認ください。
送信テストの方法はこちら>
ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。
「###ID###」のあるURLを使用した際に、「###ID###」のID部分を表示させない方法
■目的
「###ID###」のあるURLを使用した際に、「###ID###」のID部分をユーザー側に表示させないようにします。
例)https://lp2.ecai.jp/?ecai_id=###ID###
■セット所要時間
5分
■セットの流れ
(1)
「###ID###」付きのURLを短縮URLにします。その際に必ず「LINEログイン認証を行う」にチェックしてください。
↓
(2)
短縮URLを挿入して、その短縮URLをコピーする
↓
(3)
LIFFの外部サイトにコピーした短縮URLを設定する
LIFFの外部サイトの設定につきましてはこちら>
↓
(4)
LIFFの外部サイトに設定したLIFF-URLを使用することで、IDの表示を回避することができます。
【オリジナルフォーム】画像添付でカメラ起動かファイル選択を選べるようにする
■目的
オリジナルフォームで画像添付する際にカメラ起動かファイル選択を選べるようにします。
■セット所要時間
10分
■セットの流れ
ポイントはiosデバイスとAndroidデバイスで設定が異なるのでそれを判別して実装します。
※ブラウザの仕様によるものなので、今後仕様に変更がある場合がございます。
サンプルページをベースに説明しますのでまずは下記ファイルをダウンロードしてください。
サンプルページ>
サンプルダウンロード>
※ソースコード確認方法
対象ページをChromeブラウザで開いて下記操作を行ってください。
windows:Ctrl + U
mac:option + command + U
(1)
inputタグは下記のように設定してください。
accept属性、capture属性の設定で挙動が決まります。
※name属性は適宜設定
<input type="file" name="col_8" accept="image/*" capture="camera">
↓
(2)
iosでのアクセスの場合、capture属性を削除します。
<script>
// iPhone(ios)
if ( navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPad') > 0 || navigator.userAgent.indexOf('iPod') > 0){
$('input[type="file"]').removeAttr('capture');
}
</script>
※ヘッダーにjqueryの読み込みがない場合は下記設置をしてください。バージョンの指定はありません。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
【オリジナルフォーム】2つの質問の回答を1つのname属性にまとめる方法
■目的
通常はname属性を2つに分ければ良いのですが、何らかの理由で2つの質問の回答を1つにまとめる必要があるときに使用します。
実装にはJavascriptの知識が必要となります。
■セット所要時間
10分
■セットの流れ
サンプルページをベースに説明しますので下記ファイルをダウンロードしてください。
サンプルページ>
サンプルダウンロード>
※ソースコード確認方法
対象ページをChromeブラウザで開いて下記操作を行ってください。
windows:Ctrl + U
mac:option + command + U
(1)
サンプルページではname属性のcol_1に2つの回答を持たせる処理を実装します。
name属性の記載ルールにつきましてはこちら>
①col_1(連番は任意)のタイトルと回答をtype="hidden"にする。回答の方には任意のid属性を振る(今回はid="col_1")
②1つ目の回答に任意のid属性を振る(今回はid="q1")
③1つ目の回答に任意のname属性を振る(今回はname="q1")
④2つ目の回答に任意のid属性を振る(今回はid="q2")
⑤2つ目の回答に任意のname属性を振る(今回はname="q2")
<section class="person-form">
<dl>
<input type="hidden" name="col_1_title" value="設問1、設問2">
<input type="hidden" id="col_1" name="col_1" value="">
<dt>設問1<span>*</span></dt>
<dd><input id="q1" type="text" name="q1" placeholder="入力してください" class="validate[required]" data-prompt-position="topLeft"></dd>
<dt>設問2<span>*</span></dt>
<dd><input id="q2" type="text" name="q2" placeholder="入力してください" class="validate[required]" data-prompt-position="topLeft"></dd>
</dl>
</section>
↓
(2)
設問が回答されたタイミングで2つの設問の回答をname属性のcol_1にまとめる
<script>
$('#q1, #q2').on('change', function () {
let q1 = $('#q1').val();
let q2 = $('#q2').val();
if (q1 !== '' && q2 !== '') {
$('#col_1').val(q1 + ',' + q2);
}
});
</script>
オリジナルフォームのファイルの変更前と変更後でソースコードの差分(違い)を確認する方法
■目的
変更した箇所のソースコードを確認することで、その後に編集する際に参考にすることができます。
■セット所要時間
5分
■セットの流れ
(1)
まず差分を確認したいファイルの変更前、変更後それぞれを用意してください。
↓
(2)
それぞれのファイルをテキストエディター で開きます。
※お使いのエディターで問題ありません。
↓
(3)
difff というオンラインで差分を確認できるサイトを使用しますので、下記サイトを開いて下さい。
difff>
↓
(4)
①、②のサンプルテキストは削除し、テキストエディターから変更前のファイルのソースコードをコピーして①にそれぞれ貼り付け下さい。
変更後のファイルのソースコードは②に貼り付け下さい。
その後③をクリック
↓
(5)
ピンクのマーカー部分が差分(変更箇所)になります。
自社管理のWEBページでSMS認証、ユーザー情報を取得する方法
■目的
自社管理のWEBページでLINEの友だち登録前にSMS認証を行い、名前や電話番号などのユーザー情報を取得する方法。
ユーザー情報のほか、設定したアンケートの回答なども取得できます。
取得した情報はECAI管理画面の申し込みリストで確認ができます。
また取得した申し込みリストよりSMS配信を行う場合はこちら>
■セット所要時間
30分~1時間
(※取得するセット内容のボリュームによって変わります)
■セットの流れ
ECAIで公開されているAPIを使用します。下記ガイドの仕様に沿って設定を進めて下さい。
サンプルページ>
サンプルダウンロード>
※ソースコード確認方法
対象ページをChromeブラウザで開いて下記操作を行ってください。
windows:Ctrl + U
mac:option + command + U
【APIトークンの発行 】
(1)コンテンツ > 外部連携 > ECAI API トークンを発行する
↓
(2)管理名と有効期限を設定する
管理名はわかりやすい任意のものを設定してください。また有効期限は後からの変更ができません。
【発行済みAPIトークンの確認、変更 】
(1)発行済みリスト
↓
(2)アクセストークン
発行されたAPIトークンのステータスを「オフ」または削除した場合、設置済みのフォームがその時点より機能しなくなります。
またトークンは外部に流出しないように管理してください。こちらのトークンは後で使用します。
【申込設定の発行】
(1)コンテンツ > 申込設定 > 追加する
↓
(2)各種の項目設定
①管理名を入れる
※ECAI内で管理するための名称になりますので「2024年1月SMS送信者」など管理しやすい名前にすることを推奨します
②受付期間を設定。必要ない場合は「設定しない」にチェック
③SMSの認証済みのみを受ける場合はチェック
④SMS発信元番号は「共通(0120-002-495)」を選択する
※共通(0120-002-495)はECAI側で取得している番号となります。
※仮にお客様が0120-002-495に電話発信をした場合は自動音声が流れます(自動音声は固定となり変更不可となります)
※0120-002-495の自動音声を確認する際は0120-002-495に発信しご確認ください
⑤保存する
⑥保存後、申し込みコードが自動で発行されますのでコピーをして下さい。後ほどフォームの作成で使用します。
【入力フォームの設定】
下記サンプルページを元に説明しますので、まだの場合はダウンロードしてください。
サンプルページ>
サンプルダウンロード>
※ソースコード確認方法
対象ページをChromeブラウザで開いて下記操作を行ってください。
windows:Ctrl + U
mac:option + command + U
■入力フォームの作成
サンプルページは名前、メールアドレス、携帯電話番号を取得するのですが、携帯電話番号を入力するとSMSコードが発行できるようになります。
(1)formタグ内にinputを非表示で設定
id:request_code
name:request_code
value:申込コード ※【申込設定の発行】(2)-⑥でコピーしたもの
(2)入力項目の設定
①名前:name属性にはnameを設定
②メールアドレス:name属性にはemailを設定
③携帯電話番号:name属性にはtelを設定
④携帯電話番号入力時のonkeyupイベントの設定
⑤質問1ではタイトルのname属性にはcol_1_title、回答のname属性にはcol_1を設定
※ECAIにデータを送信する際に⑤は必須となります
<送信可能な入力項目のname属性一覧>
request_code:申込コード※必須
advert_code:広告コード
name:名前
nick_name:ニックネーム
manager_name:担当者名
reserve_date:予約日時(日付型)
tel:携帯電話番号
email:メールアドレス
col_1_title:質問タイトル※必須
col_1:回答※必須
col_2_title:質問タイトル
col_2:回答
col_3_title:質問タイトル
col_3:回答
col_4_title:質問タイトル
col_4:回答
col_5_title:質問タイトル
col_5:回答
col_6_title:質問タイトル
col_6:回答
…
最大100セット
■SMSコード発行
(1)ボタンの設置
①ボタン全体のタグにclass="codeRequestButton"を指定
②ボタンにSmsCodeRequest()のクリックイベントを設定
(2)SMSコード発行 のクリックイベント
③APIトークンの設置
④クリックイベント設置
※【発行済みAPIトークンの確認、変更】(2) アクセストークンで発行されたもの
⑤URLにhttp://[お客様ドメイン]/api/v1/rfm/code-deliveryを指定
⑥パラメーターのsend_number、request_codeは必須です
⑦Bearer認証にはECAI管理画面にて発行したAPIトークンを指定してください
⑧モーダル呼び出し
■SMSコード入力用のモーダル設置
①モーダル本体
②全体にid="modal-content"を指定
③認証コードの入力欄にid="code"指定
④認証コードの入力欄のname属性にname="code"を指定
⑤閉じるボタンにid="modal-close"を指定
⑥モーダルイベントの設置
■SMSコード確認
①認証コードの入力チェック
②URLにhttp://[お客様ドメイン]/api/v1/rfm/code-checkを指定
③パラメーターのsend_number、request_code、codeは必須です
④Bearer認証にはECAI管理画面にて発行したAPIトークンを指定してください
⑤レスポンスがOKだった場合は送信ボタンを表示させる
■入力フォームの送信
(1)ボタンの設置
①送信ボタン全体
②ボタンにid="requestbtn"を指定
③ボタンにRequestForm()のクリックイベントを設定
(2)送信処理
①送信処理全体
②URLにhttp://[お客様ドメイン]/api/v1/rfm/inboxを指定
③Bearer認証にはECAI管理画面にて発行したAPIトークンを指定してください
④レスポンスがOKだった場合はcomplete.htmlにリダイレクト
【送信テスト】
作成した入力フォームを任意のサーバーへアップロードし下記の流れで送信テストを行ってください。
送信内容がECAIの申込リストに反映されれば完了となります。
ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。
LIFFのZIPファイルが20MBを上回っていてアップロードできない時の回避方法
■目的
アップロードしたいZIPファイルが20MBを超えているとアップロードできないので、その時の回避方法の説明します。
アップロードの方法はこちら>
■セット所要時間
5分
■セットの流れ
まず方法ですが、ZIPファイルが20MBを超えない重さにする必要があります。
LIFFをアップロードする際の仕様の話ですが、アップロードする際に古いファイルは削除されず新しいファイルが上書きされる仕様となります。
そのためすでにアップロードがされている画像ファイルをに関してはアップロードしなくても問題ありません。
LIFFファイルをZIPにする前に、既存の画像データに関しては一旦削除いただき、ZIPファイル全体が20MB以下になるように調整をお願いします。
アップロード後は画像がちゃんと表示されているかのご確認をお願いします。
ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。
1つのLPで2つ以上のLINE公式アカウント(BOT)をまたいで広告リストのLPからの計測を行う方法
■目的
1つのLPで2つ以上のLINE公式アカウント(BOT)をまたいで広告リストのLPからの計測を行う方法の説明です。
前提として広告コードによる出し分けが必要となりますので、各コードごとのコーディングも必要となります。
通常のLPからの計測はこちらを参照ください。
広告リストのLPクリック数、LCV(友だち登録数)の設定>
■セット所要時間
10分
■セットの流れ
下記LPページのソースコード参照いただき、御社の環境に合わせて設置をお願いします。
(参考)
LPページ:https://help.ecai.jp/form/add_friend_lp3/?ecaiad=aaaaaaa
ファイルDL:https://help.ecai.jp/form/add_friend_lp3.zip
コードがないとどのLINE公式アカウント(BOT)に紐づくか判断できないため、その場合はデフォルトで設定したLINE公式アカウントに友達登録されます
〈LPページ 〉 ※参照コードは下にあります
①jqueryを設置
②友達登録ボタンにclass="add_friend"を追加
③指定のトラッキングコードを設置
④コードがないときの友達登録URLを設定
⑤1つ目のアカウントの広告リストの友達登録URL
⑥2つ目のアカウントの広告リストの友達登録URL
⑦1つ目のアカウントの広告コード
⑧2つ目のアカウントの広告コード
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>友だち追加ページ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div>友だち追加ページ</div>
<br>
<a class="add_friend" href="">友だち追加する></a>
<script src="https://demo.ecai.jp/store/js/ecai.js"></script>
<script>
var params = (new URL(document.location)).searchParams;
var adCode = params.get("ecaiad");
var addFriendUrl = "https://lin.ee/addfriend";//コードなし
var lineAccount1 = "https://demo.ecai.jp/optin/1?ecaiad=";//LINEアカウント1
var lineAccount2 = "https://demo.ecai.jp/optin/2?ecaiad=";//LINEアカウント2
var target = $('.add_friend');
if (adCode == 'aaaaaa') {//LINEアカウント1
for (var i = 0; i < target.length; i++) { target[i].href = lineAccount1 + adCode; }
}
else if (adCode == 'bbbbbb') {//LINEアカウント2
for (var i = 0; i < target.length; i++) { target[i].href = lineAccount2 + adCode; }
}
else{
for (var i = 0; i < target.length; i++) { target[i].href = addFriendUrl; }
}
</script>
</body>
</html>
何かしらのアクションがあったユーザーに対してステップメッセージを送信させない方法
■目的
ステップメッセージの途中で何かしらのアクションがあったユーザーに対してはそのステップメッセージを送信させたくない時に使用します。
■セット所要時間
5分
■セットの流れ
仮にアクションが応答メッセージだった場合は以下の方法となります。
(1)
ユーザーから発言があった際に応答メッセージにて自動返信をする
この際にタグを付与するようにします。
↓
(2)
ステップメッセージの設定で(1)のタグが付与されたユーザーを除くようにする
既存の入力チェックを使用して、独自のチェックを行う方法
■目的
既存の入力チェックでは設定ができない内容は、独自のチェックを設定する必要があります。
■セット所要時間
10分
■セットの流れ
対象の回答部分に指定の設定を行います。
サンプルの例は、「いいえ」にチェックが入ることで独自のテキストでバリデーションが入ります。
フォームサンプルページ>
フォームサンプルダウンロード>
※ソースコード確認方法
対象ページをChromeブラウザで開いて下記操作を行ってください。
windows:Ctrl + U
mac:option + command + U
(1)回答部分のinputのclassに独自の関数を呼び出す設定
例)
<input type="radio" name="col_1" class="validate[funcCall[checkComment],required]" value="いいえ">
(2)独自関数の内容を設定
こちらでエラーテキストの設定をします
例)
<script>
// 独自関数
function checkComment(field, rules, i, options){
if ($('.q_a :radio:checked').val() == 'いいえ') {
return `いいえの場合、送信できません`;
}
}
</script>
ホーム画面の「その他、未完了のフォーム申請」のカウント対象
LIFF設定のフォームの種類で、「その他フォーム」を選択したフォームの申請が未対応だった場合に表示されます。
★ただしLIFF名に「本人確認」という名前を使用した場合はホーム画面の「その他、未完了のフォーム申請」には反映されませんのでご注意下さい。
オリジナルフォームをクリックしたユーザーにタグを付与する方法
■目的
オリジナルフォームをクリックしたユーザーにタグを付与することができます。
注意点として、すでに指定のタグが付与されている場合は、タグを上書きして再付与することはできません。
■セット所要時間
10分
■セットの流れ
設定方法としては、オリジナルフォームの呼び出しURL を短縮URL に設定し、クリック時にタグが付与される設定を行います。
(1)オリジナルフォームの呼び出しURLを確認
クリックした時にタグ付与させたい、オリジナルフォームの呼び出しURLをコピペしてください。
コンテンツ > LIFF
↓
(2)短縮URLの設定
短縮URLの新規作成方法はこちら>
使用したいメッセージや1:1トークで短縮URLを設定します。
①短縮URLの管理名
②オリジナルフォームの呼び出しURLを貼り付け
③ログイン認証にチェック
④クリック時に付与したいタグを追加
⑤短縮URLを挿入
↓
(3)「友だち追加URL」を設定する
オリジナルフォームの送信完了ページの「閉じる」ボタンに、「友だち追加URL」を設定します。
こちらの設定を行わないと、「閉じる」ボタンをクリックしても白紙のページが残ってしまいます。
オリジナルフォームの編集方法はこちら>
下記ソースはサンプルになります。
リンク先はオリジナルフォームが設定されているLINEの「友だち追加URL」を設定してください。
※作成されたオリジナルフォームによっては、ソースが異なる場合があります。
※編集ファイルはcomplete.html
<a href="https://lin.ee/●●●●●●●" class="blue">閉じる</a>
オリジナルフォーム生成アプリの使い方
■目的
こちらのアプリは入力項目にテキストを打ち込むだけでオリジナルフォームを生成することができます。
これにより作業効率をアップさせることができるのと、HTMLの知識がない方でも誰でもオリジナルフォームを生成することができるようになります。
オリジナルフォーム生成アプリはこちら>
まず完成形のイメージとしては、下記のようなフォームが簡単に作成できます。
サンプルフォーム>
(1)サイドバーメニュー
①並べ替え
質問項目の並べ替えができます。
②データダウンロード
作成したデータを保管することができます。
③データ読み込み
②で作成したデータをこちらで読み込みます。
④リセット
入力内容をすべてクリアにします。
⑤上書き保存
データのダウンロード、プレビューの前に行ってください。
⑥プレビュー
作成したフォームの実際の見え方の確認ができます。
⑦LIFFダウンロード
ECAIにアップロードするためのデータをダウンロードします。
(2)フォームデザイン選択
シンプル型かチャット型のどちらかを選択してください。
(3)入力ページのヘッダー部分
①ページタイトル:ブラウザのタブ、フォームの最上部
②ヘッダー画像:ファイルを選択しアップロードして下さい
③ヘッダータイトル
④ヘッダーテキスト
(4)送信ボタン、タグコード
①送信ボタンテキスト
②詳細設定でフォーム送信時のリンク先を指定できます
③送信時タグコード:ここで設定したタグが送信時に付与されます
(5)質問項目の追加
+項目追加:プルダウンで下記7種類の質問やメッセージが追加できます
ラジオボタン
チェックボックス(※複数選択可)
プルダウン
1行テキスト入力
複数行テキスト入力
生年月日
メッセージ(テキストのみ表示)
【プレビューの補足】
プレビュー後にWindowsの場合、F12で開発ツールが開きます。スマホのマークをクリックするとスマホのプレビューに切り替わります。
(6)ラジオボタン
①必須:必須入力設定
②質問:質問テキストの入力
③補足:やや小さめのフォントサイズで補足テキスト
④回答の列数:1~3列の中で選択
⑤回答の設定
⑥回答追加
⑦削除
⑧タグコード:ユーザーその回答を選んだ時に指定のタグを付与
(7)チェックボックス
①必須:必須入力設定
②質問:質問テキストの入力
③補足:やや小さめのフォントサイズで補足テキスト
④回答の列数:1~3列の中で選択
⑤回答の設定
⑥回答追加
⑦削除
(8)プルダウン
①必須:必須入力設定
②質問:質問テキストの入力
③補足:やや小さめのフォントサイズで補足テキスト
④回答の設定
⑤回答追加
⑥削除
(9)テキスト入力(1行)
①必須:必須入力設定
②入力タイプ:名前、電話番号、メールを指定することでECAIの会員情報に紐づきます。デフォルトは指定なし
③質問:質問テキストの入力
④補足:やや小さめのフォントサイズで補足テキスト
⑤入力例の設定(入力すると消えます)
(10)テキスト入力(複数行)
①必須:必須入力設定
②質問:質問テキストの入力
③補足:やや小さめのフォントサイズで補足テキスト
④入力例の設定(サンプルは設定なし)
(11)生年月日
①必須:必須入力設定
②質問:質問テキストの入力
③補足:やや小さめのフォントサイズで補足テキスト
(12)メッセージ
質問と質問の間で何かしらのメッセージを入れたい場合はこちらをご使用ください。
(13)完了ページ
完了ページを表示するには、入力ページを送信することで表示されます。
①ページタイトル:ブラウザのタブ、フォームの最上部
②ヘッダータイトル
③ヘッダーテキスト
④閉じるボタンテキスト
(14)LIFFファイルをアップロードする
(1)の⑥でダウンロードしたLIFFファイルをECAIの管理画面からZIPファイルのままアップロードして完成です。
LIFFのアップロード方法はこちら>
オリジナルフォームの新規作成はこちら>
また、ダウンロードしたLIFFファイルをさらに手動で編集することも可能です。
オリジナルフォームの編集方法>
オリジナルフォーム内でLINE名、ECAI IDを表示させる方法
■目的
オリジナルフォーム内で「LINE名」や「ECAI ID」を表示させたいときに使用します。
■活用事例
(1)
LINE名の場合は、オリジナルフォームのテキスト内で呼び出すことができます。
ユーザーへのパーソナルな訴求が可能となります。
(2)
ECAI IDに関してはテキスト内で使用することはあまりないのですが、
外部サービスのスプレッドシートなどに回答を送信した時に、ECAI IDを送ることでユーザーを突合(特定)することができます。
オリジナルフォームのスプレッドシート通知>
■セット所要時間
10分
■セットの流れ
サンプルページをブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。
サンプルページ>
サンプルダウンロード>
※ソースコード確認方法
対象ページをChromeブラウザで開いて下記操作を行ってください。
windows:Ctrl + U
mac:option + command + U
■編集ファイル:index.html
(1)
サンプルページを参照し、LINE名、ECAI IDを取得するコードを</body>の上に追加
<!-- 削除禁止 -->
<script>
//会員チェック
function CheckMemberProc() {
var uid = $("#useridfield").val();
var fid = $("#fid").val();
var botid = $("#bot_id").val();
$.ajax({
type: "POST",
url: "/api/member/info",
dataType: 'json',
data: {
"uid": uid,
"fid": fid,
"bot_id": botid
},
success: function(j_data) {
if (j_data['error_code'] == 500) {
alert("会員は登録されていません。");
}
else {
$("#ecai_id").text(j_data['result']['ecai_id']);
$("#nickname").text(j_data['result']['nickname']);
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
},
complete: function() {removeLoading();}
});
}
</script>
<!-- 削除禁止 -->
↓
(2)
サンプルページを参照し、LIFFの呼び出し部分で(1)の「CheckMemberProc();」を追加
↓
(3)
挿入したい任意の場所に下記を追加
LINE名
<span id="nickname"></span>
ECAI ID
<span id="ecai_id"></span>
■内部API仕様
【エンドポイント】
/api/member/info
【DataType】
POST:json
【Request】
uid: String 必須 LineUserId
fid: Number 必須 フォームID
bot_id: Number 必須 BOT_ID
【Response】
error_code 正常な場合は「200」、指定されたBOT、フォーム情報、会員情報が存在しない等の場合は「500」
result error_codeが500の場合は空、会員情報が取得出来た場合は、「ecai_id」「nickname」を返却
※Requestの必須パラメータが正しく指定されていない場合は、HTTPステータスコードが422で返却される
ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。
ZIPファイルを解凍せず編集する方法
■目的
オリジナルフォームをアップロード するにはZIPファイルにする必要があるのですが、解凍を行わないことで再度圧縮する手間が省けます。
■セット所要時間
5分
■セットの流れ
※説明はWindowsになります。Macで行う場合はファイルを解凍してから編集を行なってください。
解凍後のファイルをアップロードするには圧縮 が必要です。
(1)
①ZIPファイル上で右クリック
②プログラムから開く
③エクスプローラー
↓
(2)
編集したいファイルをドラック&ドロップで、デスクトップなどにコピーします。
↓
(3)
コピーしたファイルをメモ帳などで開きます。
※Macの場合はデフォルトで使用できる「テキストエディット」を使用してください。
編集後、ファイルを保存します。(保存しないと変更されません)
↓
(4)
デスクトップの編集したファイルを、ZIPファイルの中へドラック&ドロップで戻します。
その際にアラートが出ますが上書きを選択してください。
(※元ファイルが必要な場合はバックアップを別に保管しておいてください)
↓
(5)
ECAIのLIFFへアップロード して編集内容が反映されているかご確認ください。
お使いの端末、環境によってできないこともありますので、その場合は一度解凍してから編集をお願いします。
オリジナルフォームの編集方法>
動作確認済み:Windows10
ポイント機能の使い方例
【基本機能】
ポイント数に応じてタグを一斉付与する方法>
ポイント数に応じてタグを一斉削除する方法>
自動でポイント付与・削減する方法>
ユーザー側でポイントを確認する方法>
ポイント数に応じて自動でタグを付与する方法>
【活用事例】
ポイント数に応じてサービスや商品をプレゼントする方法>
新機能#59┃会員リストの絞り込みで、タグ付与日時での絞り込みができるようになりました!
■目的
会員リストの絞り込みで、タグ付与日時での絞り込みができるようになりました。
これにより、より細かいセグメント分けが可能になりますので、配信内容の効果を上げることができます。
■セット所要時間
3分
■セットの流れ
(1)会員 > 会員リスト > 条件で絞り込み
↓↓↓
(2)絞り込み
①他の会員情報で絞り込む
②条件タグを設定
③タグ付与日時を設定
④絞り込み
オリジナルフォーム送信後、送信内容をメッセージでリマインド配信したい
■目的
オリジナルフォーム送信後、送信内容をメッセージでリマインド配信することができます。
■セット所要時間
1分
■セットの流れ
(1)コンテンツ > LIFF > 設定
対象のオリジナルフォームの設定をひらく
↓
(2)「送信内容をメッセージで送る」にチェックを入れて保存
↓
(3)送信テスト
LIFF-URLから送信テストを行い、メッセージで送信内容が送られてくれば設定完了です。
オリジナルフォームのテスト送信 方法 >
回答内容がすべて配信されるため、設定する前に必ず配信される回答内容を確認してください。
質問で分岐がされている場合、ユーザーの操作によっては内容が重複して送信されることがあります。
そのような場合はオリジナルフォームを修正することで重複を防ぐことができます。
↓
(4)メッセージも同時に送りたい場合
フォーム送信時にタグ付与を行い、タグトリガーステップメッセージを設定してください。
オリジナルフォームで、送信ボタンを押したらタグを付与する方法>
「タグトリガーステップメッセージ」の作成方法>
オリジナルフォーム(LIFF)を入力のないLPのように使う方法
■目的
オリジナルフォーム(LIFF)を入力のないLPのように使う方法
■セット所要時間
5分
■セットの流れ
【パターン 1】
LIFFを外部サイトに設定することで、外部のサイトをLIFFで開くことができます。
外部サイトの設定方法>
【パターン2】
LIFFファイルのindex.htmlで静的ページを生成する。
index.htmlを編集し、コンテンツを作成してください。
オリジナルフォームの編集方法>
LIFFファイル内には「index.html」と「complete.html」を必ずセットで作成する必要があります。
LIFFファイルの構造についてはこちら>
ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。