【無料ヒートマップ】GTM経由でClarityを導入する手順
![](https://tetsuooo.net/wp-content/uploads/2022/08/image-1-1024x492.jpg)
Microsoftが無料のヒートマップツール「Clarity」を提供しています。導入方法はいくつかありますが、この記事ではGTM経由の設定手順をご紹介します。
GTMを使ってClarityを動かすには、①「Clarity管理画面上ですべて操作する方法」と②「GTMに手動でタグを設置する方法」の2つの方法があります。
事前準備(アカウント登録~GTM連携)
Clarityへのアカウント登録
まずはClarityのサイト(https://clarity.microsoft.com/)へ行き、アカウント登録を行います。Microsoftアカウントがある方はそのまま使えますし、GoogleアカウントやFacebookアカウントでも登録できます。
![](https://tetsuooo.net/wp-content/uploads/2022/08/image-68.png)
![](https://tetsuooo.net/wp-content/uploads/2022/08/image-67-edited.png)
プロジェクトの作成
Clarityの分析は「Project(プロジェクト)」という単位によって管理されるので、プロジェクトの作成を行います。最初にアカウント登録した時はそのまま促されるので、誘導に従って「Name(プロジェクト名)」と「Website URL」を入力してプロジェクトを作成してください。
![](https://tetsuooo.net/wp-content/uploads/2022/08/image-69-1024x495.png)
①Clarity管理画面上ですべて操作する方法
GTMとの連携・権限承認
セットアップ画面でGTMを選択します。
![](https://tetsuooo.net/wp-content/uploads/2022/08/image-70.png)
GTMで登録しているアカウントとの連携を進めてください。
![](https://tetsuooo.net/wp-content/uploads/2022/08/image-71.png)
GTMの各権限のチェックボックスを入れて続行。
![](https://tetsuooo.net/wp-content/uploads/2022/08/image-74.png)
タグの設置
Clarityアカウント内でGTMのタグ設置を完了させます。
![](https://tetsuooo.net/wp-content/uploads/2022/08/image-77.png)
Googleアカウントで連携できるGTMアカウントが選択肢に現れるので、ヒートマップを入れたいサイトが登録されているアカウント/コンテナを選択してください。
![](https://tetsuooo.net/wp-content/uploads/2022/08/image-78.png)
これで設定は完了です。GTM内で自分で作業しなくても良いので非常に楽ですね。
タグ設置されているか確認
念のため、GTMアカウント内でClarityのタグが設置されているか見てみます。All PagesをトリガーとしてClarityのタグが設置されているか確認できました。
![](https://tetsuooo.net/wp-content/uploads/2022/08/image-79-1024x392.png)
②GTMに手動でタグを設置する方法
Clarity管理画面でProject IDの確認
プロジェクト管理画面を開いた時のURLhttps://clarity.microsoft.com/projects/view/"projectId"/より「ProjectId」を探すか、Setting画面に表示されているIDを確認します。
後ほどタグ設置にID文字列を使うのでコピーしておいてください。
![](https://tetsuooo.net/wp-content/uploads/2022/08/image-112.png)
GTMでタグを設置
新規タグを設置します。
![](https://tetsuooo.net/wp-content/uploads/2022/08/image-107.png)
わかりやすいタグ名を付けて「タグの設定」をクリック。
![](https://tetsuooo.net/wp-content/uploads/2022/08/image-105.png)
タグタイプはデフォルトリストに掲載されていないので、コミュニティテンプレートから探します。
![](https://tetsuooo.net/wp-content/uploads/2022/08/image-106.png)
検索窓で「Clarity」と検索するとMicrosoftが用意しているテンプレートが出てくるので選択してください。
![](https://tetsuooo.net/wp-content/uploads/2022/08/image-109.png)
先ほどコピーしたIDを入力します。
![](https://tetsuooo.net/wp-content/uploads/2022/08/image-110.png)
最後にトリガーをAll Pagesにして完了です。
![](https://tetsuooo.net/wp-content/uploads/2022/08/image-111.png)
まとめ
GTM経由でClarityのタグを設置する方法をご紹介しました。