2026年9月25日

2026年9月25日

WordPressにHubSpotトラッキングコードを設置する方法(公式プラグイン・手動・GTM)

WordPressにHubSpotのトラッキングコードを設置する方法は、主に「HubSpot公式プラグインを使う」「子テーマやmu-pluginでコードを出力する」「Googleタグマネージャー(GTM)で配信する」の3つです。どれを選んでも、コードはサイト全体に1回だけ読み込ませること、設置後にHubSpot側で計測が始まったかを確認することが共通の要点です。この記事では、トラッキングコードでできること、3つの設置方法の違いと手順、Cookie同意への対応、正しく動いているかの確認方法を説明します。

HubSpotトラッキングコードでできること

HubSpotのトラッキングコードは、アカウント(ポータル)ごとに発行されるJavaScriptです。サイトに設置すると、次のようなことができるようになります。

  • 訪問者のページ閲覧を記録し、HubSpotのレポートで流入元やページ別の閲覧数を見る
  • HubSpotのフォームで問い合わせた人(コンタクト)と、それ以前の閲覧履歴をひも付ける
  • HubSpotのポップアップやチャット、Cookieバナーなどの機能をサイトに表示する

フォーム送信で個人を識別できるのは、トラッキングコードが閲覧時にCookieを発行しているためです。逆に言えば、トラッキングコードがないページの閲覧はコンタクトの履歴に残りません。

コードはおおむね次の形をしています。your-hub-idの部分にアカウントのHub IDが入り、データセンター(米国・EUなど)によって読み込み先のドメインが異なる場合があります。実際のコードは、HubSpotの設定画面にあるトラッキングコードの項目からコピーしてください。画面の場所や名称は更新で変わることがあります(2026年10月現在)。

<!-- 形式の例。実際は HubSpot の設定画面に表示されるコードを使う -->
<script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/your-hub-id.js"></script>

方法1:HubSpot公式プラグインを使う

WordPress.orgのプラグインディレクトリには、HubSpotが提供する公式プラグイン(HubSpot All-In-One Marketing など、名称は変わることがあります)があります。プラグインを有効化し、画面の案内に沿ってHubSpotアカウントに接続すると、トラッキングコードが全ページに自動で出力されます。

この方法の利点は、コードを触らずに済むことと、WordPressの管理画面からHubSpotのフォームやチャットを扱えることです。一方で、使わない機能のメニューも追加されるため、トラッキングだけが目的ならやや大げさに感じるかもしれません。

注意点として、公式プラグインを入れたうえで手動やGTMでもコードを入れると、二重に読み込まれます。HubSpotのレポートで閲覧数が不自然に多い場合は、まず二重設置を疑ってください。

方法2:子テーマまたはmu-pluginで出力する

プラグインを増やしたくない場合は、コードで出力します。テーマのheader.phpやfooter.phpに直接貼ると、テーマ更新で消えたり、テーマ変更時に設置漏れが起きたりするため、子テーマのfunctions.phpかwp-content/mu-plugins/のファイルに書くのがおすすめです。HubSpotは</body>の直前への設置を案内しているため、wp_footerで出力します。

<?php
/**
 * Plugin Name: HubSpot Tracking Code
 * Description: HubSpot のトラッキングコードをフロントエンドに出力する
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

// Hub ID は HubSpot の設定画面で確認した数字に置き換える(ダミー値)
define( 'MYSITE_HUBSPOT_HUB_ID', 'your-hub-id' );

add_action( 'wp_footer', function () {
	// 管理者・編集者の閲覧は計測しない(必要なければこの条件を外す)
	if ( is_user_logged_in() && current_user_can( 'edit_posts' ) ) {
		return;
	}

	wp_print_script_tag(
		array(
			'id'    => 'hs-script-loader',
			'src'   => 'https://js.hs-scripts.com/' . rawurlencode( MYSITE_HUBSPOT_HUB_ID ) . '.js',
			'async' => true,
			'defer' => true,
		)
	);
}, 20 );

wp_print_script_tag()はWordPress 5.7で追加された関数で、属性を配列で渡すとエスケープしたうえで<script>タグを出力します。HubSpotのコードにはid="hs-script-loader"が付いているため、その属性も残しています。EUデータセンターのアカウントなどで読み込み先のドメインが違う場合は、HubSpotの画面に表示されたURLに合わせてください。

ログイン中の編集者を除外しているのは、記事の確認作業などで自分の閲覧が計測に混ざるのを防ぐためです。HubSpot側にも、特定のIPアドレスを計測から除外する設定があります。

作業前にはバックアップを取り、ステージング環境で表示とエラーの有無を確認してから本番に反映してください。

方法3:Googleタグマネージャーで配信する

すでにGTMでタグを管理しているなら、GTMのカスタムHTMLタグにHubSpotのコードを貼り、全ページを対象にするトリガーで配信する方法もあります。タグの管理場所がまとまり、同意管理ツールとの連動もGTM側で設定できます。

ただし、GTMのコンテナが読み込まれた後にHubSpotのコードが動くため、ほんのわずかに計測の開始が遅れます。また、GTMのプレビューで動作を確認してから公開することを忘れないようにしましょう。

キャッシュ・高速化プラグインとの相性

WP RocketやLiteSpeed Cacheなどの高速化プラグインには、JavaScriptの実行を遅らせる機能があります。HubSpotのコードがその対象になると、ユーザーが操作するまで計測が始まらず、すぐに離脱した訪問が記録されなかったり、チャットやポップアップの表示が遅れたりします。計測の取りこぼしが気になる場合は、hs-scripts.comなどHubSpotの読み込み先を遅延の除外対象に加えてください。

コードを設置・変更したあとは、ページキャッシュとCDNのキャッシュを削除してから確認します。

Cookie同意への対応

HubSpotのトラッキングコードは、訪問者を識別するためにCookie(hubspotutkなど)を使います。プライバシーポリシーにHubSpotを利用していること、取得する情報、利用目的を記載してください。日本の電気通信事業法の外部送信規律に該当する事業者は、送信先や目的の公表も検討対象になります。

同意の取り方は主に2つです。

  • HubSpotのCookieバナー機能を使う:HubSpotの設定でバナーを有効にすると、同意前はトラッキングCookieを使わないよう制御できます。
  • 他の同意管理ツール(CMP)を使う:CMPで同意が得られるまでHubSpotのコードを読み込まない、またはHubSpotが用意しているプライバシー関連のJavaScript APIで同意状態を伝えます。

訪問者が計測を拒否した場合に備えて、HubSpotのトラッキングを止めるAPIも用意されています。API名や動作はHubSpotの開発者向けドキュメントで最新の情報を確認してください。

// 例: 訪問者が計測を拒否したときに呼ぶ(HubSpot のドキュメントで仕様を確認する)
var _hsq = window._hsq = window._hsq || [];
_hsq.push(['doNotTrack']);

正しく設置できたか確認する

  1. ページのソースを確認:ブラウザでページを開き、ソースにhs-script-loaderが1回だけ出ているか確認します。
  2. ネットワークタブを確認:開発者ツールのネットワークタブで、hs-scripts.comやhs-analytics.netなどHubSpot関連のファイルが読み込まれているか、エラーになっていないかを見ます。
  3. Cookieを確認:開発者ツールのアプリケーション(ストレージ)タブで、hubspotutkなどのCookieが発行されているか確認します。同意管理を入れている場合は、同意後に発行されることを確かめます。
  4. HubSpot側で確認:HubSpotの設定画面にはトラッキングコードの設置状況を確認する機能があります。レポートへの反映には時間がかかることがあるので、少し待ってから閲覧が記録されているかを見ます。
  5. フォーム送信テスト:テスト用のメールアドレスでHubSpotフォームを送信し、作成されたコンタクトに送信前のページ閲覧が残っているか確認します。

閲覧数が多すぎる場合は二重設置、まったく記録されない場合は高速化プラグインの遅延、同意管理の設定、ログイン除外の条件を順に確認すると、原因を絞り込みやすくなります。

まとめ

  • HubSpotトラッキングコードは、公式プラグイン・子テーマやmu-plugin・GTMのいずれかで、サイト全体に1回だけ読み込ませます。
  • コードで出力する場合はwp_footerとwp_print_script_tag()を使い、Hub IDと読み込み先は自分のアカウントの表示に合わせます。
  • 高速化プラグインのJavaScript遅延と二重設置が、計測トラブルのよくある原因です。
  • Cookieを使うため、プライバシーポリシーへの記載と同意管理の方針を決めてから設置してください。

お気軽にご相談ください

お見積りへ お問い合わせへ
▲