hubspotのトラッキングコードをインストールする手順

松葉駿平

HubSpotでアクセス解析などのために必要なトラッキングコードについて、そのインストール方法をお伝えします。

トラッキングコードとは

HubSpotのトラッキングコードについて説明する前に、そもそもトラッキングコードとは何なのかということについて確認しておきましょう。

簡単に言うと、ウェブサイトなどに設置される解析や計測のためのプログラムのことです。「ビーコン」や「計測タグ」などとも呼ばれますが、Googleアナリティクスに代表されるようなアクセス解析ツールに必要とされます。英語で「追跡する」などの意味を持つ「トラッキング」とあることからも、サイトの訪問者等の動向を探るためのものだということがおわかりではないでしょうか。

トラッキングコードは、HTMLファイルのようなソースコードに適切に設置することで、アクセス数やユーザーの滞在時間などのデータを取得し、蓄積していきます。このデータを解析することで、何人ぐらいの訪問者がどのぐらいの時間サイトに滞在したかがわかるようになるのです。それによって、「このユーザーは何を目的に訪れたのだろう?」などと訪問者の意識を推測し、成果を出すためのサイトへと改善することを目指します。

hubspotのトラッキングコードをインストールする方法

そんなトラッキングコードですが、HubSpotの場合、特別な知識は必要ありません。手順に従って操作することで、誰でも比較的簡単にインストールできます。

なお、HubSpotのトラッキングコードは、HubSpotのアカウント固有のものであって、それがゆえにHubSpot上のサイトのトラフィックを計測することができます。一般的なウェブサイトのページ、または、ランディングページ、それにブログ記事まで、HubSpot上のページならこのコードは自動的にインストールされる仕組みです。ただ、HubSpot上にない外部でホストされるサイトの場合、そのサイトのアナリティクスを得るには手動でコードをインストールしなければなりません。

もう一つ注意したいのが、HubSpotでは、複数のトラッキングコードを1ページにインストールできないことです。複数インストールしたとしても、作動するのはページに最初に読み込まれたコードのみです。その後にインストールしたコードについては読み込まれず、作動しません。

具体的なインストール方法ですが、まずHubSpotのアカウントでログインし、ナビゲーションバーの設定のアイコンをクリックします。次に、レポートおよびアナリティクストラッキングの設定ページに移動してください。なお、購読する製品のタイプによって、ここの手順に若干の違いがありますが、いずれにせよサイドバーからトラッキングコードを探すということを覚えておくとよいでしょう。

次に、「エンベッドコード」というところで、「コピー」、もしくは開発者にメール送信を選び、コードをインストールする人に送信します。ここまでで、ようやくサイトにコードをインストールする前提が完了です。

コードのインストール方法は、インストールしたいサイトの各ページにあるHTMLコードの《/body》というタグの直前に貼り付けるだけです。インストールできたら、正しくインストールされて実行できるかを検証しましょう。

トラッキングコードがインストールできているかを確認する方法

もしトラフィックデータが正しく表示されない場合は、以下の方法で正しくインストールできているかを確認できます。

まず、右上のアカウント名をクリックします。コードをインストールしたページを開いて、任意の場所で右クリックをしてください。すると、ドロップダウンメニューが表れるので、そのなかからソースを表示するという旨の文言を選んでください。次に、Ctrlキーと「F」を同時押しして検索窓を表示させ、自分のIDを検索します。コードが見つかれば、正しくインストールできているはずです。アカウント設定からレポートおよびアナリティクストラッキングの設定ページに移動し、正しくコードがコピーされているかを確認します。

もしコードが表示されていないのなら、正しくインストールが完了していない可能性があります。もう一度インストールの手順に従ってやり直してみましょう。

コードが正しくコピーされている場合、ブラウザでページを開き、好きな場所で右クリックし、ドロップダウンメニューから「調査」というところを選びます。すると、画面の下部か側面にツールバーが表示されるので、そのなかから「ネットワーク」というタブを選んでクリックします。するとページが更新されます。

次に、「名前」という列を選び、アルファベット順に要素を並べ替えます。そのなかに「.js」で終わるIDがあるはずです。その下に「js.hs-scripts.com」など、「js」から始まる文字列がないでしょうか。また、IDが表示されている列の右横のステータスという列を確認してください。そこに、「200 OK」もしくは「304 未変更」との表示があるはずです。

もし「js」のコードがない、ステータスの表示が上記と違うという場合は、正しくコードが実行できていない可能性が高いです。この場合、hubspotのサポートデスクに問い合わせた方がよいでしょう。

WordPressで作ったサイトにトラッキングコードをインストールする方法

WordPressでサイトを作っている企業も多いはずです。WordPressのサイトにもhubspotのトラッキングコードはインストールできます。ただ、その場合、専用のプラグインをまずインストールしておいた方がよいです。hubspotもそれを強く推奨しています。プラグインをインストールしておけば、コードがサイト上に自動でインストールされるので便利です。

もしプラグインを何らかの事情でインストールできないのであれば、手動でコードをインストールする必要があります。それには、まずhubspotのトラッキングコードを上述の手順でコピーしておき、次にWordPressのアカウントでログインして編集ページに進んでください。テーマファイルのリストからフッターを選び、そこにコードを貼り付けてからファイルを更新します。これでインストールが完了です。

WordPress以外のCMSで作ったサイトにhubspotのトラッキングコードをインストールする方法

CMSといえば、ほとんどの人はWordPressをイメージしますが、実は世界にはさまざまなCMSが存在しています。確かにWordPressのシェアが圧倒的なのですが、それ以外のCMSを使用してサイトを作っている企業もあるはずです。そこで、WordPress以外のCMSで作ったサイトにトラッキングコードをインストールする方法を見ていきましょう。

Shopifyのサイトへのインストール方法

hubspotのトラッキングコードをコピーする段階までは、上述のとおりです。コードをコピーしたら、Shopifyの管理者ダッシュボードにアクセス、サイドバーメニューからオンラインストアに進み、さらに「テーマ」まで進んでください。そこで、「アクション」というドロップダウンメニューから「コードを編集」を選び、theme.liquidファイルを見つけます。このtheme.liquidファイル内の《/body》タグの前に、コードを貼り付けて保存をクリックすれば完了です。

Drupalのサイトへのインストール方法

hubspotのコードをコピーしてから、Drupalの管理者ダッシュボードにアクセスします。メインナビゲーションから「構造」へと進み、「ブロック」、さらに、「+ブロックを追加」を選びます。そこで、新しいブロックの本文のフィールドにコードを貼り付け、保存をクリックすると完了です。

Magentoのサイトへのインストール方法

hubspotのコードをコピーするのはこれまでと同様です。MagentoでヘッダーHTMLにサードパーティー製のJavaScriptコードをインストールする手順は、直接Magentoのユーザーガイドで確認してください。

Wixのサイトへのインストール方法

hubspotのコードを上記と同様にコピーし、それから、Wixのサイトマネージャーにアクセスし、サイドバーのメニューからトラッキングとアナリティクスをクリックしてください。そこで「カスタム」を選んで、続いて、スニペット貼り付け用のフィールドにコードを貼り付けます。次に、名前の欄に「Hubspot Tracking Code」と入力し、設定を押します。

次に、ページにコードを追加する項目から、「すべてのページ」のチェックボックスにチェックを入れ、ドロップダウンメニューで新規ページにコードを読み込むという項目を選択します。コードを配置する場所として、本文の末尾という旨の文言をクリック、最後に「適用」を押して完了です。

Wixで作成したサイトでチャットボットやライブチャットを使用する場合、ここまでの手順によってさまざまなページのターゲティングが可能になります。

Joomlaのサイトへのインストール方法

Joomlaのサイトにコードを追加する方法は2つあります。どちらの方法でも、hubspotのコードをコピーするところまでは同じです。

一つ目は、「Joomla! Extensions Directory」からエクステンションを選び、そこにコードを貼り付ける方法です。もう一つは、Joomlaのアカウントに管理者でログインし、ナビゲーションメニューから「拡張機能」、さらに「テンプレート」と進みます。テンプレートをクリックしたその先のサイドバーメニューから「index.php」を選び、トラッキングコードを直接《/body》タグ上に貼り付け、保存を押すと完了です。

Squarespaceのサイトへのインストール方法

hubspotのコードをコピーして、Squarespaceのアカウントにログイン、サイドバーメニューから設定を選びます。設定画面のメニューから、「ウェブサイト」、「高度」と進んで、「コードインジェクション」をクリックします。「ヘッダー」というフィールドにコードを貼り付け、保存を押すと完了です。

トラッキングコードをGoogleタグマネージャーを使ってインストールする方法

Googleでは、さまざまなタグを一元的に管理できる「Googleタグマネージャー」というツールを無料で提供しています。以下は、これを使ってコードをインストールする方法です。

まず、hubspotアカウントでトラッキングコードをコピーするまでは、これまでと同様の手順です。次に、新しいウインドウかブラウザを開いて、Googleタグマネージャーにログインします。コンテナを選んで、左のメニューからタグに移動してください。

続いて「新規」、「タグ設定」とクリックし、タグの種類として「カスタムHTMLタグ」というところを選びましょう。タグの名前を入力し、HTMLフィールドにコードを貼り付け、タグ設定の下部に表示されている「トリガー」をクリックします。これで作動ルールとして設定され、タグが作動してアナリティクスデータが収集できるようになるはずです。きちんと作動ルールの設定までできていないと、タグは作動しないので注意してください。

hubspotのトラッキングコードを設置してサイトのパフォーマンスを正しく分析

上記のようにサイトごとにやり方は違いますが、hubspotのトラッキングコードをインストールすることによって、サイトに流入するトラフィックをページ単位やサイト全体などのお好みの範囲で測定できるようになります。たとえば、ページごとにパフォーマンスを分析し、セッション数や顧客数、コンタクト数の最も多いソースを特定し、詳しく調べることが可能です。どんなユーザーがサイトをよく訪れるのかが把握できるため、特定のソースに向けて集中的にマーケティングするような取り組みも容易になるでしょう。

ただ、それには正しくトラッキングコードを設置できていることが前提です。もし正しく設置できていないと、二重計測などのミスの原因になってしまいます。若干難しい部分もあるので、必要に応じてhubspotのサポートを頼りつつインストールしてみてはいかがでしょうか。

事業会社でSaaSのWebマーケティングに1年間携わったのち、デジマールに入社。Tableau勉強中。趣味は料理。

松葉駿平

事業会社でSaaSのWebマーケティングに1年間携わったのち、デジマールに入社。Tableau勉強中。趣味は料理。

広告運用代行や各種支援について、
お気軽にご相談ください。
デジマールのマーケティングノウハウをご提供します。

お問い合わせはこちら