マイクロソフト「Clarity」とは
サイトの改善をするとしたら何があると思いますか。いくつか挙げてみるとABテストであったり多変量テスト、そしてヒートマップ解析などが挙げられると思います。
ヒートマップは有料のツールであったり、基本無料だけどかゆいとこに手が届くような機能が欲しい場合は有料になるといったことが多いかと思います。
今回は無料でヒートマップやユーザーの行動をレコーディングできるツールMicrosoft「Clarity」の登録方法や簡単な使い方について説明します。
Clarityの昨日は大きく3つあります。
・レコーディング機能
・ヒートマップ機能
Clarityの登録方法
それではClarityの登録方法について説明します。
まずは、Clarityのサイトを開きましょう。
上の画像のようなトップページが開くかと思います。画像の赤枠で囲んである、「Get started」をクリックしましょう。右上のGet Startedでも構いません。
すると、マイクロソフト、Facebook、Googleのいずれかのアカウントで登録方法が選べますのでいずれかのアカウントで登録してください。すると選択したアカウントで登録しますけどいいですかといった内容が表示されますので許可して次に進めます。
登録が終わりますと、上の画像のようなウインドウが表示されるので、①にチェックを入れると②のContinueの色がはっきりとするのでContinueボタンをクリックします。
すると、新規プロジェクトの作成画面が表示されます。Name項目はプロジェクトの名前を入力します。今回はこのブログの名前にしました。続いてはClarityで使用したいサイト・ブログなどのURLを入力します。
最後にSite Categoryの項目は選択式になっていてブログやらマーケティングなどの項目があるので自分にあったカテゴリーを選択するといいでしょう。
これで登録は完了です。続いてはClarityをGoogleタグマネージャーで登録する方法を説明します。
ClarityをGoogleタグマネージャーで登録する
先ほどのClarityの新規プロジェクトを作成すると上の画像のような画面に遷移すると思いますが、もし違っていたらダッシュボード画面から①のSettingsをクリックして、②のSetupをクリックすると上の画像のような画面が表示されます。
Googleタグマネージャーに登録する方法は大きく分けて2つで、タグの種類で「Microsoft Clarity」を選択するか、「カスタムHTML」で設定するかの2つです。
まずはタグの種類で選択する方法を説明します。
Clarity：タグの種類で選択する方法
まずはタグマネージャーのワークスペース画面にて①の「タグ」をクリックして、②の「新規」ボタンをクリックします。
するとタグの設定画面が表示されますので、赤枠の「タグの設定」部分をどこかしらクリックしてみてください。左上にClarityと記載してある部分はタグ名なのでクリックすれば任意の名前を入力することができます。
「タグの設定」をクリックすると横から画像のような画面がスライドします。コミュニティテンプレートギャラリーでと記載してある赤枠の部分をクリックします。
するとさらにスライドで横から画面が出てくるので画像の虫メガネのアイコンをクリックします。
先ほどの虫メガネアイコンをクリックすると①の入力欄が表示されますので「clarity」と入力するとMicrosoft Clarityのコミュニティテンプレートギャラリーが表示されるので②をクリックします。
テンプレートの詳細が表示されるので赤枠の「ワークスペースに追加」をクリックしましょう。
すると「コミュニティテンプレートを追加してもよろしいですか？」と聞かれます。これは基本的にGoogle以外のツールをタグマネージャーで使おうとすると表示されます。Yahoo広告のタグも追加する際も表示されます。
赤枠の「追加」をクリックしましょう。
追加をクリックするとタグの設定画面に戻りclarityが設定されています。赤枠の「Account id」の欄にアカウントidを入力します。アカウントidは以下の部分です。
先ほどのclarityのSetupの画面のアップですが上の画像の赤枠部分をコピーして、タグマネージャーの「Account id」の欄に貼り付けます。
続いてはトリガーの設定です。All Pageをすればいいのですが、タグマネージャー初心者の方もいらっしゃると思うのでトリガーの設定も説明しておきます。分かるかたは飛ばしてもらってかまいません。
トリガーとは簡単に説明すると、設定したタグを発火(発動)する条件などを設定する項目です。トリガーは条件は様々設定できます。
先ほどのタグの設定画面の下にトリガーの項目があるので上の画像のトリガー部分のどこかしらをクリックします。
トリガーの選択の画面が表示されます。「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」の項目があるのでそちらを選択します。
この部分で表示されtたcralityのトラッキングコードをコピーします。
そしたらカスタムHTMLの欄に貼り付けます。これでタグは設定は終わりでトリガーはコミュニティテンプレートと同じでAll Pagesで大丈夫です。その後の設定も同じなので割愛します。
clarityの簡単な説明
近日公開
clarityのまとめ
この記事ではマイクロソフトclarityの登録方法や設定方法について解説しました。ヒートマップに興味あるけど、無料で使ってみたいという人にはおすすめですのでぜひ利用してみてください。
ヒートマップ自体はあくまでツールですので、自分では気づかないサイトの分析、改善のヒントが出てくるかもしれませんので活用してみてください。