Microsoft ClarityをGTMに設定する方法

ヒートマップ大好きなんですが、最近はなかなか現場で使う機会がなく悲しいです。

さて、ヒートマップでは主にhotjarを使ってきました私ですが、Microsoft Clarityの機能追加が著しく、最近とても良い感じですね。正直乗り換え候補として有力すぎます。

新規のご提案ではhotjarよりClarityをおすすめしてしまうかも。現在のところ無料というのもかなり魅力的です。導入ハードルがグッと下がりますからね。

今回はMicrosoft Clarityのアカウントを作ってGTMに挿入する方法をメモします。

以前まで日本語版の提供がなかったため、英語版で使っているのですが、日本語版もあります。いつ追加されたのでしょう。まったく気づきませんでした。

アカウント・プロジェクト作成

まずはMicrosoft Clarityのトップページhttp://clarity.microsoft.comにアクセス。

アカウント作成からなので右上の「Sign up」をクリックします。

Microsoftアカウント、Facebookアカウント、Googleアカウントのいずれかを選んでサインアップ。私は大体安定のGoogleアカウントを使います。

表示された手順に沿って登録します。既存の内部あるいは外部アカウントにログインするだけですのでかなり簡単です。

登録が完了するとマイページのMy Projects画面に遷移します。「Add new project」からプロジェクトを追加しましょう。

1サイトにつき1プロジェクトです。

Webサイトの名前とURLを入力。URLはhttps://を除いた値（https://seikoyamaguchi.com なら seikoyamaguchi.com ）を入力します。

サイトカテゴリをE-Commerce, SaaS, Blog, Marketing, Conslting, Media, Education, Community, Non-profit, Otherの10種類から選びます。

名前とサイトカテゴリは後から変更できますが、URLは変更できません。URLの変更を行う場合は新たにプロジェクトを作り直す形になりますので、ご注意ください。

以前は名前とサイトカテゴリも変更できなかった（ような気がする）のですが、変更できるようになったので、そのうちURLの変更も可能になるかもしれませんね。

管理画面からSettings > Setupを選択します。

もう見えているのですが、中腹にトラッキングコードがあります。

Copy to clipboardをクリックしてコピー。

なお、下部にある「Masking settings」ボタンからできるマスキング設定は、この時点で確認しておくと後々のリスクを回避できる可能性が高いです。

GTMに移動します。

左メニューのタグを選択し、「新規」ボタンをクリックします。

上段の「タグの設定」をクリックすると「タグタイプを選択」が表示されるので、「カスタムHTML」をクリックします。

名前を入力し、HTML欄に先ほどMicrosoft Clarity管理画面上でコピーしたコードをペーストします。

トリガーを設定して保存をクリック。

あとはプレビューしたのち公開して完了です。2時間ほどでデータが管理画面に反映されます。

分析するサイトを増やす場合は同様に、Microsoft Clarity管理画面のMy ProjectsからAdd projectをして追加してください。