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.
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
- Create an account on Google analytics if you don’t have one, and create a property for your app.
- Click on
Admin
then select account and property you have created. Click onData Streams
. - Click on
Add stream
then selectweb
. - Click on
Global Site Tag (gtag.js)
& copy code. - 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.
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.
- Create a new directory
static/css
. - Add custom CSS file to
static/css
. - 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.
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.