如何将谷歌分析 (GTAG) 添加到我的 python dash 应用程序？答案

【问题标题】：How to add google analytics (GTAG) to my python dash app?如何将谷歌分析 (GTAG) 添加到我的 python dash 应用程序？
【发布时间】：2020-04-19 13:35:40
【问题描述】：

我有一个 gtag.js，其中包含我的跟踪代码。

Google 说要将此添加到我的顶部，请问我如何为我的 dash 应用添加他的？

我尝试将其添加为 /assets 下的 gtag.js，但没有成功

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

  gtag('config', 'UA-******-1');
</script>

【问题讨论】：

标签： python google-analytics plotly-dash

【解决方案1】：

您至少应该能够通过两种方式完成此操作：

覆盖索引字符串：

以下内容是从文档中复制的，并使用问题的 JavaScript 进行了更新。

import dash
import dash_html_components as html

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.index_string = '''
<!DOCTYPE html>
<html>
    <head>
        <!-- Global site tag (gtag.js) - Google Analytics -->
        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-*****-1"></script>
        <script>
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());

            gtag('config', 'UA-******-1');
        </script>
        {%metas%}
        <title>{%title%}</title>
        {%favicon%}
        {%css%}
    </head>
    <body>
        <div>My Custom header</div>
        {%app_entry%}
        <footer>
            {%config%}
            {%scripts%}
            {%renderer%}
        </footer>
        <div>My Custom footer</div>
    </body>
</html>
'''

覆盖Dash.interpolate_index 方法：

import dash
import dash_html_components as html


class CustomDash(dash.Dash):
    def interpolate_index(self, **kwargs):
        # Inspect the arguments by printing them
        print(kwargs)
        return '''
        <!DOCTYPE html>
        <html>
            <head>
                <title>My App</title>
                <!-- Global site tag (gtag.js) - Google Analytics -->
                <script async src="https://www.googletagmanager.com/gtag/js?id=UA-*****-1"></script>
                <script>
                    window.dataLayer = window.dataLayer || [];
                    function gtag(){dataLayer.push(arguments);}
                    gtag('js', new Date());

                    gtag('config', 'UA-******-1');
                </script>
            </head>
            <body>

                <div id="custom-header">My custom header</div>
                {app_entry}
                {config}
                {scripts}
                {renderer}
                <div id="custom-footer">My custom footer</div>
            </body>
        </html>
        '''.format(
            app_entry=kwargs['app_entry'],
            config=kwargs['config'],
            scripts=kwargs['scripts'],
            renderer=kwargs['renderer'])

app = CustomDash()

请参阅 Plotly 论坛中的 the docs 和 sislvacl's answer 了解更多信息。

【讨论】：

只是，在使用 interpolate_index 时，请密切注意将跟踪代码 sn-ps（在 javascript 中提供）中的单个花括号替换为双花括号（以使 Python 中的字符串插值成为可能）。跨度>