Use Clarity NPM package

app/components/ClarityTracking.tsx

@@ -1,3 +1,5 @@
+import Clarity from "@microsoft/clarity";
+
 const ClarityTracking: FC = () => {
   const {
     component,
@@ -6,9 +8,9 @@ const ClarityTracking: FC = () => {
 
   // == Current user tracking
   useShallowEffect(() => {
-    if (typeof clarity !== "undefined" && currentUser) {
+    if (currentUser) {
       const { id, name } = currentUser;
-      clarity("identify", id, undefined, component, name);
+      Clarity.identify(id, undefined, component, name);
     }
   }, [currentUser, component]);
 

app/helpers/clarity.ts

@@ -0,0 +1,13 @@
+import Clarity from "@microsoft/clarity";
+
+import { getMeta } from "~/helpers/meta";
+
+export const setupClarity = () => {
+  const projectId = getMeta("clarity-project-id");
+  if (projectId) {
+    Clarity.init(projectId);
+    console.info("Initialized Clarity", projectId);
+  } else {
+    console.warn("Missing Clarity project ID; skipping initialization");
+  }
+};

app/views/layouts/application.html.erb

@@ -43,14 +43,8 @@
     <% end %>
 
     <%# == Clarity %>
-    <% if Rails.env.production? && (settings = Clarity.settings) %>
-      <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", "<%= settings.project_id %>");
-      </script>
+    <% if (settings = Clarity.settings) %>
+      <meta name="clarity-project-id" content="<%= settings.project_id %>">
     <% end %>
 
     <%# == Vite %>

package.json

@@ -25,6 +25,7 @@
     "@mantine/modals": "^7.12.1",
     "@mantine/notifications": "^7.12.1",
     "@mantine/nprogress": "^7.12.1",
+    "@microsoft/clarity": "^1.0.0",
     "@rails/actioncable": "^7.1.3-2",
     "@rails/activestorage": "^7.1.3-2",
     "@react-email/components": "^0.0.25",

sorbet/rbi/shims/lib/frozen_record.rbi

@@ -0,0 +1,6 @@
+# typed: true
+
+class FrozenRecord::Base
+  sig { params(id: T.untyped).returns(T.attached_class) }
+  def self.find(id); end
+end