LINE 友だち追加 ソケット通信

LP にLINE お友だち追加ボタンを設置し、誰が、いつ、どの LP で友だち追加まで至ったのか（CV）をトラッキングし、広告 ASP へ成果通知を行うための設定です。

LINEでの設定

LINE友だち追加 ソケット通信の利用には「LINE Developersコンソール」とecforce管理画面で設定が必要です。
各設定方法は以下をご確認ください。

［参考］LINE Developersコンソールの設定方法

1.「LINE Developersコンソール」へログイン

「LINE Developersコンソール ログイン画面（外部サイト）」をクリックして「LINE Developersコンソール」へログインします。
※ご利用中のアカウントに基づき、LINEアカウントもしくはビジネスアカウントでログインください。

2.開発者アカウントの作成

「LINE Developersコンソール」に初めてログインする場合は、開発者情報の入力画面で「開発者名」と「メールアドレス」を入力し、LINE Developersコンソールの開発者アカウントを作成します。
※初回ログイン時に開発者アカウントの作成を行います。

3.新規プロバイダー作成

LINE Developersコンソールで「新規プロバイダー作成」をクリックし、プロバイダーを作成します。
※プロバイダーは、LINEプラットフォームを通じてサービスを提供する個人、企業、またはそのほかの組織を意味する情報です。
※言語の切り替えは画面右下にて実施ください。

4.チャネル作成

「3.新規プロバイダー作成」で作成したプロバイダーでチャネルを作成します。
※チャネルは、LINEプラットフォームが提供する機能をプロバイダーが開発するサービスで利用するための通信路です。
チャネルの種類は「LINEログイン」「Messaging API」の2つを作成します。

5. LINE ログイン の作成

新規チャネル作成から「LINEログイン」を選択します。

チャネルの種類	「LINEログイン」を設定します。
プロバイダー	作成したプロバイダーを設定します。
サービスを提供する地域	サービスを提供する地域を設定します。
会社・事業者の所在国・地域	事業者の所在国を設定します。
チャネルアイコン	チャネルアイコンを設定できます。 設定は任意です。
チャネル名	作成するチャネル名を設定します。
チャネル説明	作成するチャネルの説明を入力します。
アプリタイプ	アプリタイプを設定します。 本設定では「ウェブアプリ」を指定してください。
メールアドレス	メールアドレスを設定します。
プライバシーポリシーURL	プライバシーポリシーのURLを設定します。 設定は任意です。
サービス利用規約URL	サービス利用規約URLを設定します。 設定は任意です。
LINE開発者契約	チェックボックスにチェックを入れます。

必須項目の入力が完了したら「作成」を選択します。
作成した、LINEログインについて、「OpenID Connect」のメールアドレス取得権限を申請します。

「申請」ボタンを選択することで申請の画面が表示されますので、チェックボックスへのチェック、スクリーンショットを登録して「保存」を選択します。

申請がとおると、権限に「OC_EMAIL」が追加されます。

LIFF タブに遷移し、LIFFアプリを追加します。

LIFFアプリ名	LIFFアプリ名を設定します。
サイズ	LIFFアプリを表示する際の画面サイズを設定します。 サイズについては、以下ご参照ください。 LIFFアプリをチャネルに追加する (外部サイト)
エンドポイントURL	以下を設定してください。 (各ショップのドメイン)/line/liff_trackings
Scope	取得する情報にチェックを入れます。 「profile」「email」「openid」にチェックを入れます。
友だち追加オプション	「Off」を設定します。
オプション	「Off」で設定します

入力が完了したら「追加」を選択します。
LINE ログイン チャネルについては設定完了となります。

6. Messaging API の作成

新規チャネル作成から「Messaging API」を選択します。

チャネルの種類	「Messaging API」を設定します。
プロバイダー	作成したプロバイダーを設定します。
会社・事業者の所在国・地域	事業者の所在国を設定します。
チャネルアイコン	チャネルアイコンを設定できます。 設定は任意です。
チャネル名	作成するチャネル名を設定します。
チャネル説明	作成するチャネルの説明を入力します。
大業種	選択項目の中から任意の業種を設定します。
小業種	選択項目の中から任意の業種を設定します。 大業種を選択することで選択肢が設定できます。
メールアドレス	メールアドレスを設定します。
プライバシーポリシーURL	プライバシーポリシーのURLを設定します。 設定は任意です。
サービス利用規約URL	サービス利用規約URLを設定します。 設定は任意です。
LINE公式アカウント利用規約	チェックボックスにチェックを入れます。
LINE公式アカウントAPI利用規約	チェックボックスにチェックを入れます。

必須項目の入力が完了したら「作成」を選択します。

7. 外部連携アカウント管理の「LINE Messaging API」を設定する

ecforceの外部連携アカウント管理「LINE Messaging API」にLINEで設定した情報を入力します。

チャンネルID	6. Messaging API の作成 で作成した Messaging API の「チャンネルID」を設定します。
チャンネルシークレットキー	6. Messaging API の作成 で作成した Messaging API の「チャンネルシークレット」を設定します。
LINE Webhook 転送先	Webhook の転送先を設定します。

8.Messaging API のWebhook URL を設定する

「6. Messaging API の作成」で作成したMessaging API の「Messaging API設定」タブで、Webhook URL を設定します。

Webhook URL の「編集」を選択し、Webhook URLを設定します。
「(ドメイン)/line/webhook」を設定します。

設定後、「更新」を選択します。
「検証」を選択し、検証が成功するか確認できます。

「Webhookの利用」「Webhookの再送」についてチェックを入れます。

チャネルアクセストークンの「発行」を選択しアクセストークンを発行します。

9. LINE友だち追加ボタンの作成

LINE友だち追加ボタンを配置します。
広告URLとSHOPに配置できますが、記載は異なります。

広告URLに配置する場合

使用する広告URLのLPテンプレートにボタンを配置します。
以下参考にボタンの設定をします。

<script type="text/javascript">
LIFF_URL = '(LINEログインのLIFF URL)'
LIFF_ID = '(LINEログインのLIFF ID)'
CHANNEL_ID = '(LINEログイン のチャネルID)'
REDIRECT_URL = '(リダイレクト先URLは下記参照)'

liff_button_src = LIFF_URL + location.search + '&liff_id=' + LIFF_ID + '&channel_id=' + CHANNEL_ID + '&redirect_url=' + REDIRECT_URL
var liff_btn = document.createElement('button');
liff_btn.textContent = '(ボタン名称)';
liff_btn.addEventListener("click", function () {
location = liff_button_src; // Navigate to new page
});
document.body.appendChild(liff_btn);
</script>

SHOPに配置する場合

使用するテーマにボタンを配置します。
以下参考にボタンの設定をします。

<script type="text/javascript">
LIFF_URL = '(LINEログインのLIFF URL)'
LIFF_ID = ''(LINEログインのLIFF ID)'
CHANNEL_ID = '(LINEログイン のチャネルID)'
REDIRECT_URL = '(リダイレクト先URLは下記参照)'   
    
button_src = LIFF_URL + '?channel_id=' + CHANNEL_ID + '&liff_id=' + LIFF_ID + '&redirect_url=' + REDIRECT_URL
var btn = document.createElement('button');
btn.textContent = '(ボタン名称)';
btn.addEventListener("click", function () {
  location = button_src; // Navigate to new page
});
document.body.appendChild(btn);
</script>　

リダイレクト先URLは「LINE Official Account Manager」から取得することができます。

友だち追加ガイド > URLを作成 の順に選択します。

URLに記載の内容となります。

10. LINE友だち追加ソケット通信管理の設定

マーケティング管理 > LINE 友だち追加ソケット通信管理 にて、設定します。

ソケット通信についてはソケット通信機能 設定 を参照ください。

利用可能パラメータ一覧

ソケット通信管理ではLiquid変数は利用できません

通知したい値	変数	実際に返される値（例）
現在時刻	{now}	2023-04-05 17:28:18 +0900
顧客ID	{customer_id}	41865
顧客番号	{customer_number}	c24fr4fe530
広告URL	{lp_url}	url
広告URL ID	{url_id}	1

LPテンプレート・メールテンプレート等で利用可能な変数・変数名（Liquid変数）とは異なります。

11. 広告URL管理に「LINE友だち追加ボタン」、「LINE友だち追加ソケット通信」を設定する

作成する広告URLに「8. LINE友だち追加ボタンの作成」で作成したLPテンプレートと「9. LINE友だち追加ソケット通信管理の設定」で作成したソケット通信を設定します。

LP設定

LINE 友だち追加ソケット通信設定

12. 広告集計

LINE友だち追加が行われ作成された顧客数について、広告集計で確認することができます。
詳細は広告集計を参照ください。

13. 顧客管理

LINE友だち追加ソケット通信で顧客が作成されたとき、顧客管理に「流入元広告URL」として
どの広告URLで顧客が作成されたか確認できます。
詳細は【顧客管理】基本情報を参照ください。

受注管理、定期受注管理、顧客管理 にて「流入元広告URL」で検索ができます。