初心者ヒートマップ？って何？
SWELLでも使えるの？
そんな疑問に答えます。
WordPressテーマSWELLで利用できる無料の高機能なヒートマップツールと、SWELLへの導入手順を紹介します。
【基本知識】ヒートマップって何だ？
そもそもヒートマップって何だ？って話ですが、ヒートマップはアクセス解説ツール「Googleアナリティクス」のようにサイト訪問者の行動を記録するツールのことです。
GoogleアナリティクスはPV数など、訪問者の記録を数値化してくれますよね？ヒートマップはページにどの部分に滞在していたかを視覚的に記録できるツールです。
以下はヒートマップツールの画面です↓
サイト訪問者がクリックしたリンクなどを視覚的にチェックできます。
テキストリンクだとクリックされない。バナー画像に変えてみるか….
そんな判断に必要なデータをサクッと把握できるのがヒートマップツールのメリットです。
本記事ではマイクロソフトが提供している無料のヒートマップツールClarityの紹介と、WordPressテーマSWELLへの導入手順を画像付きで解説します。
Clarityについて
| Clarity | |
|---|---|
| 名称 | Clarity（クラリティ） |
| 提供会社 | マイクロソフト |
| 導入費用 | 無料 |
| 月額料金 | 無料 |
| 公式サイト | Clarity |
Clarityは「ここまでが無料。でもここからは有料」みたいなツールではありません。
かんた完全に無料です！
SWELLにClarityを導入する手順
無料ヒートマップツールClarityをSWELLを有効化しているサイトに導入する方法を解説します。
Clarityはクラウド型のツールです。利用するには次のいずれかのアカウントが必要になります。
必要なアカウント
- マイクロソフト
- Facebookアカウント
- Googleアカウント
ざっくりした作業手順
- Clarityにアカウントを作る
- Clarityでコードを取得する
- 自分のサイトにコードを貼り付ける
Clarityの導入にかかる作業時間の目安は10分です。
コードを編集するような作業はありません。初心者の人もぜひチャレンジましょう！
かんた導入手順を解説します。
【ステップ①】Clarityサイトにログインする
まずはMicrosoftのClarity公式サイトにアクセスし、ログインします。
「サインアップは無料です！」をクリック↓
ログインする方式を選びます↓
「承諾します」にチェックを入れて、「続ける」をクリック↓
【ステップ②】コードを取得する
ヒートマップのデータを取得したいサイトを登録し、サイトに埋め込むコードを取得するステップです。
名前とURLを入力し、「新しいプロジェクト」を追加するをクリック↓
「手動でインストールする」を選択↓
「クリップボードにコピー」をクリック↓
【ステップ③】自分のサイトにコードを貼り付ける
コピーしたコードを自分のWordPressサイトに設置する作業です。
「外観」→「カスタマイズ」をクリック↓
「高度な設定」をクリックし、「headタグ終了直前に出力するコード」にコードを貼り付ける↓
カスタマイザーの設定を保存して作業終了です。
FAQ
Clarityのヒートマップを使うと、サイトは遅くなりませんか？
公式サイトの回答を抜粋したものを紹介します↓
全くありません。ヒートマップでは、Clarity によって既に収集されているデータが使用されます。
引用元：マイクロソフト
かんたClarityを導入してみた感想ですが、サイトが遅くなったという感じはしません。
Clarityのヒートマップが使えるSWELLのバージョンは？
2.7.3以上です。
2.7.3未満のバージョンの場合、SWELLのテンプレートにdata-clarity-region="article"属性を追加する必要があります。
記事テンプレートsingle.phpのカスタマイズ例。
<article class="l-mainContent__inner" data-clarity-region="article">固定ページテンプレートpage.phpのカスタマイズ例。
<div class="l-mainContent__inner" data-clarity-region="article">Clarityの管理画面でヒートマップのボタンがグレイでクリックできない。
ヒートマップが表示されるまでにはラグがあります。
公式サイトの情報だと最大2時間ほどかかると紹介されています。ボクが試した限り15分ほどでした。
SWELLでClarityが連携しやすくなった背景は？
SWELLのオンラインコミュニティーで会員のmekemokeさんが提案したのがキッカケです。
提案してくださったmekemokeさんと、本機能を追加してくれたSWELL開発者さんに感謝です！
まとめ
WordPressテーマSWELLにヒートマップを導入する方法を紹介しました。Clarityは無料で利用できる便利なアクセス分析ツールです。
かんたぜひサイトに導入しましょう！