Clarity

プロジェクト作成

• 以下の URL にアクセス
  • https://clarity.microsoft.com/projects
• New Project をクリック
  • Name にプロジェクト名を入力
    • 例: bdash-sources-dev
  • Website URL には、URL を入力
    • 例: https://bdash-sources-dev.com
  • Website Industry には、業界を選択
    • 例: B2B Services
  • Add new project をクリック

https://clarity.microsoft.com/projects/view/ocmfdo78t2/settings#setup に遷移

トラッキングコードの設置

• Installation methods の、Install manually の Get tracking code をクリック
• トラッキングコードから、ID をメモしておく(以下の場合、ocmfdo78t2)

<script type="text/javascript">
    (function(c,l,a,r,i,t,y){
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "ocmfdo78t2");
</script>

• ID を環境変数に設定する
  • 例:
    • NEXT_PUBLIC_CLARITY_ID=ocmfdo78t2

GitHub Actions での設定

• 環境変数に、DEV_NEXT_PUBLIC_CLARITY_ID, PROD_NEXT_PUBLIC_CLARITY_ID を設定する
  • 例:
    • DEV_NEXT_PUBLIC_CLARITY_ID=ocmfdo78t2
    • PROD_NEXT_PUBLIC_CLARITY_ID=ocmfdo78t2