Skip to content

Ted Kulp

Polyglot Developer. Teacher. Curmudgeon.

  • Home
  • About
  • Blog
  • Home
  • 2014
  • July
  • Full Screen Google Analytics via Bookmarklet

Full Screen Google Analytics via Bookmarklet

Posted on 2014/07/062014/07/07 By Ted Kulp 4 Comments on Full Screen Google Analytics via Bookmarklet
Programming

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

Tags: analytics bookmarklet google javascript

Post navigation

❮ Previous Post: A few reasons to use Underscore.js (or Lo-Dash)
Next Post: Promisify Javascript Events with Bluebird ❯

4 thoughts on “Full Screen Google Analytics via Bookmarklet”

  1. lars says:
    2015/05/13 at 4:32 am

    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?

    Reply
    1. Russell says:
      2016/10/15 at 10:58 am

      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!

      Reply
  2. Max says:
    2016/03/21 at 11:20 am

    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.

    Reply
  3. Tom says:
    2019/01/09 at 9:46 am

    Hi,

    I can’t get this to work. I must do something wrong. Can you tell me in a few steps what i exactly have to do?

    Regards,

    Tom

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recent Posts

  • Promisify Javascript Events with Bluebird
  • Full Screen Google Analytics via Bookmarklet
  • A few reasons to use Underscore.js (or Lo-Dash)
  • Office Setup
  • Turn Twitter Favorites into an RSS feed

Recent Comments

  • Tom on Full Screen Google Analytics via Bookmarklet
  • Russell on Full Screen Google Analytics via Bookmarklet
  • Max on Full Screen Google Analytics via Bookmarklet
  • lars on Full Screen Google Analytics via Bookmarklet
  • Dan O'Keefe on A few reasons to use Underscore.js (or Lo-Dash)

Archives

  • August 2014
  • July 2014
  • October 2013
  • February 2013
  • May 2012
  • November 2011
  • August 2011

Categories

  • Productivity
  • Programming

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

Copyright © 2021 Ted Kulp.

Theme: Oceanly by ScriptsTown