🍙

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

2023/01/05に公開約1,000字

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
  1. nuxt.config.jsを編集します。
modules: [
  'nuxtjs-microsoft-clarity'
]
microsoftClarity: {
  // Options
  id: "プロジェクトID"
},
  1. Buildする

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

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

まとめ

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

Discussion

ログインするとコメントできます