feat: allow Microsoft Clarity from CDN (#7163)

* feat: add microsoft clarity to main app

* feat: mask messages

* fix: spacing

.env.example

@@ -173,6 +173,9 @@ ANDROID_SHA256_CERT_FINGERPRINT=AC:73:8E:DE:EB:56:EA:CC:10:87:02:A7:65:37:7B:38:
 ## LogRocket
 # LOG_ROCKET_PROJECT_ID=xxxxx/some-project
 
+# MICROSOFT CLARITY
+# MS_CLARITY_TOKEN=xxxxxxxxx
+
 ## Scout
 ## https://scoutapm.com/docs/ruby/configuration
 # SCOUT_KEY=YOURKEY

app/javascript/dashboard/components/widgets/conversation/MessagesView.vue

@@ -36,6 +36,7 @@
         v-for="message in getReadMessages"
         :key="message.id"
         class="message--read ph-no-capture"
+        data-clarity-mask="True"
         :data="message"
         :is-a-tweet="isATweet"
         :is-a-whatsapp-channel="isAWhatsAppChannel"
@@ -56,6 +57,7 @@
         v-for="message in getUnReadMessages"
         :key="message.id"
         class="message--unread ph-no-capture"
+        data-clarity-mask="True"
         :data="message"
         :is-a-tweet="isATweet"
         :is-a-whatsapp-channel="isAWhatsAppChannel"

app/views/layouts/vueapp.html.erb

@@ -50,8 +50,8 @@
       window.browserConfig = {
         browser_name: '<%= browser.name %>',
       }
-      window.errorLoggingConfig = '<%= ENV.fetch('SENTRY_DSN', '')%>'
-      window.logRocketProjectId = '<%= ENV.fetch('LOG_ROCKET_PROJECT_ID', '')%>'
+      window.errorLoggingConfig = '<%= ENV.fetch('SENTRY_DSN', '') %>'
+      window.logRocketProjectId = '<%= ENV.fetch('LOG_ROCKET_PROJECT_ID', '') %>'
     </script>
     <% if @global_config['ANALYTICS_TOKEN'].present? %>
     <script>
@@ -84,5 +84,14 @@
       })(document,"script");
     </script>
     <% end %>
+    <% if ENV.fetch('MS_CLARITY_TOKEN', nil).present? %>
+      <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', '<%= ENV.fetch('MS_CLARITY_TOKEN', '') %>');
+      </script>
+    <% end %>
   </body>
 </html>