streamlit 集成百度统计或谷歌分析的三种方法

月小水长

已于 2022-10-05 23:04:31 修改

阅读量967

点赞数

CC 4.0 BY-SA版权

分类专栏： streamlit Python Web JavaScript 文章标签： streamlit 百度统计谷歌分析 analytics

于 2022-10-05 23:01:03 首次发布

本文链接：https://blog.csdn.net/ygdxt/article/details/127177948

本文介绍了如何在streamlit框架中集成百度统计和谷歌分析的三种方法，包括使用components注入js，借助streamlit-analytics组件，以及修改streamlit的index.html文件。这些方法帮助开发者追踪并分析streamlit应用的PV数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

streamlit 是当前炙手可热的快速搭建机器学习和数据分析工具站点的 Python web 框架，今天来探讨下有关 streamlit 网站统计相关的问题。
给 streamlit 统计 PV 大概有三种方法。

笔者环境：ubuntu 18.04 + Python 3.8.10 + streamlit 1.1.3.0

components 注入 js

第一种是使用 streamlit.components.v1 注入 js 代码，例如

import streamlit.components.v1 as components
components.html(
    '''<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?22d722321264d64c680673fee091e85d";
  // origin from buyixiao blog https://blog.csdn.net/ygdxt/article/details/127177948
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
''',
    height=30)

注意将以上 js 代码改成你从你的百度统计后台获取到的

这种方法简单，但是对应多页面应用就比较麻烦了，每个 python 脚本都要复制一份同样的内容（may 通过设计继承解决）

使用 streamlit-analytics 组件

这是一个第三方的统计插件，使用方式如下：

#!pip install streamlit-analytics
import streamlit as st
import streamlit_analytics

with streamlit_analytics.track():
	# wirte your streamlit code here

这样后只要在访问路由后加上 ?analytics=on，就能在网页上看到如下统计组件图。

在这里插入图片描述

修改 streamlit 的 index.html 文件

streamlit 的 index.html 文件是每个 streamlit 页面都会继承的页面，它在虚拟环境中的路径j举例如下：

lib/python3.8/site-packages/streamlit/static

将获取到的百度统计或谷歌分析 js 代码去掉 js 标签保存为 js 文件。

然后在 index.html 里 head 块内引用这个 js 文件即可。

例如，我的 baidu-analysis.js：

var _hmt = _hmt || [];
(function() {
   
   
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?22d722321264d64c680673fee091e85d";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();

我的 index.html：

<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><link rel="shortcut icon" href="./favicon.png"/><title>Streamlit</title><script src="./vendor/viz/viz-1.8.0.min.js" type="javascript/worker"></script><script src="./vendor/bokeh/bokeh-2.4.3.min.js"></script><script src="./vendor/bokeh/bokeh-widgets-2.4.3.min.js"></script><script src="./vendor/bokeh/bokeh-tables-2.4.3.min.js"></script><script src="./vendor/bokeh/bokeh-api-2.4.3.min.js"></script><script src="./vendor/bokeh/bokeh-gl-2.4.3.min.js"></script><script src="./vendor/bokeh/bokeh-mathjax-2.4.3.min.js"></script><script src="./baidu-analysis.js"></script><link href="./static/css/5.71be5c0a.chunk.css" rel="stylesheet"><link href="./static/css/main.b46f6fce.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){
     
     function t(t){
     
     for(var c,n