Full Screen Google Analytics via Bookmarklet

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:

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:

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 section in the code below with that part of the URL. 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.

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).