I have made a stellar dash app, and want to track the visitors with google tag manager. I have tried a lot of variations based on similar questions, but just cant get it to work as expected. This is my app.py
import dash
from dash import Input, Output, State, html, dcc
import dash_labs as dl
import dash_bootstrap_components as dbc
from navbars import header_bar, footer_bar
from callbacks import get_callbacks
app = dash.Dash(
__name__, plugins=[dl.plugins.pages],
external_scripts=[{'src':'assets/gtag.js'}],
meta_tags=[{'name': 'viewport',
'content': 'width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=0.5'},
{
],
)
app.index_string = """
<!DOCTYPE html>
<html>
<head>
{%metas%}
{%favicon%}
<title>{%title%}</title>
{%css%}
</head>
<body>
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NRTJDT8"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
{%app_entry%}
<footer>
{%config%}
{%scripts%}
{%renderer%}
</footer>
</body>
</html>
"""
And the assets/gtag.js:
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-NRTJDT8');
I expect to see something like what Plotly made in the app gallery):
But my result is missing the google tag manager script:
I have also tried to append the script with app.index_string, but still does not show as expected.
PS. I have a similar question on stackoverflow.
Hope anyone can help me, as I am getting frustrated after days tryeing every combination of solutions.
