AIHubSpot2026.03.14
この記事を読んでほしい人
-
HubSpotを導入したばかりのマーケター トラッキングタグの貼り方がわからない → この記事で設置手順と確認方法を理解できます
-
GTMで複数のタグを管理している担当者 HubSpotタグのGTM設定手順が不明 → GTM経由の具体的な設定手順とAI活用方法を習得できます
-
GA4とHubSpotを併用したいWeb担当者 両ツールの違いと共存設定がわからない → 発火順序や使い分けまで理解できます
-
AIを業務効率化に活用したいビジネスパーソン AIでどう設定作業が楽になるか知りたい → コピペで使えるプロンプト例を取得できます
-
WordPress・Next.js等でサイト運営している開発者 環境ごとの最適な設置方法を知りたい → CMS別の設置パターンとAI活用のコツを把握できます
推奨AI：Claude Code
この記事で紹介するAI活用の手順には、Claude Codeの使用を推奨します。Claude Codeはターミナル上でファイル操作やコマンド実行まで行える実行型AIのため、トラッキングコードの設置箇所の特定、コードの挿入、GTM設定の生成、エラー診断までを一気通貫で対応できます。「AIへの質問例」に記載のプロンプトは、Claude Codeでそのまま使用できます。
この記事で紹介するAI活用の手順には、Claude Codeの使用を推奨します。Claude Codeはターミナル上でファイル操作やコマンド実行まで行える実行型AIのため、トラッキングコードの設置箇所の特定、コードの挿入、GTM設定の生成、エラー診断までを一気通貫で対応できます。「AIへの質問例」に記載のプロンプトは、Claude Codeでそのまま使用できます。
HubSpotのトラッキングタグとは
HubSpotのトラッキングタグ（トラッキングコード）とは、自社サイトに設置する短い計測用コードです。一度設置するだけで、「誰がどのページを見たか」「どこから来たか」といった訪問者の行動データをHubSpotに自動で蓄積できるようになります。
- ページビュー・セッション・流入元などのアクセス解析
- HubSpotフォームの送信・コンバージョン記録
- 既存コンタクトの再訪問をCRMで検知（リード育成に活用）
- チャットウィジェットやポップアップの表示制御
- カスタムイベントによる詳細な行動トラッキング
💡
ポイント：HubSpotのトラッキングタグはGA4（Googleアナリティクス4）と共存できます。どちらか一方を選ぶ必要はありません。
なぜAIを活用するのか
トラッキングタグの設定は「どこに貼るか」「既存コードと競合しないか」「GTMのトリガー設定が正しいか」といった細かい判断が連続します。ここにAI（ChatGPT・Claude等）を組み合わせると、次のメリットが生まれます。
01
コードの確認・診断を瞬時に
既存のHTMLコードをAIに貼り付けるだけで「</body> 直前に挿入するべきか、<head> 内に入れるべきか」を即座に判断してもらえます。
02
GTMの設定手順を自動生成
「このタグをGTMで管理したい」とAIに伝えると、タグ設定・トリガー条件・変数の設定値まで具体的に指示してくれます。
03
エラーの原因切り分け
「HubSpotのライブチャットが表示されない」といったトラブルをコピペするだけで、競合しているJSや設定ミスを特定してもらえます。
04
環境別の手順を即時取得
WordPressやNext.jsなど、CMSの種類を伝えれば、プラグイン経由なのかfunctions.phpなのかを含め、その環境に最適な設置手順を生成してもらえます。
設置方法の選び方
HubSpotのトラッキングタグ設置には大きく3つの方法があります。結論として、GTM（Google Tag Manager）経由での設置を推奨します。
| 方法 | 難易度 | 管理のしやすさ | 推奨ケース |
|---|---|---|---|
| 直接埋め込み | 低 | 中 | 小規模・タグ数が少ない・CMSなし |
| GTM経由推奨 | 中 | 高 | 複数タグ管理・GA4との併用・マーケターが管理 |
| CMSプラグイン | 低 | 中 | WordPress・Wix・Shopify等のCMS使用時 |
- タグの一元管理：HubSpot・GA4・広告タグなど、すべてのマーケティングタグをGTMのダッシュボード1つで管理できます。タグの追加・変更・削除にHTMLの編集が不要になり、エンジニアに依頼する工数も削減できます
- 発火順序のコントロール：GA4との併用時に優先度（Priority）を設定でき、コンバージョン計測の重複や取りこぼしを防げます。直接埋め込みでは発火順序の制御が困難です
- プレビュー・デバッグが容易：GTMのプレビューモードでタグの発火状況をリアルタイムに確認でき、本番公開前にテストが完結します
- バージョン管理と安全なロールバック：GTMは変更履歴を自動記録するため、設定ミスがあっても即座に前の状態に戻せます。直接埋め込みでは誤削除やコード破損のリスクが残ります
- マーケター自身で運用可能：初期設定さえ完了すれば、以降はコードを書かずにGTM管理画面からタグの追加・条件変更が可能。マーケティングチーム主導で運用を回せる体制が作れます
⚠️
非HubSpotフォームのデータ取り込みに注意：HubSpotのトラッキングタグには、サイト上のフォーム送信を自動検知してCRMに取り込む「非HubSpotフォーム収集」機能が含まれています。そのため、Contact Form 7やGoogleフォームなどHubSpot以外のフォームを使用している場合、そのデータが意図せずHubSpotに取り込まれてしまうことがあります。HubSpotフォームへの移行が完了していない段階でタグを設置する際は、HubSpotの「設定 → フォーム → 非HubSpotフォーム」からこの機能をオフにするか、取り込み対象を制御してください。タグの設置順序としては、①まずHubSpotフォームを導入・設定 → ②その後にトラッキングタグを全ページへ展開、という流れが安全です。
AIへの質問例
私のサイトはNext.js 14で構築されています。 HubSpotのトラッキングタグをGTM経由で設置したいのですが、 最も適切な方法を教えてください。
直接埋め込みの手順（AI活用）
1
HubSpotでトラッキングコードを取得する
HubSpotポータルにログインし、「設定」→「トラッキングとアナリティクス」→「トラッキングコード」と進みます。表示されるスニペットをコピーしてください。
HTML — HubSpotトラッキングコード（サンプル）
<!-- HubSpot Tracking Code --> <script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/YOUR_PORTAL_ID.js" ></script>
2
AIに設置箇所を確認してもらう
取得したコードと自分のHTMLを合わせてAIに貼り付け、以下のようなプロンプトで設置箇所を確認します。
AIへのプロンプト例
以下のHTMLに、HubSpotのトラッキングコードを正しく設置してください。 既存のスクリプトと競合がないか確認し、 最適な挿入位置を教えてください。 【あなたのHTMLをここに貼る】 HubSpotコード： 【HubSpotから取得したスニペットをここに貼る】
3
HTMLへ挿入する
基本的にはすべてのページの </body> タグ直前（または </head> 内）に貼り付けます。
HTML — 推奨設置箇所
<!-- 他のスクリプトの直前 --> <script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/YOUR_PORTAL_ID.js" ></script> </body>
⚠️
注意：
YOUR_PORTAL_ID は自分のHubSpotポータルIDに置き換えてください。HubSpotの管理画面 →「設定」→ ポータルID で確認できます。GTM経由の手順（AI活用）
GTM（Google Tag Manager）経由で設置すると、複数のタグを一元管理できるため、マーケティング施策の変更に素早く対応できます。
1
GTMで「新しいタグ」を作成
GTMのワークスペース →「タグ」→「新規」をクリックし、タグ設定パネルを開きます。
2
タグタイプを「カスタムHTML」に設定
HubSpotは標準テンプレートに含まれていないため、「カスタムHTML」を選択し、HubSpotのスニペットをそのまま貼り付けます。
3
トリガーを「All Pages」に設定
トリガーに「All Pages（ページビュー）」を設定することで、全ページでHubSpotタグが発火します。
4
プレビューで動作確認 → 公開
GTMのプレビュー機能でタグが正しく発火しているか確認したうえで、「公開」ボタンをクリックします。
AIへのプロンプト例（GTM設定）
GTMでHubSpotのトラッキングコードを設定したいです。 以下の情報をもとに、GTMの「タグ設定」「トリガー設定」 「変数設定」の具体的な手順を教えてください。 - サイト種類：Next.js 14（Vercel） - HubSpotポータルID：XXXXXXXX - 既存タグ：GA4 - 目的：全ページでHubSpotタグを発火させたい
GA4との違いと併用設定
「GA4も入れているのに、なぜHubSpotのトラッキングタグも必要なの？」——これはよく受ける質問です。両者は分析の単位がまったく異なります。
GA4は「ID単位」、HubSpotは「人単位」の分析
GA4はクッキーやデバイスIDをもとにした匿名のID単位で計測します。「先週、料金ページを300人が訪問した」といったサイト全体のトレンドや集計分析が得意な一方、「その300人が具体的に誰なのか」は原則としてわかりません。
一方、HubSpotのトラッキングタグはフォーム送信などをきっかけにCRMのコンタクトと紐付けられ、実在の人物単位で行動を記録します。「山田様（株式会社〇〇）が今日、料金ページを3回訪問した」というレベルまで把握できるため、インサイドセールスやリードナーチャリングに直結した情報として活用できます。
| 比較項目 | GA4 | HubSpot トラッキング |
|---|---|---|
| 計測単位 | 匿名ID（クッキー / デバイスID） | CRMコンタクト（実在の人物） |
| 得意な分析 | サイト全体のトレンド・集計 | 個人レベルの行動追跡 |
| 活用シーン | マーケティング施策のKPI管理 | インサイドセールス・リード育成 |
| 個人特定 | 原則不可 | フォーム送信後に紐付け可能 |
| CRM連携 | 別途設定が必要 | ネイティブ統合（自動） |
GA4でサイト全体のトレンドを把握しながら、HubSpotで「具体的に誰が何回訪問しているか」を確認してアクションにつなげる——この2つは競合するツールではなく、分析の粒度が異なる補完関係にあります。
GA4との技術的な併用設定（発火順序）
HubSpotトラッキングとGA4は共存できますが、GTMを使う場合は発火順序に注意が必要です。
✅
推奨設定：GA4タグの発火優先度（Tag firing priority）を「1」、HubSpotタグを既定の「0」に設定します。GTMでは優先度の数値が大きいタグから先に発火するため、これでGA4→HubSpotの順になります。
GTM発火順序のフロー
1
ページロード開始
2
GTMコンテナ読み込み
3
GA4タグ発火（Priority 1）
4
HubSpotタグ発火（Priority 0）
5
両データの正常計測を確認
AIへのプロンプト例
GTMでGA4とHubSpotのトラッキングタグを併用しています。 コンバージョンの二重カウントや取りこぼしを防ぐために、 タグの発火順序やトリガー設定で注意すべき点を教えてください。
動作確認の方法
設置後は必ず以下の方法で動作を検証しましょう。
1
HubSpotのトラッキングコード検証ツール
HubSpotの「設定 → トラッキングとアナリティクス → トラッキングコード」を開き、「トラッキングコードを検証」欄にURL（httpまたはhttps付き）を入力して［URLを検証］をクリックします。
2
ブラウザのデベロッパーツール
Networkタブで hs-scripts.com へのリクエストが発生しているか確認します。
3
GTMプレビューモード
GTM経由の場合、プレビューモードでタグの発火状況をステップごとに確認できます。
4
AIによるエラー診断
想定通りに動かない場合は、エラーメッセージをAIに貼り付けると原因を素早く特定できます。
よくある質問（FAQ）
HubSpotのトラッキングタグは無料プランでも使えますか？
はい、HubSpotの無料CRMプランでもトラッキングコードを取得・使用できます。ページビューの計測やフォームコンバージョンの記録は無料プランから利用可能です。
WordPressに設置する場合の最適な方法は？
WordPressの場合、HubSpot公式プラグイン「HubSpot – CRM, Email Marketing, Live Chat, Forms & Analytics」を使うのが最も簡単です。プラグインをインストールしてHubSpotアカウントと連携するだけで、トラッキングコードが自動的に全ページに挿入されます。プラグインを使わない場合は、テーマの header.php または functions.php に直接コードを追加することも可能です。
タグを設置してもHubSpotにデータが反映されません
データが反映されない場合、以下の点を順番に確認してください。①ブラウザのNetworkタブで hs-scripts.com へのリクエストが成功しているか ②ポータルIDが正しいか ③広告ブロッカーやプライバシーツールがスクリプトをブロックしていないか ④GTM経由の場合、タグが正しく「発火済み」になっているか。これらの情報をAIに伝えると、原因の切り分けを手伝ってくれます。
複数のサイトにまたがって使えますか？
はい、同一のHubSpotポータルIDのトラッキングコードを複数のドメインに設置することで、クロスドメインでのトラッキングが可能です。HubSpotの「設定 → トラッキングとアナリティクス → トラッキングコード → 追加のサイトドメイン」から対象ドメインを追加してください。
GA4と同時に使うとサイト表示速度に影響しますか？
HubSpotのトラッキングコードは async defer 属性で読み込まれるため、ページのレンダリングをブロックしません。GA4との併用でも体感速度への影響はほとんどありません。ただし、大量のサードパーティスクリプトを使用している場合は、GTMのタグ発火順序を最適化することでパフォーマンスを維持できます。
Next.jsやReactのSPAサイトでも正しく動作しますか？
はい、HubSpotのトラッキングコードはSPA（Single Page Application）にも対応しています。ページ遷移時にURLの変更を自動検知し、ページビューを記録します。Next.jsの場合は、_app.tsx や layout.tsx の <Script> コンポーネントで読み込むのが推奨です。
GDPR・個人情報保護法への対応は必要ですか？
はい、GDPRやePrivacy指令の対象地域のユーザーがアクセスする場合、Cookie同意バナーの設置が必要です。HubSpotにはCookieバナー機能が組み込まれており、「設定 → プライバシーと同意」から有効化できます。同意を得るまでトラッキングを遅延させる仕組みも標準で備わっています。
HubSpot以外のフォームのデータが勝手に取り込まれてしまいます
HubSpotのトラッキングタグには「非HubSpotフォーム収集」機能があり、サイト上のフォーム送信を自動検知してCRMに取り込む仕組みが含まれています。Contact Form 7やGoogleフォームなどHubSpot以外のフォームを使用中の場合、意図しないデータ取り込みが発生することがあります。「設定 → フォーム → 非HubSpotフォーム」から機能をオフにするか、取り込み対象のページやフォームを限定してください。HubSpotフォームへの移行前にタグを設置する場合は、特にこの設定を確認することが重要です。
まとめ
- HubSpotのトラッキングタグは無料CRMでも利用可能。訪問者行動をCRMに自動蓄積する基盤となる
- 設置方法は「直接埋め込み」「GTM経由」「CMSプラグイン」の3パターン。一元管理・発火順序制御・バージョン管理の観点からGTM経由を推奨
- AIを活用することで、設置箇所の判断・GTM設定の生成・エラー診断を大幅に効率化できる
- GA4とHubSpotは競合せず補完関係。GA4はサイト全体のトレンド、HubSpotは個人レベルの行動追跡が得意
- GTMでの併用時はGA4の優先度を1、HubSpotを0（既定）に設定する（数値が大きいほど先に発火）
- 設置後はHubSpot検証ツール・DevTools・GTMプレビューで必ず動作確認を行う
