A beautiful view of mountains and beaches from Mount Nokogiri (Chiba, Japan).

Building a Dashboard App using Plotly’s Dash: Favicon, Google analytics, Custom CSS

Part 3: How to add App favicon, App title, App description, Google Analytics, and custom CSS file to Dash App?

In last two articles we have learned how to build a dashboard with Dash. In this article, I will explain how to customized your dashboard and add Google Analytics tracking to it.

If you haven’t read part 1 and part 2, please read them.

Building a Dashboard App using Plotly’s Dash: A Complete Guide from Beginner to Pro

Building a Dashboard App using Plotly’s Dash: A Complete Guide from Beginner to Pro

1. App title, App description, and App favicon:

Write app title and description as follow in app.py .

app.title = "Your App Title"
app.description = "Your App's Description"

To add your own favicon, create a new folder named assets . Save favicon image as favicon.ico and put it in assets folder. Dash will automatically detect and load your favicon from assets folder. Check this commit for the code reference.

2. Adding Google Analytics tracking code

1. Create an account on Google analytics if you don’t have one, and create a property for your app.
2. Click on Admin then select account and property you have created. Click on Data Streams .
3. Click on Add stream then select web .
4. Click on Global Site Tag (gtag.js) & copy code.
5. Add following code to app.py, and replace line 4–12 with code you copied in step 4. Also replace your app links in following code.

Adding Google Analytics tracking to Dash app.

Example code is available on GitHub.

3. Add custom CSS file

A custom CSS file can be very helpful to improve App’s appearance. It is a just three step process to add custom CSS file to your Dash App.

1. Create a new directory static/css.
2. Add custom CSS file to static/css .
3. Add new CSS file to app.py as follow.

external_stylesheets = [
    "static/css/my_style.css", # custom CSS file
    "https://codepen.io/chriddyp/pen/bWLwgP.css",
]

Check this commit on GitHub for your reference.

App’s appearance looks better after adding custom CSS file. Feel free to play with CSS file and App’s code.

You can see, how does above changes improve overall App, if you visit App on Heroku web or ran code on your machine.

Cryptocurrency Indicators Dashboard

Complete code is available on GitHub. I hope, this helps you. This is the end of plotly’s Dash App tutorial series.

Thank you for reading!!🙇‍♂️

I am always available to answer your queries, please reach out to me on LinkedIn or Twitter.