お客さまへの大切なお知らせ:膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。正確な最新情報については本コンテンツの英語版をご覧ください。
Landing Pages

GoogleタグマネージャーのコードをHubSpotページに追加する

更新日時 2021年 3月 30日

対象製品

Marketing Hub  Starter, Professional, Enterprise
CMS Hub  Professional, Enterprise
Marketing Hub Basic(旧製品)

GoogleタグマネージャーとHubSpotを統合して、一か所の複数のソースからのトラッキングを管理することができます。Googleタグマネージャーの詳細については、Googleのスタートガイドを参照してください。これには一般的な質問のページが含まれています。

Googleタグマネージャーと連携

HubSpotをGoogleタグマネージャーと統合する場合、タグマネージャーはHubSpotトラッキングコードが含まれているすべてのページで実行されます。HubSpotがホストするページは自動的に含まれます。

  • HubSpotアカウントにて、ナビゲーションバーに表示される[設定アイコン settings]をクリックします。
  • 左のサイドバーメニューで、[ウェブサイト]>[ページ]の順に進みます。
  • [連携]タブをクリックします。
  • [Googleタグマネージャーと連携]チェックボックスをオンにします。
  • テキストフィールドにGoogleタグマネージャーIDを入力してください。このIDをGoogleタグマネージャーのアカウントで検索する方法についてご確認ください。

integrate-with-google-tag-manager

  • [保存]をクリックして変更を適用します。

Googleタグマネージャーのコードを手動で追加する

GoogleタグマネージャーのコードをHubSpotでホストされているページに手動で追加することもできます。HubSpotでホストされているドメインの一部のみをトラッキングする場合は、これをお勧めします。以下の手順は、サイトのヘッダーとフッターのHTML設定へのアクセス権を持つアカウントにのみ適用されます。

Googleタグマネージャーからコードをコピーする

  • Googleタグマネージャーのアカウントにログインします。
  • [Admin (管理者)]タブをクリックします。
  • [コンテナ]ドロップダウンをクリックし、タグを含むコンテナを選択します。
  • [Install Google Tag Manager (Googleタグマネージャーをインストール)]をクリックします。 
  • 次の画面で、Googleタグマネージャーコンテナーのコードスニペット(1)と(2)の両方をコピーできます。

GoogleタグマネージャーのコードをHubSpotページに追加する

Googleでは、JavaScriptコードスニペット(上記のスクリーンショットの「1」)を、ページの<head>の位置に置くことを推奨しています。これは、「サイトヘッダーHTMLフィールド」の設定で実行できます。

また、Googleでは<noscript>スニペット(上記のスクリーンショットの「2」)を、<body>の開始タグの後ろに置くことを推奨しています。HubSpotページのドメイン全体の本文にコードを追加する場合は、</body>の終了タグの直前のみにコードを追加できます。これは、[サイトフッターHTML]フィールドの設定で実行できます。

  • HubSpotアカウントにて、ナビゲーションバーに表示される[設定アイコン settings]をクリックします。
  • 左のサイドバーメニューで、[ウェブサイト]>[ページ]の順に移動します。
  • [設定を編集するドメインを選択]ドロップダウンメニューをクリックし、ドメインを選択します。HubSpotでホストされているすべてのドメインにコードを追加する場合は、[すべてのドメインの既定の設定]を選択します。
choose-a-domain-1

注:特定のドメインのヘッダーまたはフッターHTMLにコードを追加すると、「すべてのドメインの既定の設定」のヘッダーおよびフッターHTMLに配置したすべてのコードが上書きされます。コードがページに適用される順序の詳細を確認してください。

  • Googleタグマネージャーからコピーしたコードスニペットを追加します。
    • Javascriptコードスニペット(1)を[サイトヘッダーHTML]フィールドに追加します。
    • <noscript>コードスニペット(2)を[サイトフッターHTML]セクションに追加します。
  • [保存]をクリックして変更を適用します。