外部サイトのサンクスページからリダイレクトしてタグ付与する方法
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

※サンクスページのリダイレクト処理はカートに依存しているため カート側の仕様変更で使えなくなることがあります。

※サンプルフォーム(アラートは実装時に外してください。)
プレビュー>
ダウンロード>
LIFFの送信完了ページで「閉じるボタン」を押した際にタグ付与方法
送信完了ページにてタグ付与する方法になります。
オリジナルフォームのcomplete.htmlの編集が必要となりますので、対象ファイルをダウンロードします。

HTMLファイルのダウンロード方法につきましては下記をご参照ください。
> 既存のオリジナルフォーム(LIFF)のダウンロード方法


下記フォームサンプルページのソースコードと併せてご確認いただくとわかりやすいです。
> フォームサンプルページ
DL:フォームサンプルページ

※ソースコード確認方法
windows:Ctrl + U
mac  :option + command + U


ダウンロードが終わりましたらファイルを解凍し、complete.htmlをご使用のテキストエディターで開きます。
サンプルコードをもとに、必要な記述を4か所追加してください。


(1)head部分に下記を追加
サンプルコード(コピー&ペースト用)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

↓

(2)閉じるボタン部分にクリックイベント追加
サンプルコード(コピー&ペースト用)
onclick="AddTag('タグコード');AddTagProc();liffclose();"

↓

(3)LIFFの情報取得のための記述をコピー&ペースト
サンプルコード(コピー&ペースト用)
<!-- 削除禁止 --><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###"><!-- 削除禁止 -->
<!-- 削除禁止 --><input type="hidden" id="addtag"><!-- 削除禁止 -->

↓

(4)タグの送信用の記述をコピー&ペースト
サンプルコード(コピー&ペースト用)
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 () {}
	});
}


記述が終わりましたら、「オリジナルフォーム(LIFF)のアップロード方法」の手順に沿ってファイルをアップロードする。

付与したタグの動作確認方法は下記をご参照ください。
> 付与したタグの動作確認方法

オリジナルフォームを送信後にトーク画面に戻る方法
■目的
オリジナルフォーム送信後に完了ページを表示させずトーク画面に戻る方法です。

■セット所有時間
5分

下記フォームサンプルページを元に説明します。
サンプルページをブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。
フォームサンプルページ>
フォームサンプルダウンロード>

※ソースコード確認方法
対象ページをChromeブラウザで開いて下記操作を行ってください。
windows:Ctrl + U
mac:option + command + U


■セットの流れ
サンプルページを例に説明をしていきます。
編集ファイル:complete.html

フォーム送信後に表示される完了ページ(complete.html)に、自動でLIFFを閉じる動作を入れます。
実際の閉じる動作はLINEのLIFF内でしか動作しないのでご注意ください。

(1)body閉じの上に下記2つのコードを追加
<!-- 削除禁止 -->
<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、チャットワークよりご依頼をお願いします。

広告計測の活用事例
LCV(友だち登録数)改善のために、下記のような設定を推奨しています。
7つパターンを上げておりますので、自社の運用に当てはめてご活用ください。

それぞれの計測の仕様、設定方法につきましては下記ガイドを参照ください。
「直接計測」「LPからの計測」「商品購入数の計測」の用途、仕様の違いについて>LP(ランディングページ)からの友だち登録数測定
計測設定 : LPからの計測
比較項目 : LPクリック数、LCV
計算例 : LPクリック数÷LCV=登録率
改善項目 : LPデザイン
※LPに計測用のタグを設置し、キャンペーンURLをご使用ください。


■サンクスページからの友だち登録数測定
計測設定 : LPからの計測
比較項目 : 購入完了数、LCV
計算例 : 購入完了数÷LCV=登録率
改善項目 : サンクスページデザイン
※サンクスページに計測用のタグを設置し、キャンペーンURLをご使用ください。


■オフィシャルサイトからの友だち登録数測定
計測設定 : LPからの計測
比較項目 : 友だち登録ページクリック数、LCV
計算例 : 友だち登録ページクリック数÷LCV=登録率
改善項目 : 友だち登録ページデザイン
※友だち登録ページに計測用のタグを設置し、キャンペーンURLをご使用ください。


■SNSからの友だち登録数測定
計測設定 : 直接計測
比較項目 : SNS表示回数、LCV
計算例 : SNS表示回数÷LCV=登録率
改善項目 : SNSコンテンツ
※アプリブラウザの仕様により計測できない場合があります。
※instagramのDM、プロフィール欄リンクからクリック計測はできません。


■メールからの友だち登録数測定
計測設定 : 直接計測
比較項目 : メール送信数、LCV
計算例 : メール送信数÷LCV=登録率
改善項目 : メール内容
※直接計測数≠メール送信数


■同梱物、チラシ(QRコード)からの友だち登録数測定
計測設定 : 直接計測
比較項目 : 同梱物、チラシ配布数、LCV
計算例 : 同梱物発送数÷LCV=登録率
改善項目 : 同梱物、チラシ内容
※直接計測数≠同梱物発送数


■バナー、テキスト広告からの友だち登録数測定
計測設定 : 直接計測
比較項目 : インプレッション数、LCV
計算例 : インプレッション数÷LCV=登録率
改善項目 : バナーデザイン、テキスト内容
フォームを閉じた後(送信後)のページを設定する方法
対象フォームをダウンロードし、「complete.html」を編集します。
どのフォームでも同じやり方で編集ができます。


(1)対象フォームをダウンロードします。
フォームのダウンロード方法はこちら>


↓

(2)ファイルを解凍し、「complete.html」をテキストエディターで開き編集します。
ファイル内の詳細はこちら>


↓

(3)編集が終わりましたら、ファイルを圧縮し所定のLIFFへアップロードします。
アップロード方法はこちら>


↓

(4)送信テストを行い、表示に間違いがないか確認する。
テスト送信方法>
LPからの計測で、キャンペーンURLを使わず計測する方法
マイページやサンクスページなど、固定の経路で流入してくる場合などに使用できます。
※キャンペーンURLを使用して計測する場合はこちら>


2行目のトラッキングコード広告コードを指定のものに変更し、
計測するページの</body>タグの上に、下記計測タグ一式を設置してください。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"> </script>
<script src="https://demo.ecai.jp/store/js/ecai.js"></script>
<script>
    paramobj['ecaiad'] = '広告コード';
  </script>
設置例)
設定が完了しますとキャンペーンURLを使用しなくてもクリックが1で計測されます。

【広告】LPからの計測で、流入元を問わずコード別でクリック数、LCVを計測する方法
マイページやサンクスページなど、固定の経路で流入してくる場合などに使用できます。
通常のLPからの計測の応用版になります。

LPからの計測設定についてはこちら>

上記の設定に加えて、計測タグの下に下記コードを追加してください。
※広告コードは指定のものに変更
  <script>
    paramobj['ecaiad'] = '広告コード';
  </script>
設置例)
※キャンペーンURLを使用しても、しなくてもクリックが1で計測されます。