# Adding google analytics tracking code to dash app

**URL:** <https://community.plotly.com/t/adding-google-analytics-tracking-code-to-dash-app/17297>\
**Category:** Dash Python\
**Created:** [December 23, 2018, 3:32pm UTC](https://community.plotly.com/t/adding-google-analytics-tracking-code-to-dash-app/17297 "2018-12-23T15:32:16Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![lppier](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/lppier/32/4947_2.png) [@lppier](https://community.plotly.com/u/lppier)\
**Post date:** [December 23, 2018, 3:32pm UTC](https://community.plotly.com/t/adding-google-analytics-tracking-code-to-dash-app/17297/1 "2018-12-23T15:32:16Z")

</div>

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](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](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!

---

<div class="post-metadata">

**Author:** ![carlottanegri](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/carlottanegri/32/1261_2.png) [@carlottanegri](https://community.plotly.com/u/carlottanegri)\
**Post date:** [December 24, 2018, 8:08am UTC](https://community.plotly.com/t/adding-google-analytics-tracking-code-to-dash-app/17297/2 "2018-12-24T08:08:32Z")

</div>

ohno, not google analytics plz! 😱

---

<div class="post-metadata">

**Author:** ![lppier](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/lppier/32/4947_2.png) [@lppier](https://community.plotly.com/u/lppier)\
**Post date:** [December 24, 2018, 3:59pm UTC](https://community.plotly.com/t/adding-google-analytics-tracking-code-to-dash-app/17297/3 "2018-12-24T15:59:58Z")

</div>

why? Is there an issue with dash and ga?

---

<div class="post-metadata">

**Author:** ![carlottanegri](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/carlottanegri/32/1261_2.png) [@carlottanegri](https://community.plotly.com/u/carlottanegri)\
**Post date:** [December 25, 2018, 11:30am UTC](https://community.plotly.com/t/adding-google-analytics-tracking-code-to-dash-app/17297/4 "2018-12-25T11:30:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![aakashhdesai](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aakashhdesai/32/5573_2.png) [@aakashhdesai](https://community.plotly.com/u/aakashhdesai)\
**Post date:** [August 15, 2019, 2:43pm UTC](https://community.plotly.com/t/adding-google-analytics-tracking-code-to-dash-app/17297/5 "2019-08-15T14:43:25Z")

</div>

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:

> **[Mixpanel Community](https://community.mixpanel.com/idea/804/plotly-dash-integration.html)**
>
> Bringing together customers, product experts, and data enthusiasts to connect, share ideas, and learn from each other. Check it out today!

Looks like it got taken up and put into discussion!

---

<div class="post-metadata">

**Author:** ![takaakifuruse](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/takaakifuruse/32/4723_2.png) [@takaakifuruse](https://community.plotly.com/u/takaakifuruse)\
**Post date:** [January 29, 2020, 7:21am UTC](https://community.plotly.com/t/adding-google-analytics-tracking-code-to-dash-app/17297/6 "2020-01-29T07:21:19Z")

</div>

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](https://dash.plot.ly/external-resources) and overwrote header.

Looks working now on my app on heroku.

```auto
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>"""

```

---

<div class="post-metadata">

**Author:** ![skywalka](https://avatars.discourse-cdn.com/v4/letter/s/35a633/32.png) [@skywalka](https://community.plotly.com/u/skywalka)\
**Post date:** [April 22, 2020, 6:25am UTC](https://community.plotly.com/t/adding-google-analytics-tracking-code-to-dash-app/17297/7 "2020-04-22T06:25:48Z")

</div>

Huge thanks to @lppier 🙂

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](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](https://cdn.jsdelivr.net/gh/lppier/lppier.github.io/gtag.js)’  
> })

---

<div class="post-metadata">

**Author:** ![user123](https://avatars.discourse-cdn.com/v4/letter/u/ed655f/32.png) [@user123](https://community.plotly.com/u/user123)\
**Post date:** [April 28, 2020, 12:34am UTC](https://community.plotly.com/t/adding-google-analytics-tracking-code-to-dash-app/17297/8 "2020-04-28T00:34:18Z")

</div>

@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 ?