CodeBlog.TheG2.NET: JavaScript and CSS based popup for changing Google Analytics User Segment cookie

I use Google Analytics on all of the sites that I work on for tracking page views and traffic sources. It has great reporting features, but I always have problems with traffic from my office computer or home laptop skewing the results. Most of the computers that I use have dynamic IP addresses, so a static IP filter does not work. Instead you have to setup a cookie based filter. The problem is then how do you setup the cookie and monitor if your traffic is currently being tracked or not? I created a small JavaScript and CSS based popup for setting and clearing the cookie that I can then add somewhere to the site. The first section is the JavaScript code. Place this block somewhere in your HTML or template:

//Code from http://www.quirksmode.org/js/cookies.html
function createCookie(name,value,days) {
 if (days) {
  var date = new Date();
  date.setTime(date.getTime()+(days*24*60*60*1000));
  var expires = "; expires="+date.toGMTString();
 }
 else var expires = "";
 document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
 var nameEQ = name + "=";
 var ca = document.cookie.split(';');
 for(var i=0;i < ca.length;i++) {
  var c = ca[i];
  while (c.charAt(0)==' ') c = c.substring(1,c.length);
  if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
 }
 return null;
}

function eraseCookie(name) {
 document.cookie = name +'=; expires=Thu, 01-Jan-70 00:00:01 GMT;';
}

//--> 
</script>

The second section is the DIV/CSS popup that contains a few links that you can click on. Again just place this anywhere in your HTML or template (it uses fixed positioning and will always appear in the middle of the screen):

<div id="divPopup" style="position:absolute; left:50%; top:40%; width:250px; height:200px; margin-left:-125px; margin-top:-100px;z-index:1;visibility:hidden;background-color: LightGrey;border: medium solid black;padding: 5px;"> <br />  <div style="font-weight:bold;margin: 5px 0px 25px 0px;">Google Analytics Settings:</div><br />  <div style="text-align: center; line-height: 2"><br /> <a style="display:block;" href="#" onclick="alert('Custom Segment cookie __utmv value: ' + readCookie('__utmv'));">Check if Custom Segment is set</a><br /> <a style="display:block;" href="#" onclick="pageTracker._setVar('NoTracking');alert('Custom Segment cookie __utmv set to NoTracking.');">Set Custom Segment to NoTracking</a><br /> <a style="display:block;" href="#" onclick="eraseCookie('__utmv');alert('Custom Segment cookie __utmv cleared.');">Clear Custom Segment</a><br /> </div><br />  <a style="position: absolute; bottom: 5px; right: 10px;" href="#" onclick="returnObjById('divPopup').style.visibility = 'hidden';">Close</a> <br /></div>

The final section is a link that can be placed somewhere on your page. Clicking the link will display the popup:

I use a period for the link text and hide it somewhere on the page. This way I can click the hidden link from any computer to disable tracking for that browser. This is an example of what the end result looks like:

For some reason Google Chrome does not let your clear the __utmv cookie using JavaScript. It works in IE and it works in Chrome on a localhost page, but it doesn't work on the live blog. A bit strange, but you can always clear the cookie manually in the browser. Oh, and don't forget to setup the filter in Google Analytics to exclude the traffic (see link above)

The next time I work on this I will probably change it so that the tracking status is displayed on the actual link itself using red "__ TRACKING DISABLED __" text if your page views were not being tracked or a normal period to anyone who's traffic was being tracked.