I have a TV in my office that’s connected to a PC and generally does very little during the day. Since I’ve relaunched my site and starting to see some traffic, it’s great to watch the real-time statistics from Google Analytics while I’m working or writing. I have a nice Dashboard with all my important stats on it. But, all the junk that GA adds on the top and left of the page is really a waste of perfectly good space.
After a bit of searching, I found a few people who have done similar things with Bookmarklets, but they are woefully out of date. Using their work as a base, I decided to roll up my sleeves and fix it myself.
Below are the 2 Bookmarklets that I made to make my Dashboarding a lot easier. Feel free to use one or the other (or both). Let me know in the comments if they don’t work for you and maybe we can try and figure out why. It’s very possible that Google has changed the HTML again and it may require some tweaks. That being said, I use this myself, so I should know if it stops working.
Full Screen Dashboard
Create a new Bookmark. Give it a nice name so you can tell what it is. I call mine “GA Dashboard”. Then, set the code below as the URL:
1 2 |
javascript:var div=document.getElementById('ID-headerBar').style;if(div) void(div.display=(div.display=='none')?'block':'none');var div=document.getElementById('ID-header').style;if(div) void(div.display=(div.display=='none')?'block':'none');document.getElementById('ID-navToggle').click(); |
Now when you’re on your Dashboard that you want to full screen, just click your Bookmarklet and all the Chrome around the page will be removed and it should be nice and clean. If you’re in Chrome, additionally hit F11 and the browser will go full screen as well.
Note: This will only work from a fresh tab. I’ve tried fixing it to work from another page by adding window.location.reload();
to the end of the script, but then it doesn’t work from a fresh tab. I’ll keep messing with it.
Dynamically Setting the Date Range
Then next thing I wanted to do was always show the last week of statistics, including today. If you select This Week, it will start from yesterday and not add today’s stats in. The only way I saw to do it the way I wanted was to dynamically generate the URL that had the date range I wanted in it. Another Bookmarklet to the rescue!
Log into Google Analytics and select the Dashboard you want to display. Give it a date range so you can visually see what part of the URL you need to cut and paste for the next step. The URL will look something like:
1 2 |
https://www.google.com/analytics/web/?authuser=0#dashboard/abc1234567890/abc1234567890/%3F_u.date00%3D20140630%26_u.date01%3D20140706/ |
Notice the date range in the URL there. It’s the u.date00 through u.date01 section where they just put the start and end dates in YYYYMMDD format.
Create another Bookmark. I call mine “GA Dashboard”, but the name doesn’t matter. Copy the code below into the URL section. Then, take everything before the /%3F_u.date00
section of the URL and replace the -6
in the code represents the number of days back that you want to include in your range. If you’d like to make it something else (like -13
for two weeks), that’s the place to do it.
1 2 |
javascript:var now,then,url="<URL>",dtString=function(date){return date.toJSON().slice(0, 10).replace(/-/g, '');};now=new Date();then=new Date();then.setDate(now.getDate()-6);window.location.href=url+"/%3F_u.date00%3D"+dtString(then)+"%26_u.date01%3D"+dtString(now)+"/"; |
Voila! Click this Bookmarklet and your Dashboard will have the correct date range on it. Then, click your Fullscreen bookmarklet and all the junk around it will fall away. Then hit F11 and it’ll be a nice window ready for your beautiful graphs and stats to be viewed by the world (or at least the people in the room).
Notice: mc4wp_form is deprecated since version MailChimp for WordPress v3.0! Use mc4wp_show_form instead. in /var/www/html/wp-includes/functions.php on line 3888
Hey Ted,
awesome article Thank you very much! That was exactly what I was looking for.
The problem which I still have is the following: I am automaticall refreshing the page every 5 minutes so that the clutter will reappear above the dashboard.
Is there a way to automatically exercise the javascript every 5 minutes or so to ensure that while refreshing the page the clutter stays away?
I had this issue lars, simply make a macro to reload the page, and then use the same macro to run the bookmark, a bit of a hash job, but it works!
Hi Ted,
Interesting article. Execly what i was looking for. Can you please share an example of the dynamic date range url. Having trouble setting up de date…
Thanks in advance.