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

Using Streamlit
1

Hi all,

I would like to monitor the traffic on my app using Google Analytics. What is the best way to achieve this?
I need to insert something like that

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-44444444-1"></script>

Also, what about Google Adsense code?

I hope there is a way to inject these in Steamlit somehow.

Thanks in advance for support.

9 Likes
2

It is very proud to see Streamlit become so far :slight_smile: I believe this will go bigger and bigger :pray:

3 Likes
3

Hi @mzeidhassan.

There are a couple of javascript hacks using st.bokeh_chart in the Gallery at awesome-streamlit.org. In the current implementation you need to click a button or move a slider for it to run.

But i think that somebody with JS skills can find a workaround for that.

I havent understood the problem with JS. In All the other frameworks like bokeh, panel, voila and Dash you Can do it.

2 Likes
4

Thanks @Marc for your kind reply. You have been doing great things for Streamlit, so I want to thank you for that.

Streamlit is amazing indeed, but we should be able in an easy way to add JS scripts for things like Google Analytics, Google Adsense, etc.

Do you think I should create a github issue for that?

Thanks again for your support!

4 Likes
5

Iā€™ll save you a step: I made an enhancement request for the ability to use arbitrary Javascript blocks here. :bow_and_arrow:

3 Likes
6

Itā€™s not a technical problem so much as it is a question of which features to develop before other ones.

Currently weā€™re working on a couple of performance boosting improvements especially to do with serialization of large datasets, making caching more reliable, and polishing a lot of existing features. Itā€™s all about making good on the promise of being able to do beautiful things with data, first and foremost.

Meanwhile, I personally spent most of December gathering user stories as per desires for the use of HTML and Javascript in Streamlit. We definitely get that these limitations are preventing certain types of uses. And this month we have a couple of PRs in the making in response to those user stories.

Thanks for all your continued bug reports and feature suggestions. We read them all. :heart:

10 Likes
7

Thanks a million @nthmost for creating the github issue. I appreciate it. I hope we will see this feature added soon. This will be an amazing and much-needed addition to Streamlit. Thanks again for creating such a great framework. :+1:

2 Likes
8

It would be really awesome to have thisā€¦ really would like to track the users on the site I deployed using streamlit!

7 Likes
9

Any updates on this request?

2 Likes
10

Not answers the question on using javascript code from google analytics, but allows measuring traffic by using a tracking pixel code through GA: https://htmlemail.io/blog/google-analytics-email-tracking

2 Likes
11

I wanted to set up Google Analytics for my Streamlit app. What worked for me was changing the static index.html inside the streamlit package (os.path.dirname(st.__file__)) . Just below the <head> you can add your javascript code for the analytics. This definitely isnā€™t good practice but I needed analytics set up urgently.

Note: I have only one app deployed, so this works great. If you have multiple apps, this might create some problems. In that case, create a different virtual environment for each of them and repeat the same.

9 Likes
12

Your suggestion works for me. My site at https://covid19.aipert.org now has GA. Many thanks!

4 Likes
13

Would like to share what worked for me. I made a flask website and put the streamlit app inside an iframe on one of the pages (the ā€¦/ai_app page). This way you have direct access to the head tag and so can easily insert the adsense or analytics code. In case youā€™d like to see how it turned out, the site is at http://deepretouch.com (adsense says itā€™d take ā€œa few daysā€ to show, but analytics fully works right now).

4 Likes
14

This looks a very good approach. I tried to do it similar way, but while uploading image in the streamlit app from iframe it is giving 403 error. My streamlit app and flask website is running seperately on my lock desktop. Looks like streamlit server is not allowing flask server to upload the file. Am I doing things correctly. Can you please advise and guide me. Thanks !

15

I remember having a similar problem when uploading big images. Maybe try with a small (<30KB) one. Iā€™m running the flask site with gunicorn and nginx. To allow larger images I had to modify the nginx configuration file.
Also, Iā€™m not using the latest version of streamlit. I recall that one of the changes in more recent versions was that the uploader now requires to explicitly specify the decoding.

16

@suryatejreddy and @Quoc_Tran is this done through the terminal? I tried going to the path of the repo of my app and tried ls -a. There was not a (st. file) in the directory? Can you please guide me how to find it?

Thanks!

17

This is done through the terminal via a python session. For me:

import os
import streamlit as st
(os.path.dirname(st.file))
ā€˜anaconda3/envs/st65/lib/python3.7/site-packages/streamlitā€™ If you still need help, we can chat through LinkedIn

18

suryatejreddy thanks for suggestion, worked great for me.

since I deploy automatically I needed to change the file using code and came up with the following lines in the app code that checks whether there is GA script in the index.html and if not inserts it from the ā€˜codeā€™ variable.

code = """<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'UA-XXXXXXXXX');
</script>"""

a=os.path.dirname(st.__file__)+'/static/index.html'
with open(a, 'r') as f:
    data=f.read()
    if len(re.findall('UA-', data))==0:
        with open(a, 'w') as ff:
            newdata=re.sub('<head>','<head>'+code,data)
            ff.write(newdata)
9 Likes
19

Hi there, maybe this could be useful streamlit-analytics 0.2.1

1 Like
20

This wrecked my serverā€¦ Cannot go back the tags are permanently in the static files now, how do we reset them ? Thanks

Edit : For those looking for a way, I resolved it by recreating the conda environment I used for the script. Apparently the static files are stored in it. If itā€™s the base env, youā€™ll need to create a new one.
The right way would be to fix the static index.html but I messed it and got a blank file ^^

1 Like