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