今回は、サイト分析に便利なヒートマップツール「hotjar」のGoogleタグマネージャーへの紐付け方法を画像をたくさん用いて説明します。５分くらいで設定できますよ。
- GoogleアナリティクスやGoogleタグマネージャーなどは設置した。新しい分析ツールを試してみたい
- サイトのアクセス数が伸び悩んでいる
- WEBサイトの分析スキルを向上させたい
Hotjarとは？
サイト訪問者のページ内の動きを、動画やヒートマップで確認できる。
ブロガーなどは無料でも十分に使える
ページ内の移動分析に特化した分析ツール
| 分析機能 | 機能の説明 |
|---|---|
| ヒートマップ | ページのどの部分がユーザーに見られているか、色で視覚的にわかる |
| レコーディング | ユーザがサイトを閲覧した際の動きを動画で記録 |
| コンバージョンファネル | ページごとの離脱率を分析 |
| フォーム分析 | 入力フィールドの入力率や入力時間、離脱率を確認 |
分析機能以外にも、以下のような機能があります。
・訪問者への質問機能
・アンケート作成
・テストユーザーの募集
無料で使える範囲は以下です。
- １日2000PV
- レコーディング記録300件
- ３件のヒートマップ
Hotjarのアカウントを開設
Hotjarのホームページにアクセス
「try it free」 からアカウントの開設をしてください。
HotjarをGoogleタグマネジャーに設置する
Googleタグマネージャーのアカウントがない方は、まずGoogleタグマネージャーの設定から行ってください。
タグマネージャーを使うと分析ツールを一元管理できるので非常に便利ですよ。
もし、Googleタグマネージャーを利用されないという方は、トラッキングコードをサイトHTMLの<head>タグの後ろに設定してください。
hotjarのマイページに記載している７桁のIDをコピーします。
タグマネージャーのホーム画面に移りましょう。
「新しいタグ」から設定画面に入ります。
①はわかりやすい名前に設定しましょう。「hotjar」タグとしました。
②をクリックした後に、スクロールをして「Hotjar Tracking Code」を選択します。
Hotjar Site IDに先ほどコピーした７桁のIDを入力します。
③のトリガーで「All Pages」を選択します。
このようになるようにそれぞれを選択します。
右上の保存を押して設定完了です。
Hotjar側の設定
Hotjarのホーム画面に戻ります。
「Heatmaps」をクリックします。
「New Heatmap」をクリックします。
ヒートマップに名前をつけます。
「商品ページ」、「トップページ」、「LPページ」などわかりやすい名前をつけましょう。
無料ユーザーは、一番右側をクリック選択します。
こちらに、分析したいページの「URL」を入力します。
- a specific page…特定ページのみの調査
- similar pages…複数ページを調査
最後に「Create Heatmap」をクリックして完成です。
どうですか？こんな簡単にヒートマップ分析を始めることができます。
レコーディング機能なども同じ要領で設定できるので、ぜひやって見てください。
