エンジニアが知っておくべきマーケティングの話｜LP計測タグ・Clarityヒートマップの基本と実装

May 9, 2026

「タグ貼って」と言われて固まった話

LPを公開する直前、マーケ担当者からこう言われたことありませんか？

「このタグ、貼っといて」

渡されたのは <script>...</script> みたいなコード片。「えっと、これ何のタグ？どこに貼ればいいの？」と固まった経験、あるあるですよね。

コードは書けるのに、計測タグやヒートマップツールの世界はちょっと別ジャンル。マーケの会話で出てくる「GA4」「Clarity」「ピクセル」「タグマネ」が何を指すのか、なんとなくしか分からない──そんなエンジニアは意外と多いはず。

結論から言うとこういうことです。

計測タグの実装は、ほとんどの場合 <script> 貼り付けだけで30秒で終わる
でも、何のタグが何を計測しているのか、背景を知っていると仕事の幅が一気に広がる
特に Microsoft Clarity は完全無料のヒートマップで、エンジニアがLP運用を任された時の必修ツール
マーケと「数値の共通言語」を持てるエンジニアは、AI時代に強い

本記事は、「コードは書けるけど、マーケのタグ周りはよく分からない」エンジニア向けに、計測タグの世界を一気にキャッチアップする教養記事です。実装はもちろん、なぜそのタグが必要かまで踏み込んで解説します。

なぜエンジニアがマーケを知るべきか

本題に入る前に、なぜこの教養が大事なのか、軽く触れておきます。

「機能を作るだけ」のエンジニアは、AI時代に厳しい

AIが基本的なコードを大量生成できるようになった今、「言われた通り作る」だけのエンジニアの市場価値は相対的に下がっています。代わりに価値が上がっているのが、「ビジネスの数値で語れる」エンジニア。

「この機能を実装すると、CVRが何%上がる見込み？」
「この施策のCPAは、現状の広告と比べてどう？」
「LPのファーストビューでユーザーが離脱してる原因は？」

こういう会話に参加できるエンジニアは、優先順位の議論に呼ばれるようになる。機能の実装担当者じゃなく、事業のパートナーとして扱われるようになるんです。

計測タグはマーケとの「共通言語」

計測タグの世界を知ることは、マーケと共通言語を持つ第一歩。「GA4のイベント設計を見直したい」「Clarityで離脱箇所を確認したい」と言える/分かるだけで、会話のテンポが全く違ってきます。

ということで、本題に入りましょう。

そもそも「計測タグ」って何のためにある？

計測タグとは、ウェブサイトに訪れたユーザーの行動データを記録するためのコードです。一般的には JavaScript で書かれており、ページに埋め込むことで以下のような情報を取得できます。

誰が（流入元、デバイス、ブラウザ、地域）
いつ（日時、セッションの長さ）
どこから（広告、検索、SNS、直接アクセス）
何を見た（ページビュー、スクロール深度）
何をした（クリック、フォーム入力、購入）

サーバーログだけでは見えない世界

「アクセス数だけならNginxのログでも分かるよね？」と思うかもしれません。確かに、リクエスト数や IP アドレスは取れる。でも、計測タグじゃないと取れない情報がたくさんあります。

情報	サーバーログ	計測タグ
ページアクセス数	○	○
滞在時間	×	○
スクロール深度	×	○
ボタンクリック	×	○
離脱ポイント	△	○
流入元（広告・検索）	△（リファラ依存）	○
ヒートマップ	×	○

ようは、「マーケが知りたいユーザー行動」のほとんどは計測タグでしか取れない。だから貼る、というシンプルな話です。

LP・サイト計測タグの種類

「タグ」と一口に言っても、用途別にいくつか種類があります。代表的なのを整理しておきましょう。

1. アクセス解析タグ（GA4など）

サイト全体のトラフィックを把握するための土台。Google Analytics 4（GA4）が事実上の標準です。

解く問い：「サイトに誰が来て、何を見て、どこから去った？」
使う場面：基本的に全サイトに必須
料金：無料

2. コンバージョンタグ

広告経由で来たユーザーが、実際に申込・購入をしたかを計測。広告効果の測定に必須。

解く問い：「広告に〇〇円使ったら、何件のCV（コンバージョン）が取れた？」
使う場面：Google広告、Yahoo広告、Meta広告、各種運用
料金：無料（広告自体は有料）

3. リターゲティング（リマーケティング）タグ

サイトを訪れたが離脱したユーザーに、後で広告を出すための「足跡記録」タグ。

解く問い：「興味を持って来たけど買わなかった人にもう一度アプローチしたい」
使う場面：ECサイト、申込型LP、認知段階の商材
料金：無料（広告配信は有料）

4. ヒートマップ・セッション録画タグ

ユーザーがページのどこをクリックしたか、どこまでスクロールしたか、どんな動きをしたかを可視化。Microsoft Clarity や Hotjar が代表的。

解く問い：「LPのどこでユーザーが離脱してる？ボタンが押されない理由は？」
使う場面：LP改善、UX分析、CVR向上施策
料金：Clarityは完全無料、Hotjarは無料プランあり

5. その他（チャットボット、フォーム計測など）

用途特化型のタグも色々あります。問い合わせフォームの離脱箇所を計測するタグ、チャットボットの埋め込み、A/Bテストツールなど。基本的にはここまでの4種類を押さえておけば、LP運用のスタートラインに立てます。

Microsoft Clarity とは何者か

本記事のメインの一つ、Microsoft Clarity について深掘りします。マーケ界隈で「LPの分析ならまずClarity」と言われるくらい、ここ数年で一気に普及したツールです。

Clarityの特徴

完全無料：PVリミットも、レコーディング数の制限もなし（マイクロソフト太っ腹）
ヒートマップ：クリック、スクロール、エリアの3種類
セッション録画：ユーザーの操作をリプレイ動画で確認できる
インサイト機能：rage click（怒りのクリック）や dead click（無効なクリック）を自動検出
GA4連携：GA4のセグメントとClarityのセッションを紐付けられる
軽量：JSバンドルが比較的軽く、ページ速度への影響が小さめ

なぜマーケ界隈で人気なのか

結論、「無料なのに有料ツール並みの機能」だから。Hotjar や Mouseflow は無料プランがあるものの、PV制限や録画数制限があり、本格的に使おうとすると有料化が必要。Clarity はその制限がない時点で、選ばない理由がほぼないんです。

マイクロソフトが Clarity を無料で提供する理由は、収集した匿名化データを Bing や Microsoft Ads の改善に活用するためと言われています。ユーザーにとってはタダ、マイクロソフトにとってはデータ獲得、Win-Winの構造です。

Clarityで実際に見えるもの

「導入してみたけど、何が見えるんだろう？」と気になる人へ、主な機能をざっと紹介。

ヒートマップ

クリックヒートマップ：どこがクリックされているか、色の濃淡で可視化
スクロールヒートマップ：ページのどこまで読まれているか
エリアヒートマップ：どのエリアにユーザーの注意が集中しているか

これだけで、「LPのこのCTAボタン全然押されてない…」「ファーストビューで70%が離脱してた…」みたいな気付きが得られます。

セッションレコーディング

個別ユーザーの操作を動画で確認できる機能。匿名化された録画なので、個人情報は保護されつつ、行動だけを追える。

これが特に効くのは UI/UXのバグ発見。「ユーザーがフォームの送信ボタンを連打してる」「商品画像のところをずっと触ってる（タップできると思ってる）」みたいな現象が、開発側の想定していない動きとして可視化されます。

インサイト（自動検出）

Rage click：同じ場所を連打している（思い通りに動かないストレス）
Dead click：クリックしても何も反応しない要素
Excessive scroll：行ったり来たりの過剰スクロール
JavaScript エラー：実際のユーザー環境で起きているJSエラー

JavaScript エラーの検出は、エンジニア視点でも超重宝。本番でしか起きないエラーを、ユーザーの実環境込みで把握できるのは、Sentryなどの専用ツールに頼らずとも、Clarityで十分な場合があります。

HTML直推でClarityを埋め込む手順

実装は本当に簡単。Clarity 公式サイトでアカウント作成→プロジェクト作成→タグコピペ、で完了します。

Step 1：Clarity アカウント作成

clarity.microsoft.com にアクセスし、Microsoft アカウント・Google アカウント・Facebook アカウントのいずれかでログイン。新規プロジェクトを作成し、サイトURLを登録します。

Step 2：トラッキングコードを取得

プロジェクト作成後、管理画面で 「Settings」→「Setup」 から、トラッキングコードがコピー可能。コードはこんな形をしています。

<!-- Microsoft Clarity -->
<script type="text/javascript">
    (function(c,l,a,r,i,t,y){
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "YOUR_PROJECT_ID");
</script>

YOUR_PROJECT_ID の部分はプロジェクトごとに固有のIDが入っています。このIDは、コードを直接ハードコーディングするのではなく、環境変数や設定ファイル経由で管理するのが本来は望ましい設計です（参考：ハードコーディングって何？良くないって言われるけど何で？）。

Step 3：<head>タグに貼り付け

取得したコードを、計測したいページの <head> タグ内に貼り付けます。HTML直推のシンプルな例ならこれだけ。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルLP</title>

  <!-- ↓ ここにClarityタグを貼る -->
  <script type="text/javascript">
    (function(c,l,a,r,i,t,y){
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "abcd1234efgh");
  </script>

</head>
<body>
  <h1>LPコンテンツ</h1>
</body>
</html>

Step 4：動作確認

サイトを公開（またはローカルで起動）して、自分でアクセスしてみる。Clarityの管理画面で 「Live」 を見ると、リアルタイムで自分のセッションが記録されているのが確認できます。

データの蓄積は数分後から開始され、ヒートマップは1〜2時間程度で見られるようになります。

一緒に貼ることが多い他のタグ

LP運用では、Clarity単体じゃなく他の計測タグと併用するのが一般的。代表的なものを軽く紹介。

GA4（Google Analytics 4）

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

Google広告コンバージョンタグ

<!-- Event snippet for 申込 conversion -->
<script>
  gtag('event', 'conversion', {
    'send_to': 'AW-XXXXXXXXX/AbC-D_efG-h12_34-567',
    'value': 1.0,
    'currency': 'JPY'
  });
</script>

こちらは「申込完了ページ」など、CVが発生するページにだけ追加で埋め込む形が一般的です。

Meta（Facebook/Instagram）ピクセル

<!-- Meta Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'YOUR_PIXEL_ID');
fbq('track', 'PageView');
</script>

「全部貼ったら重くならない？」の現実

主要な計測タグは async 属性付きで非同期読み込みされるため、ページ表示自体への影響は限定的です。とはいえ、5〜10種類のタグを無計画に貼ると、JS実行コストが積み上がってCore Web Vitalsに影響するのも事実。

気になる場合は SEO Speed Test のようなツールで実測してみるのが一番確実です。

タグ管理の進化形：GTM（さらっと）

計測タグが増えてくると「全部HTMLに直接貼るのキツい…」となります。そこで登場するのが Google Tag Manager（GTM）。

GTMで何が変わるか

GTMタグだけHTMLに貼る（1つだけ）
その後のタグ管理は全部GTM管理画面でGUI操作
エンジニアの手を借りずにマーケがタグを追加・削除できる
条件分岐やトリガー設定が柔軟（特定ページのみ発火、ボタンクリック時のみ計測など）

つまり、「タグはHTMLに直書きじゃなく、GTM経由で管理する」という選択肢があります。

使い分けの目安

LP単体・タグ数も少ない→ HTML直推でOK（本記事の方法）
サイト規模大・タグ数も多い・マーケが頻繁に変更→ GTM導入
GTMで管理しつつ、Clarity だけは別で直推→ 軽量化重視

「LP1個ならHTML直推、複数サイト or 運用頻度高めならGTM」というのが現実的な選択基準です。

プライバシー・コンプライアンスの基礎

計測タグは便利だけど、ユーザーの行動データを収集しているので、法的な配慮が必要です。エンジニアが押さえておくべきポイントを軽く触れておきます。

主な関連法規

個人情報保護法：日本国内のユーザーデータ取り扱い
改正電気通信事業法（2023年〜）：Cookie等の利用者情報の外部送信に関する通知義務
GDPR：EU圏ユーザー向け、Cookie同意必須
CCPA：カリフォルニア州のユーザー向け

最低限やっておくべきこと

プライバシーポリシーに「Clarity / GA4 等の利用」を明記
Cookie利用について、初回訪問時にバナーで通知（同意取得）
ユーザーがオプトアウトできる仕組みを用意（最低限ガイドリンクを掲載）
必要に応じて Clarity の「マスキング」機能で機密情報を非表示化

セキュリティ・プライバシー周りの基礎を押さえたい人は、DDoS攻撃とは？開発者が知るべきセキュリティの基本あたりで土台を作っておくと、計測タグの世界もより理解しやすくなります。

マーケと会話できるエンジニアは強い

本記事を最後まで読んだあなたは、もう「タグ貼って」と言われて固まることはありません。それどころか、こんな会話に参加できるはずです。

「ClarityのヒートマップでファーストビューのCTA、全然見られてないっぽい」
「GA4のイベント設計を見直して、フォーム入力途中の離脱率を計測したい」
「Meta広告のコンバージョンタグ、サンキューページにちゃんと発火してる？」
「タグ増えてきたから、そろそろGTMに移行する？」

これだけで、マーケ担当者との会話のテンポが激変します。エンジニアが「数値の世界」に踏み込むだけで、開発の優先順位の議論が「機能の有無」から「数値インパクト」に変わる。事業のパートナーとして扱われるエンジニアになれるんです。

まとめ：実装は30秒、理解は一生モノ

本記事のポイントを整理します。

計測タグの世界には4種類：アクセス解析、CV、リターゲティング、ヒートマップ
Microsoft Clarity は無料で最強：ヒートマップ、セッション録画、JSエラー検知まで全部入り
HTML直推の実装は30秒：<head> に <script> 貼るだけ
GTMはタグ管理の進化形：規模・運用頻度で使い分け
プライバシー対応は必須：プライバシーポリシー記載、Cookie同意、改正電気通信事業法対応
マーケと共通言語を持てるエンジニアは強い：AI時代の必修スキル

計測タグを貼るのは30秒で終わる単純作業。でも、「なぜそのタグが必要で、何が見えていて、ビジネスのどんな問いに答えるのか」を理解しているエンジニアは、その先の改善提案まで踏み込めます。

AIに「LPコードを書いて」と頼むだけでサイトができる時代だからこそ、「数値で語れる」エンジニアの価値は跳ね上がっています。次にLP公開のタスクが来たら、ぜひClarityをサクッと仕込んで、ユーザーの動きを観察してみてください。「あ、ここで離脱してたんだ」という気付きが、次の機能改善の優先度を決めるはずです。