LINE公式アカウント連携(友だち追加などをCVとして送る)
対応状況: 対応済み。LINE公式アカウント(Messaging API)の 友だち追加やメッセージなどのイベント を、そのユーザーが もともと流入してきた広告媒体(Google / Yahoo!ディスプレイ・LINE / TikTok / Meta)へコンバージョンとして送り返せます。
ヒント
通常のCAPI(上の共通手順)は「サイト上のCV」を送る仕組みですが、この機能は「LINE内で起きたイベント」をCVにできるのが違いです。広告 → LP → 友だち追加、のような LINE 完結の獲得導線でも媒体の最適化シグナルを返せます。
仕組み(2つの時間をつなぐ)
- 広告クリック時: LPに設置した配布タグがクリックID(gclid など)をクッキーに保存します。
- 友だち追加時: LPの「LINEで友だち追加」ボタンが LINEログイン(友だち追加の確認画面つき)を経由することで、LINEのユーザーIDとクリックIDが紐付きます。
- LINEイベント発生時(直後〜数十日後): 友だち追加やメッセージが Webhook でアプリに届き、登録したイベントだけが、紐付いたクリックIDの媒体へCVとして送信されます。
事前に用意するもの
| 用意するもの | 取得する場所 | 使う場所 |
|---|---|---|
| Messaging API チャネルの チャネルID / チャネルシークレット | 【媒体】LINE Developers | 【アプリ】チャネル登録 |
| LINEログインチャネルの チャネルID / チャネルシークレット | 【媒体】LINE Developers | 【アプリ】チャネル登録 |
| LPへの配布タグ設置と「友だち追加」ボタンの変更 | 【サイト】 | 紐付けの前提(下記・最重要) |
注意
Messaging API チャネルと LINEログインチャネルは、必ず同一プロバイダー配下に作成してください。LINE のユーザーIDはプロバイダー単位で発行されるため、別プロバイダーだと紐付けが成立しません。
手順A【媒体】LINE Developers でチャネルを準備する
-
LINE Developers で、対象の LINE公式アカウントの Messaging API チャネル を開き、チャネルID / チャネルシークレット を控えます。「応答設定」で Webhook を ON にします。
-
同じプロバイダーに LINEログインチャネル を作成(既にあればそれを使用)し、チャネルID / チャネルシークレット を控えます。
-
LINEログインチャネルに、手順1の LINE公式アカウントをリンクします(友だち追加の確認画面を出すために必要です)。コンソールでの手順は次のとおりです。
- LINE Developersコンソール にログインし、LINEログインチャネルがあるプロバイダーをクリック。
- LINEログインチャネルをクリック。
- 「チャネル基本設定」タブをクリック。
- 「リンクされたLINE公式アカウント」の「編集」 をクリック。
- 友だち追加させたい LINE公式アカウントを選び、「更新」 をクリック。
※ この操作には、LINEログインチャネルの Admin 権限と、LINE公式アカウントの管理者権限が必要です。
-
LINEログインチャネルに コールバックURL(リダイレクトURL) を登録します。コンソールでの手順は次のとおりです。
- 同じ LINEログインチャネルで、「LINEログイン設定」タブをクリック(「チャネル基本設定」タブではありません)。
- 「コールバックURL」の「編集」 をクリック。
- 次の値を貼り付けて 「更新」 をクリック:
https://app.ad-submission.com/api/line/link/callback - 「コールバックURL」の一覧に、いま登録した URL が表示されていることを確認します。
※ Messaging API チャネルにはコールバックURLの欄がありません。 見つからない場合は、開いているチャネルが LINEログインチャネルかどうかを確認してください。
重要
コールバックURLは1文字でも違うと友だち追加リンクが 400 エラーになります。 上のコードをそのままコピーして貼り付けてください。以下がすべて一致している必要があります。
- スキーム(
https:/// ローカルはhttp://) - ドメイン・ポート番号(ローカルの
:3010など) - パス(
/api/line/link/callback) - 末尾スラッシュを付けない・クエリを付けない
ローカル検証と本番の両方で使う場合は、2本とも登録してください(コールバックURL欄は改行区切りで複数登録できます)。なお本番のコールバックURLは https:// 必須です(LINEプラットフォームとの通信は TLS 1.2 以上の HTTPS が要件)。
注意
本番(Vercel)で使う場合は、Vercel 側の環境変数 NEXT_PUBLIC_APP_URL が本番ドメインになっていることを確認してください。この値がそのままLINEへ送るリダイレクトURLになるため、localhost のままだと本番でリンクを踏んでも必ず 400 になります。また、プレビューデプロイのURLはデプロイごとに変わるため登録しても一致しません。検証は本番ドメインで行ってください。
手順B【アプリ】チャネルを登録する
- 左のツリーで プロジェクト を選び、プロジェクト概要の 「LINE公式アカウント連携」 セクションを開きます。
- 「+ チャネル登録」 で手順Aの4つの値(表示名は任意)を入力して登録します。
- 登録したチャネルの 「Webhook URL をコピー」 を押し、LINE Developers の Messaging API 設定の Webhook URL に貼り付けて 「検証」 を実行します(成功すればOK)。
注意
チャネルシークレットは暗号化して保存され、再表示されません。1つのプロジェクトに複数の公式アカウントを登録できます。
手順C【サイト】友だち追加ボタンを cvLineLink() 経由にする(最重要)
- LPに 共通手順 の 配布タグ を設置します(未設置の場合)。
- LPの「LINEで友だち追加」ボタンを、静的なリンクではなく 配布タグの
cvLineLink()を呼ぶ形に変更します:
<button onclick="cvLineLink('<チャネルのchannel値>')">LINEで友だち追加</button>
<チャネルのchannel値> は、アプリのチャネル一覧の 「友だち追加リンクをコピー」 で得られる URL の channel= の値です。
重要
静的な友だち追加リンク(lin.ee など)への差し替えでは動きません。 クリックIDはLPのクッキーにあり、cvLineLink() がそれをアプリへ引き渡すことで初めて紐付きます。静的リンクのままだと、友だち追加は成立してもCVはどの媒体にも送信されません(アプリの「運用状況」に「LPタグ未設置の疑い」警告が出ます)。
ボタンを押したユーザーには、LINEログインの同意画面 → 友だち追加の確認画面が表示され、完了後は元のページへ戻ります。
手順D【アプリ】どのLINEイベントをCVにするか登録する
「LINE公式アカウント連携」の 「イベント → CV マッピング」 で登録します。
- イベント種別: 友だち追加(follow)/ メッセージ受信(message)/ ポストバック(postback)など。
- マッチ条件(任意): postback の data やメッセージ本文で絞る場合は「完全一致」「前方一致」を選びます(条件なし = そのイベント全部)。
- アプリ内CV名: 例
CompleteRegistration(Meta 標準イベント名に準拠)。value(CV価値)も任意で設定できます。 - 各媒体フォルダの「コンバージョン設定」で、このアプリ内CV名 → 媒体側CVの対応付けを登録します(共通手順の手順2と同じです。媒体ごとの取得方法は各媒体ページ参照)。
注意
登録したイベントだけが送信されます(チャネル登録直後は0件)。また、マッピングを追加しても過去に受信したイベントには自動では波及しません。過去分を送りたい場合は「受信済み・未送信イベント」の 「過去分を再評価(replay)」 を実行してください(重複送信はされません)。
確認のしかた
- 運用状況(チャネル選択時に表示): 紐付け済みユーザー数・クリックID充足率・受信イベント内訳・媒体別の転送結果を確認できます。
- 転送結果の「対象外(no_match_key)」は、その媒体から流入していないため送っていない正常な動作です(この機能は流入元の媒体にだけCVを返します)。
- 最終的には各媒体の管理画面(コンバージョン計測)でCVが計上されることを確認してください。
友だち追加リンクが「400 Bad Request / Invalid redirect_uri value」になる
このボタンは静的な友だち追加リンクではなく、LINEログインを経由して友だち追加します(そうしないとクリックIDと紐付きません)。そのため、LINEログインチャネルにコールバックURLが登録されていないと、LINE側で次のエラーになります。
Invalid redirect_uri value. Check if it is registered in a LINE developers site.
アプリが送っているリダイレクトURLはエラー画面のアドレスバーに redirect_uri= として表示されています。 その値と、LINE Developers に登録した値を見比べてください。原因はほぼ次のいずれかです。
- 手順Aの4を実施していない(コールバックURLが未登録)。
- 登録先のチャネルが違う: Messaging API チャネルではなく、LINEログインチャネルの「LINEログイン設定」タブに登録します。
- 文字列が一致していない:
http/https、ポート番号、末尾スラッシュの有無、パスの綴りを確認します。 - アプリに登録したログインチャネルIDが別チャネルのもの: コールバックURLを登録したチャネルのIDと同じか、アプリのチャネル登録内容を確認します。
- 本番の
NEXT_PUBLIC_APP_URLが未設定/localhost のまま: 送られるリダイレクトURLが本番ドメインになりません。
よくある質問
- QRコードやLINE内検索から友だち追加した場合は? — クリックIDの紐付け機会がないため、Google / TikTok / Meta へはCVを返せません。Yahoo!ディスプレイ/LINE のみ、コンバージョン設定で channel_id(対象の公式アカウント)を選択しておくと、LINEのユーザーIDを使ってLINE面に限りCVを返せます。
- 同じCVが複数媒体に計上される? — 複数媒体の広告をクリックしていた場合、有効期限内のすべての流入元媒体へ返します。媒体をまたいだCV合計は重複を含む点に注意してください。
- ブロック(unfollow)もCVにできる? — 登録すれば送れてしまいます。誤設定にご注意ください。