StreamlitにGoogle Analyticsのタグを埋め込む

Streamlitで作ったwebアプリにGoogle Analyticsのタグ（gtag.js）を埋め込みたかったが手こずった。

st.components.v1.htmlやst.markdownでhtmlを書き込むことが可能だが、<body>内に実装されてしまう。

gtag.jsは<head>に入れなければならないので、上記のAPIを使ってもAnalyticsの解析対象として認識されなくなってしまう。

ウェブサイトのコード内の <head> 開始 HTML タグの後に、Google タグを追加してください。

また、ウェブサイトの各ページにスニペットを追加する必要もあります。Google アナリティクスでは、スニペットを含むウェブサイトのページからのみデータが収集されます。
https://support.google.com/analytics/answer/9311124

そのため、<head>に埋め込む方法を考える必要がある。

といってもやることは単純で、テンプレートとなるsite-packages/streamlit/static/index.htmlを読み込み、<head>を<head> + gtag で置換してやればいい。

from bs4 import BeautifulSoup
import pathlib
import shutil
import streamlit as st

GA_ID = "google_analytics"
GA_SCRIPT = """
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script id='google_analytics'>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>
"""

def inject_ga():
    
    index_path = pathlib.Path(st.__file__).parent / "static" / "index.html"
    soup = BeautifulSoup(index_path.read_text(), features="html.parser")
    if not soup.find(id=GA_ID): 
        bck_index = index_path.with_suffix('.bck')
        if bck_index.exists():
            shutil.copy(bck_index, index_path)  
        else:
            shutil.copy(index_path, bck_index)  
        html = str(soup)
        new_html = html.replace('<head>', '<head>\n' + GA_SCRIPT)
        index_path.write_text(new_html)

inject_ga()

参考

https://discuss.streamlit.io/t/google-analytics-and-streamlit/29385/3

How to edit index.html?

I am working on a Streamlit app deployed on Heroku and facing challenges in modifying the index.html file (located in si...

Google Analytics for Streamlit in 3 Easy Steps

A complete answer to an often-asked question.