How to add Google Analytics or JS code in a Streamlit app?

Using Streamlit
42

Yes, it’s a head inside an iframe, hence I think something like this will make it work:

<script crossorigin='anonymous'>
add script
</script>

In addition to that, whenever the script accesses window or document, you should use parent.window and parent.document.

1 Like
43

Hi @ozgurdugmeci

I am trying to implement the statcounter code. Does it look something like this?

st.markdown("""
        <!-- Default Statcounter code for product-tour-with-analytics
        https://product-tour-with-analytics.onrender.com -->
        <script type="text/javascript">
        var sc_project=AAAAAAA; 
        var sc_invisible=0; 
        var sc_security="BBBBB"; 
        var scJsHost = "https://";
        document.write("<sc"+"ript type='text/javascript' src='" + scJsHost+
        "statcounter.com/counter/counter.js'></"+"script>");
        </script>
        <noscript><div class="statcounter"><a title="Web Analytics Made Easy -
        Statcounter" href="https://statcounter.com/" target="_blank"><img
        class="statcounter" src="https://c.statcounter.com/AAAAAA/0/BBBBB/0/"
        alt="Web Analytics Made Easy - Statcounter"
        referrerPolicy="no-referrer-when-downgrade"></a></div></noscript>
        <!-- End of Statcounter Code -->
""", unsafe_allow_html=True
)

I insert the above code before I render any widgets (buttons, forms, expanders etc.)

Is that correct?

1 Like
44

Hi @C_Quang ,
This is how handle the statcounter code:

import streamlit.components.v1 as components

#this code below is the statcounter tracking code
takip= """
<!-- Default Statcounter code for euro_stats
https://euroleaguestats.streamlit.app/ -->
<script type="text/javascript">
var sc_project='somenumber'; 
var sc_invisible=1; 
var sc_security="sometext"; 
</script>
<script type="text/javascript"
src="https://www.statcounter.com/counter/counter.js"
async></script>
<noscript><div class="statcounter"><a title="web counter"
href="https://statcounter.com/" target="_blank"><img
class="statcounter"
src="https://c.statcounter.com/12825092/0/190e10f1/1/"
alt="web counter"
referrerPolicy="no-referrer-when-downgrade"></a></div></noscript>
<!-- End of Statcounter Code -->
"""
components.html(takip,width=200, height=200)
1 Like
45

Thanks @ozgurdugmeci I’ll be keen to give that a go. I’ll let you know if it works for me

1 Like
46

One more thing,
import streamlit.components.v1 as components on the top
and add the rest of the lines at the very end of your script

1 Like
47

Do we need to add the component to all the pages or will it be sufficient to add it to the homepage ?

1 Like
48

Any updates on this? I haven’t been able to integrate Google Analytics with my application using the suggested implementations that have been posted the last couple of years

1 Like
49

I’ve tried that, it didn’t work for me. My app is hosted in Streamlit community cloud.

1 Like
50

Here is an example of how to implemente GA in Streamlit using bi-directional components API. A lot of things to improve, but it works.

1 Like
51

I am using the Community Cloud deployment from Github and this hack (the inject_ga method above) did not work.

I get a permission error when trying to modify the index file:

PermissionError: [Errno 13] Permission denied: '/home/adminuser/venv/lib/python3.11/site-packages/streamlit/static/index.bck'

Unfortunately it looks like we do not have the right permission to edit the index file so this workaround does not work for the community cloud deployment of streamlit.

1 Like
52

I don’t think that you can overwrite those files in the cloud deployment. If you make your own docker image to deploy you totally can change those base files. Couldn’t you just write the HTML needed through markdown? Though if you have to load any Javascript you may want to cache that to avoid reloading it.

1 Like
53

For reasons explained earlier in the thread, the builtin streamlit markdown or HTML method do not work for GA.

I just posted to confirm that the injection method does not work for community cloud as of now.