【Nuxt.js】Microsoftの分析ツールClarityの導入が簡単すぎた

Clarityとは

ClarityはMicrosoftが提供するWebサイトの分析ツールです。
無料で使用でき、セッションの記録（画面録画）、ヒートマップ、インサイトの確認が可能です。
https://learn.microsoft.com/en-us/clarity/about-clarity

Nuxt.jsのアプリケーションに導入

1. Clarityにサインアップします。
   https://clarity.microsoft.com/

2. プロジェクトを作成し、プロジェクトIDを確認します。
   プロジェクトの画面から>設定>概要に記載がありました。
   

3. npmでClarityをインストールします。
   https://www.npmjs.com/package/nuxtjs-microsoft-clarity

$ npm i nuxtjs-microsoft-clarity --save

4. nuxt.config.jsを編集します。

modules: [
  'nuxtjs-microsoft-clarity'
]
microsoftClarity: {
  // Options
  id: "プロジェクトID"
},

5. Buildする

以上で導入手順は完了です。

build後に画面を表示すると、Clarityのプロジェクトの画面からレコーディングされた操作内容や、アクティブなユーザーの数などがリアルタイムで確認できました。
ユーザーのメールアドレス、投稿日時などに自動でマスクがかけられています。
localhostでもモニタリングされることを確認できました。

まとめ

導入がとても簡単でかつ無料で使用できて感動しました。
画面の表示項目をマスクの度合いを変更したり、サードパーティのプラットフォームにインストールしたり、Googleアナリティクスと統合したり、いろんなことができるようです。