Webアナリスト/リスト獲得の専門家 川口美代のブログ

ヒートマップ『Hotjar』のトラッキングコードをサイトにインストールしよう!

 







この記事を書いている人 - WRITER -
アバター
Webアナリスト/リスト獲得の専門家/デジタルマーケッター/女性の働き方改革推進家
  行動してから考える"とりあえず行動派"。チャレンジ精神高め。困難に挑戦するのが好き。チャンスは逃さない。姉御肌な説教キャラ。モットーは「冷静に熱く」どんな時も情熱を持って仕事してます!
スキルのある女性が多様な働き方でチャンスを掴めるようオンラインワーク推進情報も発信します。
詳しいプロフィールはこちら

無料で使えるヒートマップ『Hotjar』の設定ステップ2です。

今回は、Hotjarとサイトを繋ぐため、サイトにHotjarのトラッキングコードをインストールする作業をしていきます。

Hotjarへのユーザー登録がまだの場合は、無料で使えるヒートマップ『Hotjar』ユーザー登録方法日本語解説を参考に登録を済ませてください。

インストール方法は3種類あります。

  1. Googleタグマネージャーを使う
  2. テーマのカスタマイズ機能を使う
  3. テーマヘッダー (header.php)に直接インストール

以上3種類の方法を解説しますね。

この画面以降の設定を行います。

 

 

どれもマネしていただければ簡単にインストールできるので安心してくださいね!
では、さっそく作業を開始しましょう!

まずは、不要な設定をスキップしよう!

トラッキングコードのインストールを行う前に、表示されている画面を閉じましょう。

[Let’s Go!]をクリックして次に進みます。

 

次の画面は、[Skip this step] をクリックしてスキップします。

 

同じような画面がステップ2〜ステップ5まで表示されるので、全てスキップしましょう。

全てスキップしたらトラッキングコードのインストールができます。

GoogleタグマネージャーにHotjarトラッキングコードをインストールする

Googleタグマネージャー を使っている場合は、以下の方法でHotjarnoトラッキングコードをインストールしてください。

まずは、下図のような画面が開いているのを確認してください。

 

1. Googleタグマネージャー とHotjarを連携させる

[Install with Google Tag Manager]を開き、[Sign In To Google Tag Maneger] ボタンをクリックして次に進みます。

 

Googleアカウント選択画面が開くので、Hotjarをインストールしたいタグマネージャー と同じアカウントを選びます。

 

以下のように[許可]を3回求められます。全て[許可]して次に進みます。

↑この画像は英語部分をクリックすると日本語で表示されました。

さらに、以下のような画面が表示されます。[許可]をクリックして次へ進みます。

 

これでタグマネージャにHotjarをインストールする準備ができました。

2. Googleタグマネージャー のアカウントとコンテナの選択

次に下図のような画面が開きます。

 

Hotjarのトラッキングコードをインストールするタグマネージャー のアカウントを選びましょう。

ドロップダウンで既存のタグマネージャーアカウントが表示されるので、その中から選んでください。

アカウントを選ぶとコンテナが選べるようになります。

同じくドロップダウンメニューからコンテナを選びます。

どちらも選んだら、[Create And Publish Tag]をクリックします。

 

Create And Publish Tag = 「タグを作成して公開する」という意味です。

このボタンを押すとGoogleタグマネージャーにHotjarのトラッキングコードが自動でインストールされます。

 

ここまできたらほぼ完了です。
残りは正しくインストールできているかの確認です。こちらから確認作業の説明に飛べます。

以上がGoogleタグマネージャー を使ったHotjarトラッキングコードのインストール方法です。

この先は、タグマネージャー を使用していない人向けのインストール方法を解説します。

テーマのカスタマイズ機能を使ってHotjarトラッキングコードをインストールする

(株)ファンファーレが販売しているWordPressテーマSEAL ver.1.5のように、カスタマイズ機能の中に[headタグ]を追加できるテーマを使用している場合は、以下の方法でHotjarのトラッキングコードをインストールしてください。

 

私が使用しているテーマ「SEAL1.5」の管理画面画像で解説します。

1. トラッキングコードをコピーする

まず、下図を参考にHotjarの画面でトラッキングコードをコピーします。

青枠で囲んでいる[Copy to clipboard]をクリックすればコピーできます。

 

2. WordPressの管理画面<headタグ>内にトラッキングコードを追加する

ここからは、WordPressの管理画面を開いての作業です。

繰り返しになりますが、私は、SEAL1.5というテーマを使っています。

他のテーマを使っている場合も、だいたい同じ感じでカスタマイズ機能が備わっていると思うので参考にしながら進めてください。

ダッシュボード → 外観 → カスタマイズ の準備開きます。

 

SEALの場合は、[便利設定]を開きます。

 

(株)ファンファーレが提供している、「ELEPHANT」「Giraffe」も同じ設定です。

他テーマをお使いでヘッダータグ追加機能がついてる場合は、そこを開いてください。

<headタグ>という表記に近いと思います。

便利設定内の[headタグ]に先ほどコピーしたHotjarのトラッキングコードを貼り付けます。

他の解析コードを追加している場合は、一番最後に追加でOKです。

 

 

解析コードの中には、どのコードよりも先に設置しないといけないものがあります。Hotjarのコードは他よりも先に設置する必要はないので一番最後に設置で問題ありません。

コードを貼り付けたら[公開]ボタンを押して終了です。

このあとは、正しくインストールできているかの確認を行います。

手順はこちらから

テーマヘッダー (header.php)に直接Hotjarトラッキングコードをインストールする

テーマヘッダー(header.php)に直接インストールする場合は、以下の手順を参考にしてください。

ダッシュボード → 外観 → テーマエディター を開きます。

 

編集するテーマを選択から親テーマを選びます。

 

右側にあるメニューの中から[テーマヘッダー(header.php)]をクリックして表示させます。

少し下にスクロールするとありますよ!

 

テーマヘッダー(header.php)を表示させたら、上図のように<head>と書かれている場所を探してください。

<head>の下に他のコードを追加していない場合は、その直後にHotjarのトラッキングコードを追加します。(下図参照)

 

他のコードを追加している場合は注意!

コードによっては必ず<head>の直後に設置しないといけないものがあります。

Hotjarのコードは必ずしも<head>の直後でなくてもいいので、追加済みの他のコードの下に追加するようにしてください。

 

重要なコードよりも先にHotjarを追加しちゃうと、他の解析にエラーが出る可能性が高いので注意してくださいね!

<head>にコードを追加したら、 [ファイルを更新]をクリックしてインストール完了です。

 

 

最後にトラッキングコードが正しくインストールされているのか確認しましょうね!

Hotjarトラッキングコードが正しくインストールされているか確認しよう!

トラッキングコードのインストール作業を終えてHotjarに戻ると、「トラッキングコードが正しくインストールされているか確認しましょう。」と下図のような画面が表示されます。

 

  • テーマのカスタマイズ機能を使ってインストールした場合
  • <header.php>に直接インストールした場合

は、下図のような画面が表示されていると思うので、[Verify Installation]をクリックすると、上述の画面が表示されます。

 

①にHotjarをインストールしたサイトのURLが入力されています。

間違いがないか確認したら、[Verify Installation]をクリックします。

しばらくすると新しいタブが開きます。

下図のように表示されればインストールが無事に終了しています。

 

Googleタグマネージャー を使用している場合は念の為コンテナのタグも確認しておきましょう!

今回、Hotjarのトラッキングコードをインストールしたタグマネージャー のコンテナを開きます。

[タグ]を開きます。

 

上図のように、[AUTO Hotjar Tracking Code]が入っていれば無事にインストールが完了しています。

 

名前が英語表記でわかりにくい場合は、お好みで編集してくださいね!

お疲れ様でした!

以上でHotjarのトラッキングコードをサイトにインストールする作業が全て終了です。

まとめ

今回は、Hotjarのトラッキングコードをサイトにインストールする作業をしました。

インストール方法は以下の3種類です。

  1. Googleタグマネージャーを使ってインストール
  2. テーマのカスタマイズ機能を使ってインストール
  3. テーマヘッダー (header.php)に直接インストール

お好みの方法でインストールしてくださいね!

次は、Hotjarの設定ステップ3『解析したいページを追加』する作業です。

 

マネするだけで確実に記事の書き方がうまくなる
記事構成テンプレート無料プレゼントします!




自分のサイトに載せている記事や寄稿記事で、多数検索上位に入れてきた記事構成が学べます。

ぜひあなたのブログ運営にお役立てください!

この記事を書いている人 - WRITER -
アバター
Webアナリスト/リスト獲得の専門家/デジタルマーケッター/女性の働き方改革推進家
  行動してから考える"とりあえず行動派"。チャレンジ精神高め。困難に挑戦するのが好き。チャンスは逃さない。姉御肌な説教キャラ。モットーは「冷静に熱く」どんな時も情熱を持って仕事してます!
スキルのある女性が多様な働き方でチャンスを掴めるようオンラインワーク推進情報も発信します。
詳しいプロフィールはこちら

 

- Comments -

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Copyright© Webアナリスト川口美代のブログ , 2019 All Rights Reserved.