ホームページのコンバーションを上げるヒートマップ(Hotjar)設定方法

ホームページのどの箇所が良く見られ、クリックされ、どの箇所から離脱されているかを見えるかするツール【ヒートマップ】を使った、サイト改善方法をご紹介していきます。

通常、ヒートマップを導入する時はheadに埋め込みタグを入れる必要があると思いますが、ノーコードでサイトを修正する事なくヒートマップを導入できる方法のご案内です！

ヒートマップを使うと出来る事

• クリックされる個所が見える
• よく読まれている箇所がわかる
• 離脱ポイントがわかる
• 不具合の起きている箇所がわかる

サイトに訪れた訪問者の行動を見える化するツールです。

無料で使えるHotjarがおすすめ

本記事で紹介するのはgoogleタグマネージャーと連携できる【Hotjar】というヒートマップツールです。無料で始められるので、登録方法から解説をしていきたいと思います。

１５日間のトライアルが始まります。トライアル後はBasicプランは無料なので無料で使い続ける事が出来ます。

Hotjarへユーザー登録

Googleアカウントでサインイン

新規登録やパスワード管理を考慮して、googleでアカウントを作成していきます。

サイトをHotjarへ登録

【Continue】をクリックして少し待つと完了です。

サイトに接続コードを埋め込む

サイトの検出はされましたが、この状態で使えてしまったら誰でも他社サイトの情報が見えることになってしまいます。サイトに特定の埋め込みコードを入力しないと解析は始まりません。

Googleタグマネージャーを使って、ノーコードでサイトとHotjarを接続していきます。

【Get tracking code】をクリックします。

こんなコードです。

赤線の箇所がご自身のHotjarコードです。後ほど、Googleタグマネージャーにこのコードを入力します。

Googleタグマネージャーへログイン

Googleタグマネージャーへログインし、【タグ】で【新規】をクリックします。

名前をつける

わかりやすい名前を付けます。名前を変えたら鉛筆アイコンをクリックしてタグを設定します。

【Hotjar Tacking Code】を選択

Hotjar IDを入力

先ほど確認をしたHotjarコードを入力します。

トリガー設定

全てのページを解析対象としたいので、トリガーには【All page】を設定します。

最後に【保存】をクリックします。

公開

新しいタグを追加したら【公開】をクリックしましょう。

今回行った変更点を入力して公開します。

サイト内のheader.phpを修正することなく、ノーコードでGoogleタグマネージャーを使ってHotjarを設定する事が出来ました！

Hotjarが正常に機能するか確認

正常に接続されている事を確認します。

Googleタグマネージャーを設定してサイトとHotjarが接続されるとこのような管理画面に入れます。【Heatmap】をクリックします。

ヒートマップ新規作成

【New heatmap】で新規ヒートマップを作成します。

解析したいページを追加

• マッチさせるタイプを選択
• 解析するページのURL
• 名前

を設定して【Done】をクリックします。

どのようにサイト改善に役立てるか

実際にヒートマップで解析をした結果をどのようにサイト改善に役立てるのか簡単に紹介をしていきます。

クリックされている箇所を把握

対象のページを訪れた人が興味を持っている箇所がわかる為、次の導線となっているクリックされている箇所のリンク先のページを重質すると良い事がわかります。

また、意図しない箇所でクリックされている場合は、リンクできると勘違いする人が多い箇所でもある為、リンクを追加してあげるという方法も考えられます。

途中から離脱している

途中からの離脱が多い場合、コンテンツが面白くないのか？タイトルや冒頭で魅力的な内容を打ち出せているか？内容を見直してみると良いです。極端に色が変わっていて離脱している場合はサイト不具合の可能性も考えられます。

コンバーションまで到着していない

お問い合わせボタンまで到着せずに離脱している場合は、お問い合わせへの導線を離脱される前に移動したり、特典をつけたりする方法が考えられます。

無料トライアルが終わったら

アカウントを作成すると無料トライアルが開始されます。トライアル期間が終わった後、ログインをすると有料プランへの決済の案内が出てきますので、引き続き無料で利用をした場合は右下の【Downgrade to Basic】をクリックします。

Hotjarのプランの違い

Hotjar Basicプラン Free

Hotjarを無料で使うBasicプランは無料です。

• 35日分データ保存
• 1050セッション/1か月

という決まりがあります。

Hotjar Plusプラン $32/mo

HotjarをのPlusプラン。Basicプランの機能に加え

• 100日間データ保存
• セグメントデータ計測
• 3,000セッション/月

が使えるようになります。

Hotjar Businessプラン $80/mo

• 500日間データ保存
• SlackやZapierなどと連携可能
• より高度な詳細データが追跡可能

サイトの改善をスムーズに行うために

このように、ヒートマップを使うとサイト内のどの箇所を改善したらよいのか明確になります。自分たちのイメージで何となく修正していくよりも失敗が少なくて済みます。

サイト改善をスムーズに行うためには毎回外注に頼っているわけにはいかないと思います。社内でサイトを修正できる環境を整え、PCDAを素早く回していくことが成功のカギとなってきます。弊社ではWordPress×ノーコードを使ってサイト制作や内製化支援をしていますので、ご興味のあるWEB担当者様はお気軽に無料相談をご利用ください！