ガチなシャツ
リライブシャツすごすぎワロタｗｗｗｗｗｗ【リライブシャツを買ってみたらガチだった。】 リライブシャツ 着るだけで「身体機能をサポートする」怪しいシャツがガチだった。 YouTubeやSNSでバズってた「リライブ...
じょじお無料で使えるヒートマップ「Clarity」を使ってみよう！
あのMicrosoftから「Clarity（クラリティー）」という無料で使えるヒートマップが提供されているらしい、とTwitterで教えていただき早速導入してみましたのでこの記事でシェアしたいと思います。
もともと、わたしはヒートマップとしてPtengineを使っていました。こちらはClarityよりも高機能なのですが無料枠が3,000pvまでとなっていて、私のブログでは1日で上限を超えてしまっていました。とはいえ、課金は予算上きびしい・・・。
一方、ClarityはPtengineほどの機能はないものの、今のところすべての機能を無料で使うことができます。
目次
Microsoft Clarityとは？
全部の機能を無料で使えるヒートマップ！
Clarityは、Microsoftから無償で提供されているヒートマップなどを取得することができるアクセス解析ツールです。
Clarityの機能
- ヒートマップ
- レコーディング
じょじお全部の機能が無償とはMicrosoftさん太っ腹ですねー！
Microsoft Clarityの機能
ヒートマップ機能：ユーザーの行動を可視化するツール
ヒートマップは、「ユーザーのタップやクリックされた場所を、色の違いで塗り分けて表現した画像」のことです。サーモグラフィをイメージしていただくとわかりやすいかと思います。
▲例えば、上は実際の当サイトのある記事のヒートマップです。いくつかサーモグラフィのような色がWebサイトのキャプチャー画像のうえに乗っかっているのがおわかりになるでしょうか。これはユーザーがタップした箇所を表しています。
そして、一番濃い赤い色が赤いCVボタンの上に表示されていることが分かります。ここがこのキャプチャー画像の中では一番タップされているようです。
一方で一番下の青いCVボタンはタップされているものの青緑色が表示されています。3つの中では一番人気がないボタンのようですね。
このようにユーザー行動を可視化して、サイトの改善のための気づきを得るのに便利なツールがヒートマップです。
レコーディング：ユーザーの行動を動画で取得！
Clarityはヒートマップだけではなくレコーディング機能も備えています。
レコーディングはユーザーがWebサイトに訪問して行った行動を動画で取得する機能です。どれくらいのスピードで記事をスクロールしているかなどがわかる恐ろしいです。
レコーディングで分析できる機能
- Dead link（デッドリンク）の検出
- Rage Clickの検出
- Javascriptエラーの検出
じょじおこれだけの機能があって、制限なしで無料で使えるんです。
ぽこがみさますごい・・！
全ブロガーにとって導入しない手はないにゃ！
Microsoft Clarityの設定
じょじおClarityを使うために必要な手順は、ざっくりまとめると下記の2点です。
- Microsoft Clarityで行う作業
- Clarityにサインインしプロジェクトを作成する。
- 作成したプロジェクトのProject IDを入手する。
- WordPressで行う作業
- Clarityプラグインをインストールする。
- ClarityプラグインにProject IDを設定する。
Clarityの設定手順
STEP
Clarityにサインインします。
▲ Clarityのトップページにアクセスしてアカウントを作成します。右上のSign upをクリックします。
▲Microsoft ・Facebook・Googleの中から使用するアカウントを選択します。わたしはGoogleアカウントを持っているのでGoogleにしました。
▲メールアドレスを入力 ＞ 同意事項に確認のうえチェックオン ＞ Continueをクリック
STEP
新規プロジェクトの設定を行います。
▲プロジェクトを作成しました。
STEP
プロジェクトIDを追加します。
▲作成したプロジェクトをクリックします。
▲上部メニューのSettingsをクリックします。
▲Overview画面の一番下にProject IDが表示されるのでコピーします。
のちほどWordPressへ貼り付けます。一旦Clarityの設定は終わり。つづいてWordPress管理画面に画面をうつります。
WordPress側の設定手順（Microsoft Clarityプラグイン）
STEP
WordPressの「Microsoft Clarity」プラグインをインストールします。
▲自分のサイトのWordPressにログインし、プラグイン「Microsoft Clarity」をインストールします。プラグインの検索で「Clarity」というキーワードで検索すると見つけることができます。
STEP
ClarityプラグインにProject IDを設定します。
▲先程ClarityでコピーしたProject IDを図赤枠部に貼り付けます。
STEP
少し時間を置きます。（2時間程度）
以上でClarityの設定は完了です。
設定完了するとClarityがデータ収集を始めます。データ収集がある程度集まるとダッシュボードでレポートを確認することができます。
データが集まるまではダッシュボードをみることができないので少し時間をおいてから見てましょう。
Clarityのヘルプには最大で2時間程度かかるとの記載がありました。
Google Tag Manager(GTM)でClarityを使う。
ClarityをGoogle Tag Managerで利用する場合は、ClarityのトラッキングコードをGTMに張り付けて利用します。
▲Clarityの管理画面の中の「Settings」＞「Setup」＞「Instration method」＞Install manuallyの「Get tracking code」をクリックすると、上図のようなコードが表示されるのでこれをコピーしてGTMに張りつけます。
タグマネージャーをWordPressに導入する方法については下記で解説させていただいておりますので、よろしかったらご覧ください！
Microsoft Clarityのオプション設定（やっておくと便利）
Google Analytics（アナリティクス）とClarityの連携
Google Analytics（アナリティクス）と連携の設定をしておくと、Clarityの管理画面でPVやアナリティクスデータを見ることができます。
アナリティクスのページ別のPV数ランキングからヒートマップやレコーディングにジャンプすることもできます。操作がより快適になりますので連携しておくことをおすすめします。
STEP
Clarityの管理画面でAnalyticsを選択
▲Clarityの管理画面で①上部メニューの「Settings」をクリック ＞ ②「Setup」をクリック ＞③AnalyticsのGet startedをクリックします。
▲Analyticsの連携承認画面が表示されるので２つのアクセス許可にチェックを入れて画面下の「続行」をクリックします。
STEP
Analyticsに登録されているサイトを選びます。
▲Analyticsに登録されているサイトがリストボックスに一覧されるので、登録するサイトをその中から選びSaveボタンをクリックします。
STEP
Analyticsとの接続設定は終わりです。
▲以上で設定は終わりです。AnalyticsのところにConnectedという表示があることを確認しましょう。
STEP
Analyticsのデータを確認してみよう！
Analyticsのデータをみるには、Clarity管理画面の上部メニューの「Google Analytics」をクリックします。
Microsoft Clarityの日本語化設定
STEP
右上の言語メニューをクリックして日本語を選択します。
▲右上の言語選択のところをクリックして日本語を選択しましょう。
まとめ
じょじおClarityの導入方法についてご紹介しました。
ぽこがみさま次の記事ではダッシュボードをみながら分析をしていきたいと思います！
次の記事はこちら（作成中）
Microsoft Clarityのリファレンス
Clarity ヘルプ
https://docs.microsoft.com/en-us/clarity/