EDIT 2/2/2012: Google likes to randomly change the CSS/page structure of the Realtime Analytics page.  You can always get the updated version at the demo page I have set up (since I use it for the TV display at work and fix it when it breaks).  It has changed twice so far since this post.

When Google Analytics announced their realtime beta I was pretty excited.  It's interesting to watch traffic.  However, it means taking time out of your day to load up Analytics and check out your site.  Once you're done... you're not watching it.

That's why I proposed (with a little inspiration from Atomic Object's traffic monitor in their office) that we get something installed at Acton Institute to show our web traffic at all times.  We used an older laptop and mounted a 32-inch LCD on the wall in order to show real time Analytics all day.

I noticed a few things that were sub-optimal about our setup.  Due to only having a VGA connector on the older laptop, we couldn't show much above 1024x768 without getting a bad signal and distortion in displayed text.  Google Analytics realtime is wider than the browser window at this resolution.  Also, GA includes an annoying sidebar, header and footer.  What to do about these annoyances?  Write a bookmarklet (or two) to hack GA to fit our needs!

It's likely that using the GA API would yield similar results and let us do more, but Google was already showing what we need, albeit with too much clutter.

Here are three bookmarklets that strip down the realtime page for optimal display on a 1024x768 monitor running Google Chrome in fullscreen (F11):

• (Use 1st in sequence) This bookmarklet displays right now along with pageviews per-minute and per-second. It also includes visitor source and active pages. The bookmarklet injects jQuery into the GA page, so it may require a page reload the first time you use it.
  

  		<a href="javascript:
  var element1 = document.createElement('script');element1.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js';element1.type='text/javascript';document.getElementsByTagName('head')[0].appendChild(element1);
  var div = document.getElementById('ID-navPanelContainer').style; if(div) void(div.display=(div.display=='none')? 'block':'none');
  var div = document.getElementById('ID-reportTitle').style; if(div) void(div.display=(div.display=='none')? 'block':'none');
  var div = document.getElementById('ID-headerPanel').style; if(div) void(div.display=(div.display=='none')? 'block':'none');
  var div = document.getElementById('ID-overviewPanelTrafficSourceValueOrganicTable').style; if(div) void(div.display=(div.display=='none')? 'block':'none');
  var div = document.getElementById('ID-overviewPanelGeoComponent').style; if(div) void(div.display=(div.display=='none')? 'block':'none');
  var div = document.getElementById('ID-footerPanel').style; if(div) void(div.display=(div.display=='none')? 'block':'none');
  var div = document.getElementById('ID-navToggle').style; if(div) void(div.display=(div.display=='none')? 'block':'none');
  ">Main</a>

• (Use 1st in sequence) This bookmarklet displays right now along with pageviews per-minute and per-second. It also includes visitor keywords and the world map indicating where they're from. The bookmarklet injects jQuery into the GA page, so it may require a page reload the first time you use it.
  

  		<a href="javascript:
  var element1 = document.createElement('script');element1.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js';element1.type='text/javascript';document.getElementsByTagName('head')[0].appendChild(element1);
  var div = document.getElementById('ID-navPanelContainer').style; if(div) void(div.display=(div.display=='none')? 'block':'none');
  var div = document.getElementById('ID-reportTitle').style; if(div) void(div.display=(div.display=='none')? 'block':'none');
  var div = document.getElementById('ID-headerPanel').style; if(div) void(div.display=(div.display=='none')? 'block':'none');
  var div = document.getElementById('ID-overviewPanelTrafficSourceNameTable').style; if(div) void(div.display=(div.display=='none')? 'block':'none');
  var div = document.getElementById('ID-overviewPanelRequestUriTable').style; if(div) void(div.display=(div.display=='none')? 'block':'none');
  var div = document.getElementById('ID-footerPanel').style; if(div) void(div.display=(div.display=='none')? 'block':'none');
  var div = document.getElementById('ID-navToggle').style; if(div) void(div.display=(div.display=='none')? 'block':'none');
  ">Geo</a>

• (Use 2nd in sequence) This bookmarklet is meant to be used after the first. It formats the color scheme and branding of your page using the jQuery loaded with "Main" or "Geo".
  

  		<a href="javascript:
  void($('.RT_OVERVIEW_TITLE').css('display','none'));
  void($('.RT_R_FOOTNOTE').css('display','none'));
  void($('#main-body').css('min-width','960px'));
  void($('body').css('height','100%'));
  void($('body').css('background','#efefef'));
  void($('.V_REPORTVIEW_REPORT_CONTAINER').css('background-color', 'transparent'));
  void($('.RT_REPORT').css('background', 'none'));
  void($('.RT_OVERTIME_PANEL_CONTAINER').css('background-color', '#FFF'));
  void($('#ID-contextOverviewPanel .RT_CONTEXT_OVERVIEW_COUNTER').css('color', '#333'));
  void($('.RT_OVERTIME_TITLE').css('color', '#333'));
  void($('#ID-overviewSummary').css('color', '#333'));
  void($('.RT_C_DATATABLE').css('opacity', '0.7'));
  void($('.RT_C_DATATABLE thead').css('background-color', '#FFF'));">Second</a>

Usage

Using the bookmarklets is pretty easy.  Do this:

1. Navigate to your Google Analytics Realtime page (New Version of Analytics > Choose a site > Home > Real time (beta as of this writing))
2. Drag all three bookmarklets to a shortcut or favorites bar in your browser (highly recommend Chrome.  FF should work though).
3. Click Main OR Geo depending on which displays you want.  We show both in different browser tabs.
4. Click Second to apply branding/styling.

Demo

Check out Acton Institute's version by clicking here for the bookmarklets.  It includes a Lord Acton head in the lower left of Analytics.  For the full source so you can tweak it to your liking just view it on that page.  I recommend modifying that HTML page and uploading it to your server so you don't lose your custom bookmarklets.  The Javascript isn't all that elegant, but it doesn't really need to be.  It runs on a standalone system and performance/prettiness don't matter.