GTMタグ1行でLINE友だち追加を計測できる仕組み【技術解説】

「GTMにタグを1行貼るだけでLINE友だち追加が計測できる」という説明を聞いて、「本当にタグ1行でできるのか？裏では何が動いているのか？」 と疑問に思った技術者向けの記事です。

結論から言うと、GTMで貼るのはフロントエンドのスニペット1つですが、その裏ではサーバー側でLINE Webhookを受信して突合する仕組みが動いています。GTMタグはあくまで「フロント側のデータ収集口」であり、計測全体の設計はクライアント＋サーバー構成です。

本記事では、GTMタグ1行でLINE友だち追加が計測できる技術的な仕組みを、実装の視点で解説します。

結論：GTMタグの役割は「パラメータ収集とクリック通知」

LINE友だち追加計測は以下の4層で動きます。

GTMタグが担当するのは1と2だけで、3と4はLINEプラットフォームと計測ツールのサーバーが担当します。「タグ1行」は便宜的な表現で、実際にはクライアントとサーバーの協調設計です。

全体アーキテクチャ

[広告クリック]
|
| (fbclid=abc付きURL)
v
[LP] ←── GTM経由でトラッキングJS読み込み
|
| - JSがURLパラメータを取得
| - Cookieに保存（ファーストパーティ）
| - セッションIDを生成
| - サーバーにPV記録
|
v
[LINEボタンタップ]
|
| - JSがクリックイベントをサーバーに送信
|   {sessionId, clickedLinkId, timestamp}
|
v
[ドメイン跨ぎ遷移] (lin.ee / line.me)
|
| ←── ここで広告パラメータは消える
|
v
[LINEアプリで友だち追加]
|
v
[LINE公式アカウント] ──────────┐
|                            |
| Webhook (follow event)    |
v                            |
[計測ツールのサーバー]           |
|                            |
| - UID を受信                |
| - 直前のクリックイベントと突合
|   (sessionId × UID 紐付け)
| - Cookieに保存したfbclid復元
|                            |
v                            |
[Meta/Google CAPI送信] ←────────┘

GTMタグが発火している間に、サーバー側では独立してWebhookを待ち受けている点がポイントです。両者が最後にsessionId × UIDで突合されます。

GTMタグが実際にやっていること

LinetraceなどのCookie方式計測ツールのGTMタグは、概ね以下のJavaScriptを実行しています（実装は各ツールにより異なります）。

処理1: URLパラメータの取得とCookie保存

// LP着地時に実行
const params = new URLSearchParams(window.location.search);
const tracked = {};

['fbclid', 'gclid', 'utm_source', 'utm_medium', 'utm_campaign',
'utm_term', 'utm_content'].forEach(key => {
if (params.has(key)) tracked[key] = params.get(key);
});

// ファーストパーティCookieに保存
document.cookie = _lt_params=${encodeURIComponent(JSON.stringify(tracked))};

max-age=2592000; path=/; SameSite=Lax;

fbclid・gclidは広告クリック時に動的に付与されるため、LP着地の瞬間に捕獲して保存することが重要です。ユーザーがリロードや別ページ遷移をしてもCookieで引き継げます。

処理2: セッションIDの発行

// サーバーにPV記録 → セッションID受け取り
fetch('https://cdn.linetrace.io/pv', {
method: 'POST',
body: JSON.stringify({
siteId: 'linetrace_xxxxx',
params: tracked,
url: window.location.href,
referrer: document.referrer
})
}).then(r => r.json()).then(data => {
localStorage.setItem('_lt_session', data.sessionId);
});

セッションIDはクライアント側で完結させず、サーバー側で採番してクライアントに返す設計が一般的です。これにより、後のWebhook突合時にサーバー側でセッションを引き当てられます。

処理3: LINEボタンクリックの検知と通知

// LINE友だち追加リンク（lin.ee/line.me）のクリックを監視
document.addEventListener('click', (e) => {
const link = e.target.closest('a[href*="lin.ee"], a[href*="line.me"]');
if (!link) return;

const sessionId = localStorage.getItem('_lt_session');
// 非同期・失敗してもクリック自体は止めない
navigator.sendBeacon('https://cdn.linetrace.io/click', JSON.stringify({
sessionId,
linkHref: link.href,
linkText: link.textContent,
pagePath: window.location.pathname
}));
});

GTMで設置する際のベストプラクティス

トリガー設定: DOM Ready推奨

GTMでLINE計測タグを配信する際、「Page View」ではなく「DOM Ready」トリガーを推奨します。

LINEボタンのクリックリスナーを設置する必要があるため、DOMが構築済みの状態で発火する必要があります。

カスタムHTMLタグとして設置

<!-- GTM → カスタムHTML タグの中身例 -->
<script src="https://cdn.linetrace.io/linetrace.js?id=linetrace_xxxxx"></script>

• async や defer は付けない（GTM自体が非同期実行のため）
• src のドメインはツール提供元のCDN。独自ドメイン埋め込みに対応していないツールもある
• サイトIDは管理画面で発行されたもの。環境（ステージング・本番）で分ける

複数タグとの共存

Meta Pixel・Google Tag・計測ツールタグの3つをGTMで管理する場合の推奨構成：

1. Consent Initialization: 同意管理タグ（あれば）
2. All Pages: Meta Pixel・Google Tag・計測ツールタグ（DOM Ready）
3. Click - Just Links: 特定のコンバージョン追跡（必要に応じて）

計測ツールのタグと広告ピクセルを同じページで同時に動かしても競合しません。各タグが独立したCookieネームスペースを使うためです。

GTMプレビューモードでのデバッグ

設定後は必ずGTMプレビューモード（Tag Assistant）で動作確認します。

確認項目

• [ ] カスタムHTMLタグが「Fired」になっている
• [ ] DOM Readyのタイミングで発火している
• [ ] cdn.linetrace.io/pv（等）へのリクエストがDevToolsで見える
• [ ] LINEボタンクリック時に /click エンドポイントへPOSTが飛ぶ
• [ ] Cookie _lt_params が書き込まれている
• [ ] LocalStorage に _lt_session が入っている

デバッグ時の典型的な失敗

• 原因: トリガー条件が合っていない。ワークスペースを公開していない。
• 対策: トリガーを「All Pages - DOM Ready」にして、GTM右上の「公開」を忘れずに実行。

• 原因: GTMタグがPage Viewタイミングで発火しており、JSがまだ完全にロードされていない。
• 対策: DOM Readyに変更。またはタグ内で DOMContentLoaded イベントを待つ。

• 原因: 動的にLINEボタンを生成しているため、イベントリスナーが設置済みボタンにしか効かない。
• 対策: document.addEventListener('click', ...) のイベント委任パターンを使う（上記の処理3参照）。

• 原因: GTM側は正常だが、LINE公式アカウントのWebhook URLを計測ツールに向けていない。
• 対策: LINE Official Account Managerの「応答設定」→「Webhook」を計測ツールのURLに差し替える。既存のLステップ・エルメを使っている場合は、計測ツール側で転送先URLを登録して経由させる。

dataLayerは使っている？

LINE計測タグで dataLayer を積極的に使うことは少ないです。理由は以下の通り。

• LINE友だち追加イベントは外部ドメイン遷移のため、クライアント側でCV完了を検知できない → dataLayer.push({event: 'line_friend_added'}) が発火するタイミングがない
• 友だち追加の成否はサーバー側のWebhookでしか判定できないため、dataLayer経由でGA4などへイベント送信しても正確性が担保されない

ただし、LINEボタンのクリックイベントを別の分析目的で dataLayer に流すことは有用です。

// クリック時にdataLayerへ
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'line_button_click',
button_location: link.closest('section')?.id,
button_text: link.textContent
});

GA4や他のアナリティクスで「どのLP・どのセクションでLINEボタンが押されたか」を集計できます。友だち追加CVの正確な計測はサーバー側に任せ、クリック分析はdataLayer/GA4で行う分業が推奨です。

サーバーサイドGTMとの関係

Server-side GTM（sGTM）を使っている組織から「LINE計測もsGTM経由にできるか？」と聞かれることがあります。

答え: できますが、メリットは限定的です。

• ✅ fbclid等のLP段階での収集はsGTMでも可能（クライアント→sGTMコンテナ経由）
• ❌ LINE Webhookの受信はsGTMのスコープ外（LINEプラットフォームが直接HTTPS POSTしてくる）
• ❌ UID突合はsGTMではなく計測ツールのサーバーで実施

つまり、LINE計測はどうしても計測ツールのサーバーが必要で、sGTMで完結はしません。iOS ITP対策や広告ピクセルのプロキシ経由配信などのメリットを狙うならsGTMを併用する価値はありますが、LINE計測自体はツールのサーバーに任せるのが現実的です。

よくある質問