Google Analytics component

🧩 Custom Components
1

I am trying to make a simple component to enable google analytics, and I can’t seem to get it to work.

import streamlit.components.v1 as components


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

        gtag('config', google_analytics_id);
        </script>
	""",
        height=1,
        scrolling=False,
    )

Then in my app.py sidebar menu page, I have call the component. But I do not see the script loaded.

2

Try statcounter, simpler to use and works. Same implementation as the above, but it works. Also, this seems relatively straight forward. I wouldn’t waste any further time on google analytics. But if you can get it to work like he did, then be my guest.

3

I really want to use Google Analytics as I am interested in much more than just how many hits. I want to know geo location, sources, and other things.

4

Yeah, statcounter gives you all that too. Their location, IP address, country, and more data.

kkk
kkk319×861 22.9 KB

5

I still prefer to use Google Analytics for a few reasons, but I also want to know why it doesn’t work for future components. The link you posted to the one that got it working didn’t work. I did read a few convoluted ways to get it working, but I wanted to use a component as it feels like the right way to do it.

1 Like
6

Understood, all the best with it :slight_smile:

7

Just reopening this thread to ask how do you install statcounter.
I’ve created an account and added the following in my main script.

components.html("""<!-- Default Statcounter code for Pears
https://pearstest.herokuapp.com -->
<script type="text/javascript">
var sc_project=12673269; 
var sc_invisible=1; 
var sc_security="1c2a1959"; 
</script>
<script type="text/javascript"
src="https://www.statcounter.com/counter/counter.js"
async></script>
<noscript><div class="statcounter"><a title="Web Analytics"
href="https://statcounter.com/" target="_blank"><img
class="statcounter"
src="https://c.statcounter.com/12673269/0/1c2a1959/1/"
alt="Web Analytics"
referrerPolicy="no-referrer-when-downgrade"></a></div></noscript>
<!-- End of Statcounter Code -->""")

However, startcounter cannot detect the code on my website.
Any help would be very appreciated :slight_smile:

Emmanuel

8

Just want to update this if anyone need it. Another alternative to track your Streamlit visits:

1 Like
9

an ugly hack:

def inject_ga():
    """Add this in your streamlit app.py
    see https://github.com/streamlit/streamlit/issues/969
    """
    # new tag method
    GA_ID = "google_analytics"
    # NOTE: you should add id="google_analytics" value in the GA script
    # https://developers.google.com/analytics/devguides/collection/analyticsjs
    GA_JS = """
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX"> id="google_analytics" </script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXXXXXX');
</script>
"""
    # Insert the script in the head tag of the static template inside your virtual
    index_path = pathlib.Path(st.__file__).parent / "static" / "index.html"
    logging.info(f'editing {index_path}')
    soup = BeautifulSoup(index_path.read_text(), features="lxml")
    if not soup.find(id=GA_ID):  # if cannot find tag
        bck_index = index_path.with_suffix('.bck')
        if bck_index.exists():
            shutil.copy(bck_index, index_path)  # recover from backup
        else:
            shutil.copy(index_path, bck_index)  # keep a backup
        html = str(soup)
        new_html = html.replace('<head>', '<head>\n' + GA_JS)
        index_path.write_text(new_html)
10

Thanks. I just implemented the statcounter and super straight forward, stats is available right way.

Question:

What if I have a multiple page streamlit application, do I need to add the statcounter code on everypage? Is there any smart way of doing it?

11

How did you get statcounter to work on your site? I can see the code but statcounter is saying they are unable to access my site.

12

There is a basic example of how to implemente Google Analytics in Streamlit via bi-directional components API. A lot of things to improve, but it works.