Streamlit应用中Google Analytics无法正常运行问题排查

开发者阿泽

2026-7-25

问题

我用Streamlit构建了一个Web应用，部署在Google Cloud Platform（App Engine）上，访问URL为https://xxx-11111.uc.r.appspot.com/。两天前启用了Google Analytics，但配置显然有误。按照要求需将代码添加到head标签中，以下是我添加Google Analytics标签的代码，请问问题出在哪里？

def page_header():
    st.set_page_config(page_title="xx", page_icon="images/logo.png")
    header = st.container()
    with header:
        # Add banner image
        logo = Image.open("images/logo.png")
        st.image(logo, width=300)

        # Add Google Analytics code to the header
        ga_code = """
        <!-- Google tag (gtag.js) -->
        <script async src="https://www.googletagmanager.com/gtag/js?id=G-xxxxxx"></script>
        <script>
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());

            gtag('config', 'G-xxxxxx');
        </script>
        """
        st.markdown(ga_code, unsafe_allow_html=True)


# Define the main function to run the app
def main():

    # Render the page header
    page_header()

    .....

if __name__ == "__main__":
    main()

分析与解决

你的代码核心问题是用st.markdown插入的脚本不会被放到HTML的<head>标签里，而是会被渲染在页面的正文区域（<body>内），这不符合Google Analytics要求的部署位置。

具体问题点

脚本位置错误
Streamlit的st.markdown会把内容嵌入到页面的<body>部分，而Google Analytics的gtag.js要求必须放在<head>标签内，才能正常追踪页面加载等关键初始行为。
Streamlit页面结构限制
直接用st.markdown插入HTML脚本无法控制其在DOM中的位置，必须通过特定方式注入<head>内容。

修复方案

方案1：用`st.components.v1.html`强制注入头部

利用Streamlit的原生组件将脚本插入到页面头部，代码示例：

import streamlit as st
from streamlit.components.v1 import html
from PIL import Image

def page_header():
    st.set_page_config(page_title="xx", page_icon="images/logo.png")
    
    # 注入Google Analytics到head
    ga_code = """
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-xxxxxx"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'G-xxxxxx');
    </script>
    """
    # 用height=0、width=0隐藏组件，确保脚本插入到正确位置
    html(ga_code, height=0, width=0, scrolling=False)
    
    # 后续页面内容
    header = st.container()
    with header:
        logo = Image.open("images/logo.png")
        st.image(logo, width=300)

方案2：自定义Streamlit页面模板（适合部署场景）

如果是部署在GAE上，可以创建自定义页面模板直接修改<head>：

在项目根目录创建.streamlit文件夹，新建config.toml文件：
```
[server]
custom_html = "index.html"
```
创建index.html模板，参考Streamlit默认模板结构，在<head>标签内加入你的Google Analytics代码。

额外检查项

确认G-xxxxxx跟踪ID完全正确，无拼写错误
确保GA4数据流已正确关联你的域名xxx-11111.uc.r.appspot.com
部署后清除浏览器缓存，访问页面后查看GA4实时报告是否有数据

内容的提问来源于stack exchange，提问作者DeadPool

Streamlit应用中Google Analytics无法正常运行问题排查

具体问题点 #

修复方案 #

方案1：用st.components.v1.html强制注入头部

方案2：自定义Streamlit页面模板（适合部署场景）

额外检查项 #

具体问题点

修复方案

方案1：用`st.components.v1.html`强制注入头部

额外检查项