![](https://cocoinit23.com/wp-content/uploads/2024/01/streamlit-300x163.jpg)
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()
参考
Google Analytics and Streamlit
Hi @Caroline !! Thanks for your answer! Yes, I have, but google analytics keeps falling, it stays active for a few and t...
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...
![](https://miro.medium.com/v2/resize:fit:1010/1*cmx_PV2TiYatBmxB61Ip4A.png)
Google Analytics for Streamlit in 3 Easy Steps
A complete answer to an often-asked question.
コメント