Clarityのヒートマップ表示の際、オーバーレイメニューが邪魔

スマホ向けのWebサイトでは、メニューをオーバーレイ表示していることが多いと思います。例えば、右上にハンバーガー（三本線のアイコン）を設置しておき、そこをタップするとオーバーレイ（モーダル）でメニューが表示される、という感じ。

しかし、Microsoft Clarityでスマホページのスクロールヒートマップを確認したいときに、このオーバーレイ（モーダル）メニューが開いた状態になってしまい、いくら下方向へスクロールしても、ずっとメニューが表示されてしまう、という現象に悩まされていました。

たぶん、同じような現象で悩まされている方も多いのでは。

結論から言うと

スクロールヒートマップ表示でメニューが開いた状態になってしまった場合は、一度「タップ」もしくは「領域」を開いた後、「スクロール」に戻ってみると…なんとメニューが閉じた状態で表示されます。

100％オーバーレイ（モーダル）が閉じてくれるかどうかは分かりませんが、おそらく高確率で閉じてくれるのではないでしょうか。「タップ」もしくは「領域」を開いたときにメニューが閉じていれば、自分の環境では100％「スクロール」でもメニューが閉じてくれました。

ちなみに、オーバーレイ（モーダル）が閉じた状態で再読み込みしてみると、またメニューが開いてしまいますので注意。

さいごに

ということで、Microsoft Clarityのスクロールヒートマップで、オーバーレイ（モーダル）メニューがずっと表示し続ける現象を解決してみました。

解決というほどのことではないかもしれませんが、忘れっぽい自分のためにメモメモ。

今日の作業は以上です。お疲れ様でした！