Hotjarに解析したいページを追加しよう！
川口美代
m-style.
ヒートマップ『Hotjar』のトラッキングコードをサイトにインストールしよう！
川口美代
無料で使えるヒートマップ『Hotjar』の設定ステップ２です。
今回は、Hotjarとサイトを繋ぐため、サイトにHotjarのトラッキングコードをインストールする作業をしていきます。
[aside type=”boader”]
Hotjarへのユーザー登録がまだの場合は、無料で使えるヒートマップ『Hotjar』ユーザー登録方法日本語解説を参考に登録を済ませてください。
[/aside]
インストール方法は３種類あります。
- Googleタグマネージャーを使う
- テーマのカスタマイズ機能を使う
- テーマヘッダー (header.php)に直接インストール
以上３種類の方法を解説しますね。
この画面以降の設定を行います。
[imgwaku]
[/imgwaku]
どれもマネしていただければ簡単にインストールできるので安心してくださいね！
では、さっそく作業を開始しましょう！
まずは、不要な設定をスキップしよう！
トラッキングコードのインストールを行う前に、表示されている画面を閉じましょう。
［Let’s Go!］をクリックして次に進みます。
[imgwaku]
[/imgwaku]
次の画面は、[Skip this step] をクリックしてスキップします。
[imgwaku]
[/imgwaku]
同じような画面がステップ2〜ステップ5まで表示されるので、全てスキップしましょう。
全てスキップしたらトラッキングコードのインストールができます。
GoogleタグマネージャーにHotjarトラッキングコードをインストールする
Googleタグマネージャー を使っている場合は、以下の方法でHotjarnoトラッキングコードをインストールしてください。
まずは、下図のような画面が開いているのを確認してください。
[imgwaku]
[/imgwaku]
1. Googleタグマネージャー とHotjarを連携させる
［Install with Google Tag Manager］を開き、[Sign In To Google Tag Maneger] ボタンをクリックして次に進みます。
[imgwaku]
[/imgwaku]
Googleアカウント選択画面が開くので、Hotjarをインストールしたいタグマネージャー と同じアカウントを選びます。
[imgwaku]
[/imgwaku]
以下のように［許可］を３回求められます。全て［許可］して次に進みます。
[colwrap][col3]
[imgwaku]
[/imgwaku][/col3][col3][imgwaku]
[/imgwaku][/col3][col3][imgwaku]
↑この画像は英語部分をクリックすると日本語で表示されました。
[/imgwaku][/col3][/colwrap]
さらに、以下のような画面が表示されます。［許可］をクリックして次へ進みます。
[imgwaku]
[/imgwaku]
これでタグマネージャにHotjarをインストールする準備ができました。
2. Googleタグマネージャー のアカウントとコンテナの選択
次に下図のような画面が開きます。
[imgwaku]
[/imgwaku]
Hotjarのトラッキングコードをインストールするタグマネージャー のアカウントを選びましょう。
ドロップダウンで既存のタグマネージャーアカウントが表示されるので、その中から選んでください。
アカウントを選ぶとコンテナが選べるようになります。
同じくドロップダウンメニューからコンテナを選びます。
どちらも選んだら、［Create And Publish Tag］をクリックします。
[imgwaku]
[/imgwaku]
Create And Publish Tag ＝ 「タグを作成して公開する」という意味です。
このボタンを押すとGoogleタグマネージャーにHotjarのトラッキングコードが自動でインストールされます。
ここまできたらほぼ完了です。
残りは正しくインストールできているかの確認です。こちらから確認作業の説明に飛べます。
以上がGoogleタグマネージャー を使ったHotjarトラッキングコードのインストール方法です。
この先は、タグマネージャー を使用していない人向けのインストール方法を解説します。
テーマのカスタマイズ機能を使ってHotjarトラッキングコードをインストールする
（株）ファンファーレが販売しているWordPressテーマSEAL ver.1.5のように、カスタマイズ機能の中に［headタグ］を追加できるテーマを使用している場合は、以下の方法でHotjarのトラッキングコードをインストールしてください。
私が使用しているテーマ「SEAL1.5」の管理画面画像で解説します。
1. トラッキングコードをコピーする
まず、下図を参考にHotjarの画面でトラッキングコードをコピーします。
青枠で囲んでいる［Copy to clipboard］をクリックすればコピーできます。
[imgwaku]
[/imgwaku]
2. WordPressの管理画面<headタグ>内にトラッキングコードを追加する
ここからは、WordPressの管理画面を開いての作業です。
繰り返しになりますが、私は、SEAL1.5というテーマを使っています。
他のテーマを使っている場合も、だいたい同じ感じでカスタマイズ機能が備わっていると思うので参考にしながら進めてください。
ダッシュボード → 外観 → カスタマイズ の準備開きます。
[imgwaku]
[/imgwaku]
SEALの場合は、［便利設定］を開きます。
[imgwaku]
[/imgwaku]
（株）ファンファーレが提供している、「ELEPHANT」「Giraffe」も同じ設定です。
他テーマをお使いでヘッダータグ追加機能がついてる場合は、そこを開いてください。
<headタグ>という表記に近いと思います。
便利設定内の［headタグ］に先ほどコピーしたHotjarのトラッキングコードを貼り付けます。
他の解析コードを追加している場合は、一番最後に追加でOKです。
[imgwaku]
[/imgwaku]
解析コードの中には、どのコードよりも先に設置しないといけないものがあります。Hotjarのコードは他よりも先に設置する必要はないので一番最後に設置で問題ありません。
コードを貼り付けたら［公開］ボタンを押して終了です。
このあとは、正しくインストールできているかの確認を行います。
手順はこちらから
テーマヘッダー (header.php)に直接Hotjarトラッキングコードをインストールする
テーマヘッダー（header.php）に直接インストールする場合は、以下の手順を参考にしてください。
ダッシュボード → 外観 → テーマエディター を開きます。
[imgwaku]
[/imgwaku]
編集するテーマを選択から親テーマを選びます。
[imgwaku]
[/imgwaku]
右側にあるメニューの中から［テーマヘッダー（header.php）］をクリックして表示させます。
少し下にスクロールするとありますよ！
[imgwaku]
[/imgwaku]
テーマヘッダー（header.php）を表示させたら、上図のように<head>と書かれている場所を探してください。
<head>の下に他のコードを追加していない場合は、その直後にHotjarのトラッキングコードを追加します。（下図参照）
[imgwaku]
[/imgwaku]
他のコードを追加している場合は注意！
コードによっては必ず<head>の直後に設置しないといけないものがあります。
Hotjarのコードは必ずしも<head>の直後でなくてもいいので、追加済みの他のコードの下に追加するようにしてください。
重要なコードよりも先にHotjarを追加しちゃうと、他の解析にエラーが出る可能性が高いので注意してくださいね！
<head>にコードを追加したら、 ［ファイルを更新］をクリックしてインストール完了です。
[imgwaku]
[/imgwaku]
最後にトラッキングコードが正しくインストールされているのか確認しましょうね！
Hotjarトラッキングコードが正しくインストールされているか確認しよう！
トラッキングコードのインストール作業を終えてHotjarに戻ると、「トラッキングコードが正しくインストールされているか確認しましょう。」と下図のような画面が表示されます。
[imgwaku]
[/imgwaku]
- テーマのカスタマイズ機能を使ってインストールした場合
- <header.php>に直接インストールした場合
は、下図のような画面が表示されていると思うので、［Verify Installation］をクリックすると、上述の画面が表示されます。
[imgwaku]
[/imgwaku]
①にHotjarをインストールしたサイトのURLが入力されています。
間違いがないか確認したら、［Verify Installation］をクリックします。
しばらくすると新しいタブが開きます。
下図のように表示されればインストールが無事に終了しています。
[imgwaku]
[/imgwaku]
Googleタグマネージャー を使用している場合は念の為コンテナのタグも確認しておきましょう！
今回、Hotjarのトラッキングコードをインストールしたタグマネージャー のコンテナを開きます。
［タグ］を開きます。
[imgwaku]
[/imgwaku]
上図のように、［AUTO Hotjar Tracking Code］が入っていれば無事にインストールが完了しています。
名前が英語表記でわかりにくい場合は、お好みで編集してくださいね！
お疲れ様でした！
以上でHotjarのトラッキングコードをサイトにインストールする作業が全て終了です。
まとめ
今回は、Hotjarのトラッキングコードをサイトにインストールする作業をしました。
インストール方法は以下の３種類です。
- Googleタグマネージャーを使ってインストール
- テーマのカスタマイズ機能を使ってインストール
- テーマヘッダー (header.php)に直接インストール
お好みの方法でインストールしてくださいね！
次は、Hotjarの設定ステップ３『解析したいページを追加』する作業です。
[enclose color=”#bbe2f1″]
ブログ分析に便利！無料で使えるヒートマップ『Hotjar』関連記事
ステップ0. 無料で使えるヒートマップ『Hotjar』で分かる４つのデータ
ステップ1. 無料で使えるヒートマップ『Hotjar』ユーザー登録方法ひ日本語解説
ステップ2.ヒートマップ『Hotjar』のトラッキングコードをサイトにインストールしよう！ ★今ココ★
ステップ3. ヒートマップ 『Hotjar』に解析したいページを追加しよう！
ステップ4. ヒートマップ 『Hotjar』でレコーディングデータを記録しよう！
ステップ5. ヒートマップ 『Hotjar』でヒートマップとレコーディングデータを見てみよう！
[/enclose]
ABOUT ME
Meta広告運用・サポート・アドバイス・設定代行をメインに、WEBマーケティング、コンテンツ制作（HP・LP・バナー・動画・チラシ）、セミナー講師、主婦のキャリア相談事業を展開中
