はじめに

本サイトは4月20日に、ノーコード開発ツール「Studio」へ移行しました。

GA4やSearch ConsoleはApps連携が用意されているので、設定はかなりスムーズです。
一方で、Microsoftのヒートマップツール「Clarity」については、公式でも連携機能が提供されていないと案内されています。

ヒートマップサービスとStudioを連携設定ができるApps連携の提供はしていません。
サイトや個々のページの や タグに独自のコードが追加できるカスタムコード機能やコードが埋め込めるEmbedボックスを使い、利用できるかどうかご自身でお試しいただくことは可能です。ご検討ください。
出典：公式ヘルプサイトより

実際には、head部分にコードを追加するだけなので、そこまで難しい作業ではありません。
せっかくなので、今回は備忘録も兼ねて手順を残しておこうと思います。

設定手順

大まかな流れは以下の通りです。

1. Clarityからスクリプトコードを取得

2. Studioのエディタからコードを埋め込み

3. サイト更新後、動作を確認

キャプチャとあわせて、実際の設定手順も見ていきます。
まずはClarityにログインし、今回設定したいプロジェクトを選択します。

プロジェクト画面を開いたら、「設定 ＞ セットアップ ＞ 手動でインストールする」を選択し、スクリプトコードを表示します。

表示されたコードをコピーしておきます。
次にStudioへログインし、ヒートマップを埋め込みたいサイトのプロジェクトを開きます。

対象サイトのエディタ画面を開いたら、右パネルの「サイト」タブから、「カスタムコード」の「 内の末尾」に、先ほどコピーしたコードを貼り付けます。

このとき、「サイト」タブではなく「ページ」タブで設定すると、そのページだけが計測対象になります。
サイト全体でデータを取得したい場合は、「サイト」タブ側に設定してください。

これで基本的な設定は完了です。
ただし、エディタ画面で設定したカスタムコードを実際のサイトへ反映するには、公開情報の更新が必要です。この更新を忘れると、コードを設定したつもりでもデータ計測が始まらないので注意してください。
地味ですが、意外とやりがちなポイントです。

最後に、Clarityのプロジェクト画面を開き、実際にデータが取得できているか軽く確認しておくと安心です。

ざっと試した感じだと、この方法ではStudioのプレビューサイト側のアクセスも拾ってしまうようでした。

個人的にはそこまで気にならないので今回は対応していませんが、おそらくURLやドメインでフィルターをかければ問題なく計測できると思います。

さいごに

今回は、StudioへのClarity埋め込み手順をざっくりまとめてみました。

内容としてはかなりシンプルなので、わざわざ記事にするほどでもない気はしていますが、同じところで迷う人のメモ代わりくらいにはなるかもしれません。

本サイトでも、Clarityを導入してから気づけば1年ほど経ちました。
ただ、正直なところ、まだそこまで分析に活用できているわけではありません…。

せっかく入れているので、今後はもう少しちゃんと活かしていきたいところです。

参考サイト

• ヘルプ - Studioはヒートマップツールと連携できますか？

• ヘルプ - サイト・ページにカスタムコードを追加する