【2021年】無料のヒートマップ「Clarity」の登録や使い方を解説

clarityの登録方法とタグマネージャーの設定

マイクロソフト「Clarity」とは

サイトの改善をするとしたら何があると思いますか。いくつか挙げてみるとABテストであったり多変量テスト、そしてヒートマップ解析などが挙げられると思います。

ヒートマップは有料のツールであったり、基本無料だけどかゆいとこに手が届くような機能が欲しい場合は有料になるといったことが多いかと思います。

今回は無料でヒートマップやユーザーの行動をレコーディングできるツールMicrosoft「Clarity」の登録方法や簡単な使い方について説明します。

Clarityの昨日は大きく3つあります。

・ダッシュボード機能
・レコーディング機能
・ヒートマップ機能
の3つになります。
いずれも無料で利用できるので今までヒートマップを導入したいけど中々手をつけてなかったという人は導入してみるといいかもしれません。
それではまずはClarityの登録方法について説明していきます。
なお使い方はGoogleタグマネージャーで設定する方法となります。サイトにClarityのタグを設置しても使えるのでそちらも簡単に説明をしておきます。
Googleタグマネージャーを設定していない方は以下の記事を参照ください。
関連記事

Googleタグマネージャの設定Googleからいくつもの無料で便利なツールがあります。アナリティクス、サーチコンソール、オプティマイズなど。また、有料ではありますがGoogle広告などもあります。いずれもそれらを使うにはサイトにタグを[…]

Clarityの登録方法

それではClarityの登録方法について説明します。

まずは、Clarityのサイトを開きましょう。

Clarityの登録方法1

上の画像のようなトップページが開くかと思います。画像の赤枠で囲んである、「Get started」をクリックしましょう。右上のGet Startedでも構いません。

Clarity登録方法2

すると、マイクロソフト、Facebook、Googleのいずれかのアカウントで登録方法が選べますのでいずれかのアカウントで登録してください。すると選択したアカウントで登録しますけどいいですかといった内容が表示されますので許可して次に進めます。

Clarityの使い方3

登録が終わりますと、上の画像のようなウインドウが表示されるので、①にチェックを入れると②のContinueの色がはっきりとするのでContinueボタンをクリックします。

Clarityの登録方法4

すると、新規プロジェクトの作成画面が表示されます。Name項目はプロジェクトの名前を入力します。今回はこのブログの名前にしました。続いてはClarityで使用したいサイト・ブログなどのURLを入力します。
最後にSite Categoryの項目は選択式になっていてブログやらマーケティングなどの項目があるので自分にあったカテゴリーを選択するといいでしょう。

これで登録は完了です。続いてはClarityをGoogleタグマネージャーで登録する方法を説明します。

ClarityをGoogleタグマネージャーで登録する


先ほどのClarityの新規プロジェクトを作成すると上の画像のような画面に遷移すると思いますが、もし違っていたらダッシュボード画面から①のSettingsをクリックして、②のSetupをクリックすると上の画像のような画面が表示されます。

Googleタグマネージャーに登録する方法は大きく分けて2つで、タグの種類で「Microsoft Clarity」を選択するか、「カスタムHTML」で設定するかの2つです。

まずはタグの種類で選択する方法を説明します。

Clarity:タグの種類で選択する方法

ClarityにGoogleタグマネージャーの設定方法

まずはタグマネージャーのワークスペース画面にて①の「タグ」をクリックして、②の「新規」ボタンをクリックします。

Clarityをタグマネージャーで設定する

するとタグの設定画面が表示されますので、赤枠の「タグの設定」部分をどこかしらクリックしてみてください。左上にClarityと記載してある部分はタグ名なのでクリックすれば任意の名前を入力することができます。

Clarityタグマネージャー コミュニティテンプレートで設定

「タグの設定」をクリックすると横から画像のような画面がスライドします。コミュニティテンプレートギャラリーでと記載してある赤枠の部分をクリックします。

Clarity タグマネージャー コミュニティテンプレートギャラリー

するとさらにスライドで横から画面が出てくるので画像の虫メガネのアイコンをクリックします。

Clarity タグマネ

先ほどの虫メガネアイコンをクリックすると①の入力欄が表示されますので「clarity」と入力するとMicrosoft Clarityのコミュニティテンプレートギャラリーが表示されるので②をクリックします。

clarity タグマネで設定

テンプレートの詳細が表示されるので赤枠の「ワークスペースに追加」をクリックしましょう。

clarity コミュニティテンプレートに追加 タグマネ

すると「コミュニティテンプレートを追加してもよろしいですか?」と聞かれます。これは基本的にGoogle以外のツールをタグマネージャーで使おうとすると表示されます。Yahoo広告のタグも追加する際も表示されます。

赤枠の「追加」をクリックしましょう。

clarity タグの設定

追加をクリックするとタグの設定画面に戻りclarityが設定されています。赤枠の「Account id」の欄にアカウントidを入力します。アカウントidは以下の部分です。

clarityのアカウントid

先ほどのclarityのSetupの画面のアップですが上の画像の赤枠部分をコピーして、タグマネージャーの「Account id」の欄に貼り付けます。

続いてはトリガーの設定です。All Pageをすればいいのですが、タグマネージャー初心者の方もいらっしゃると思うのでトリガーの設定も説明しておきます。分かるかたは飛ばしてもらってかまいません。

clarityのトリガー設定

トリガーとは簡単に説明すると、設定したタグを発火(発動)する条件などを設定する項目です。トリガーは条件は様々設定できます。

タグマネージャーのトリガーの設定方法

先ほどのタグの設定画面の下にトリガーの項目があるので上の画像のトリガー部分のどこかしらをクリックします。

タグマネージャーのトリガーの追加方法

トリガーの選択の画面が表示されます。「All Pages」が表示されています。All Pagesはデフォルトであるトリガーなので今回はこちらを使用するのでそのままAll Pagesの部分をクリックしましょう。

タグマネージャーのタグ設定完了

するとAll Pagesのトリガーが設定されましたのでタグの設定を保存するので画像右上の赤枠の「保存」ボタンをクリックして完了です。

これでClarityの設定は完了です。あとは発火しているかの確認です。

clarityタグを発火の確認

タグマネージャーのプレビュー

まずはタグマネージャーのワークスペースの右上にある、「プレビュー」ボタンをクリックします。

たぐマネージャーのプレビュー方法

すると別タブでポップアップ画面が出ますので①にタグマネージャーを埋め込んであるサイトのURLを入力し、②のstartをクリックします

すると別ウインドウで先ほど入力したURLのサイトが開かれます。

今回はコンバージョンやイベントタグは仕込んでませんので、先ほどの別タブの画面に戻ってみましょう。

タグマネージャープレビューコネクト

先ほどのタブに戻ると、Connected!と表示されますのでcontinueボタンをクリックします。

タグ発火

赤枠の部分「Tags Fired」に注目してもらいいたのですが、ここがいわゆる「タグの発火」が起きているということです。今回はトリガーがAll Pagesなのでページを開いただけでタグが発火している状態です。

下の部分に「Tags Not Fired」とありますが、これはまだタグが発火していないタグがあります。これらは特定の条件やイベントが発生したら発火します。
例えば申し込みのページに到達したら発火するタグもありますし、電話番号をタップしたら発火するタグも設定することができます。

これで完了!と思うかもしれませんが、タグマネージャーは設定してプレビューで確認した後に、「公開」しなければ意味がありません。

なのでプレビューで問題なければ、ワークスペースに戻ってもらい、画面右上の「公開」ボタンをクリックします。

タグマネージャーの公開

最後にバージョン名・バージョンの説明を入力して、右上の公開ボタンをクリックすれば完了です。

clarityのタグマネージャー:カスタムHTML

続いてカスタムHTMLでclarityのトラッキングコードを設定する方法です。
カスタムHTMLでタグマネージャー設定

まずは、タグマネージャーのワークスペースを開きます。

右上の新規ボタンをクリックして新規タグを作成しましょう。

タグマネージャー タグの作成

タグの設定の部分をクリックしましょう。

カスタムHTML

画面右側からタグタイプを選択の画面がスライドして出てきます。少し下の方に「カスタムHTML」の項目があるのでそちらを選択します。

この部分で表示されtたcralityのトラッキングコードをコピーします。

cralityカスタムHTML設定

そしたらカスタムHTMLの欄に貼り付けます。これでタグは設定は終わりでトリガーはコミュニティテンプレートと同じでAll Pagesで大丈夫です。その後の設定も同じなので割愛します。

clarityの簡単な説明

近日公開

clarityのまとめ

この記事ではマイクロソフトclarityの登録方法や設定方法について解説しました。ヒートマップに興味あるけど、無料で使ってみたいという人にはおすすめですのでぜひ利用してみてください。

ヒートマップ自体はあくまでツールですので、自分では気づかないサイトの分析、改善のヒントが出てくるかもしれませんので活用してみてください。

最新情報をチェックしよう!