HubSpotのトラッキングコードは、導入時に最初にやるべき設定です。これを設置しないと、サイト訪問者の行動データが一切取れず、HubSpotがCRMとして機能しません。この記事では、取得から設置・動作確認まで、実際の手順を解説します。
Growth with Your Expertise.
HubSpot Starter 導入支援
スタートアップ企業（個人〜小規模チーム）向けにHubSpotの導入支援と運用サポートのコンサルティングを行っています。
トラッキングコードとは何をするのか
HubSpotのトラッキングコードは、ウェブサイトに設置するJavaScriptの1行です。このコードがページに読み込まれることで、以下のデータがHubSpotに蓄積されます。
- どのページが、何回、誰に閲覧されたか
- 訪問者がどこから来たか（検索・広告・SNS・直接アクセスなど）
- コンタクトがフォーム送信前にどのページを見ていたか
- リピート訪問者の行動履歴
単なるアクセス解析ツールとしてではなく、「コンタクトと行動を紐づける」ためのコードです。フォームが送信された瞬間に、それまでの匿名訪問の履歴がそのコンタクトに紐づきます。
ステップ1：トラッキングコードを取得する
操作手順：
- HubSpotにログインし、右上の⚙（設定）をクリック
- 左サイドバーから「トラッキングコード」を選択
- 表示されたJavaScriptコードをコピー
コードは以下のような形式です。
<!-- Start of HubSpot Embed Code -->
<script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/XXXXXXXX.js"></script>
<!-- End of HubSpot Embed Code -->XXXXXXXXの部分はあなたのHubSpotポータルIDです。アカウントごとに異なります。
ステップ2：設置する（WordPress / 手動 の場合別）
WordPressの場合
方法A：HubSpot公式プラグイン（最もかんたん）
WordPress管理画面「プラグイン → 新規追加」で「HubSpot」を検索してインストールすると、プラグインがトラッキングコードを自動で全ページに設置します。手動でコードを触る必要がありません。
方法B：「Insert Headers and Footers」プラグイン（コード編集なし）
- 「Insert Headers and Footers」プラグインをインストール・有効化
- WordPress管理画面「設定 → Insert Headers and Footers」を開く
- 「Scripts in Header」欄にHubSpotのトラッキングコードを貼り付けて保存
方法C：functions.phpに追記（テーマ編集）
function add_hubspot_tracking_code() {
?>
<script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/あなたのポータルID.js"></script>
<?php
}
add_action( 'wp_head', 'add_hubspot_tracking_code' );WordPress以外（HTML直書き・Squarespace・Webflowなど）
サイトのすべてのページで共通の<head>タグ内にトラッキングコードを貼り付けます。
<head>
<meta charset="UTF-8">
<!-- その他のheadタグ -->
<!-- HubSpot Tracking Code -->
<script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/XXXXXXXX.js"></script>
</head>Squarespace・Webflowなどのノーコードツールでは「カスタムコード（<head>タグ）」の設定欄があるので、そこに貼り付けます。
外部の制作会社に管理を委託している場合
制作会社に以下を伝えてください。
「HubSpotのトラッキングコードを、全ページの<head>タグ内に設置してください。」
コードをそのまま共有すれば、ほとんどの制作会社は対応できます。設置ページはTOP・ランディングページだけでなく、全ページです。これが重要です。
ステップ3：設置の確認方法
設置後、正しく動作しているか確認します。
確認方法A：HubSpotのトラッキングコード画面で確認
「設定 → トラッキングコード」の画面で、サイトのURLを入力すると「コードが検出されました」という表示が出ます。
確認方法B：ブラウザの開発者ツールで確認
- 設置したページをChromeで開く
- F12（開発者ツール）→「Network」タブを開く
- ページを再読み込みして「hs-scripts」を検索
js.hs-scripts.com/XXXXXXXX.jsが読み込まれていれば設置成功
確認方法C：翌日以降にアナリティクスデータを確認
HubSpotのダッシュボードで「レポート → トラフィックアナリティクス」を開き、アクセスデータが入ってきていれば正常に動作しています。データの反映には数時間かかる場合があります。
よくある設置ミス
ミス1：一部のページにしか設置していない
ランディングページや問い合わせページだけに設置するケースがあります。訪問者の全行動を追跡するには、全ページへの設置が必要です。
ミス2：</body>タグの直前に設置している
HubSpotのトラッキングコードは<head>タグ内への設置が推奨されています。</body>前でも動作しますが、フォーム送信のタイミングによってはデータが欠けることがあります。
ミス3：重複設置
プラグインでトラッキングコードが自動設置されているのに、さらに手動でも設置してしまうと2重になります。HubSpotのトラッキングコード確認画面で「2つのコードが見つかりました」という警告が出ることがあります。重複している場合はどちらか一方を削除してください。
トラッキングコード設置後にできること
設置が完了すると、HubSpotで以下の情報が取れるようになります。
| データ | 確認できる場所 |
|---|---|
| ページごとのセッション数・直帰率 | レポート → トラフィックアナリティクス |
| 流入元（検索・広告・直接など）の分布 | レポート → トラフィックアナリティクス |
| コンタクトの訪問ページ・閲覧回数 | 各コンタクトのタイムライン |
| フォーム送信前の訪問履歴 | 各コンタクトのタイムライン |
特に、「フォームを送信したコンタクトが、最初にどのページから来て、何ページ閲覧してから送信したか」が分かるのは、HubSpotトラッキングならではのデータです。
HubSpot Starter 導入支援・運用サポート
HubSpotのトラッキングコード設置は、HubSpot活用の出発点です。Wordpressなら公式プラグインで5分、手動設置でも1行のコードを貼り付けるだけで完了します。
設置後すぐにデータが見えるわけではありませんが、1〜2日後には訪問者データが蓄積され始めます。
当社では、WordPressへのトラッキングコード設置・フォーム連携の設定代行も行っています。
ご依頼・相談受付
ご依頼は下記のフォームから受付けております。
お気軽にご連絡ください。
