✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚾️ It's finally Baseball season! Root for the home team... & Register for our Sports Analytics Webinar!

Adding google analytics tracking code to dash app

Dash
#1

The tracking code given by Google Analytics looks like this :

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

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

Just wanted to share something that I did to get it to work.
In my dash app, I added the following lines:

app.scripts.config.serve_locally = False
app.scripts.append_script({
    'external_url': 'https://cdn.jsdelivr.net/gh/lppier/lppier.github.io/async_src.js'
})
app.scripts.append_script({
    'external_url': 'https://cdn.jsdelivr.net/gh/lppier/lppier.github.io/gtag.js'
})

where async_src.js is the javascript contents I got after entering “https://www.googletagmanager.com/gtag/js?id=UA-131327483-1” in the browser.
and
gtag.js is the

  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-131327483-1');

I followed the steps here : https://stackoverflow.com/questions/17341122/link-and-execute-external-javascript-file-hosted-on-github to serve my javascript (hosted in github pages) via jsDelivr.

Hope this helps someone out there, and do let me know if there’s an easier way of doing this!

1 Like
#2

ohno, not google analytics plz! :scream:

#3

why? Is there an issue with dash and ga?

#4

no, sorry, should have expanded more: I think google’s business model is horrifying and advocate fiercely against the use of their tracking tools :wink:

#5

This is a slightly off-topic, but does concern analytics tracking within the apps. I’ve filed a request to have a Mixpanel package specific to Plotly here:

Looks like it got taken up and put into discussion!

#6

I tried your solution but could not make it work.

I followed Adding Meta Tags section on Adding CSS & JS and Overriding the Page-Load Template and overwrote header.

Looks working now on my app on heroku.

import dash

app = dash.Dash(__name__)

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-131327483-1"></script>
        <script>
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());

          gtag('config', 'UA-131327483-1');
        </script>
        {%metas%}
        <title>{%title%}</title>
        {%favicon%}
        {%css%}
    </head>
    <body>
        {%app_entry%}
        <footer>
            {%config%}
            {%scripts%}
            {%renderer%}
        </footer>
    </body>
</html>"""
3 Likes
#7

Huge thanks to @lppier :slight_smile:

I just wanted to add that you can use the literal async url in the first external_url, e.g.

app.scripts.config.serve_locally = False
app.scripts.append_script({
‘external_url’: ‘https://www.googletagmanager.com/gtag/js?id=UA-131327483-1’
})
app.scripts.append_script({
‘external_url’: ‘https://cdn.jsdelivr.net/gh/lppier/lppier.github.io/gtag.js’
})

#8

@lppier @skywalka I am trying to add google analytics to my website. I am looking for some guidance on the community forum. I wanted to ask as to why it is necessary to set app.scripts.config.serve_locally to False ? Is it because Dash only allows either external or local scripts. In other words, you can’t mix the two ? For example, I can’t have the async script on the url supplied by google and the gtag script in my local folder ? Either external or local - is that the case ?