Microsoft Clarity tracking analytics not working properly

Summary

I am trying to collect some analytics data on my streamlit app that’s hosted on streamlit cloud. I tried adding the tracking code for Microsoft Clarity to the head file. I see some tracking metrics pop up but the numbers looks quite off.

Steps to reproduce

Code snippet:

import streamlit.components.v1 as components

components.html("""
<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", "g665b0hqie");
</script>
    """)

As part of the instructions, I had to add the script tag in the file.

If applicable, please provide the steps we should take to reproduce the error or specified behavior.

Expected behavior:
I am expecting more actual metrics popping up. Example, I know users from other countries used to login to the app, but it doesn’t show up here. Also the heatmaps tab doesn’t capture properly the user journey in the website.

Actual behavior:

Additional information

Should I be adding the tracking code in a different approach?

I have the same issue.

So do I

1 Like

Anyone from streamlit can help on this please??

Hey all,
Are you still experiencing tracking inconsistency?
Thank you

I’ve inserted the Clarity script into our Streamlit app but the Clarity recordings do not show any screens or even clicks. All it shows is a gray line.

In order to include the Clarity script in the head tag, I inserted a javascript function to find the head tag and append a script element containing the Clarity snippet.

document.addEventListener("DOMContentLoaded", function (event) {
    let headElements = document.getElementsByTagName("head");
    let headElement = headElements[0]
    let textNode = document.createTextNode("inserting clarity here")
    let clarityScript = document.createElement("script");
    clarityScript.type = "text/javascript"
    let code = `(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", "abc123456789");`
    clarityScript.appendChild(document.createTextNode(code));
    headElement.appendChild(textNode);
    headElement.appendChild(clarityScript);
});

I used streamlit_javascript to run this javascript at the start of our app:

import streamlit_javascript
...
with open('static_resources/append_clarity.js') as f:
                st_javascript(f"{f.read()}")

Although I used this script to find the first head tag, the rendered page has a head tag above it.

Here’s an abbreviated outline of the html document…

<iframe>
<html>
<head>    <---- this is first head tag (but not found by my script)
<body>
<div>
...
<div>
<html>  
<head>     <--- this is the head element where my script inserts clarity