【無料ヒートマップ】GTM経由でClarityを導入する手順

2022年8月29日IT・テクノロジー,Web分析Clarity,GTM,ヒートマップ

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のタグを設置する方法をご紹介しました。