Google Tag Manager not working as expected in Dash app

Dash Python
1

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):

image
image867×332 25.3 KB

But my result is missing the google tag manager script:

image
image385×518 20.8 KB

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.

2

Hi @NRVA
Congrats on your stellar dash app and sorry for your frustration with trying to get the custom app.index_string working.

Currently, making a multi-page app with the pages plug-in in dash-labs, it’s not possible to have a custom index_string because it uses the dash-labs custom index_string instead.

The good news is that when pages is integrated with dash, it will work (I’ve verified this in the pull request). This is scheduled to be available in the Dash 2.5 release. Coming Soon! :crossed_fingers:

2 Likes
3

Hi, I wanted to follow up on this thread and see whether there is a solution to track multi page apps in the new release.

I would appreciate if @AnnMarieW could post a short template.

Thank you so much!

4

Try adding it like this:


app = Dash(
    __name__,
    suppress_callback_exceptions=True,
    use_pages=True,
    external_scripts=["https://www.googletagmanager.com/gtag/js?id=your-id"],  
)
1 Like
5

Thank you @AnnMarieW. I had to remove ‘use_pages=True’ as it caused an application error.

app = Dash(
__ name __,
suppress_callback_exceptions=True,
external_scripts=[“https://www.googletagmanager.com/gtag/js?id=your-id”]
)

works well.