Tag Archives: javascript

Sharepoint 2010 & Google Analytics

Discovered that you can set a custom variable in Google Analytics to the ID of the Sharepoint user (that’s ID, not Name) :

This is the tracking code I used. The important part here is the _gaq.push([‘_setCustomVar’ line. We can use the Sharepoint JS variable _spUserId:

<script type="text/javascript">
 
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-xxxxxxxx-x']);
  _gaq.push(['_setCustomVar',
		1,         // This custom var is set to slot #1.  Required parameter.
		'User',    // The name of the custom variable.  Required parameter.
		_spUserId, // This is the Sharepoint JS variable _spUserId. Required!
		2          // Sets the scope to session-level.  Optional parameter.
	   ]);
_gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
 
</script>

Don’t forget to change the UA string from

UA-xxxxxxxx-x

to the value for your site!

 Lovely!

Toybox A4 Code

As promised, more code! This time for the Toybox A4 canvas demo page I created.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Toybox A4</title>
 
	<script language="javascript" type="application/javascript">
 
		var example;
		var context;
		var b =0;
 
		function init() {
			example = document.getElementById('canvas1');
			context = example.getContext('2d');
			b=0;
			draw();
		} // end init
 
		function draw() {
 
			context.fillStyle = "rgb(255,255,255)";
			context.fillRect(0, 0, 800, 800);
 
			var icCount = 16;
			var number = Math.PI * 2 / icCount;
 
			for (n=1; n<= icCount; n++) {
 
				x = 200 + ((Math.sin(number * (17-(n/ Math.PI)) * b)) * (20+(n*8)));
				y = (n * 30) + 20;
				c = (17-n) * 16;
 
				// Draw background circle
				context.beginPath(); 
				context.fillStyle = 'rgb(255,255,255)';
				context.arc(x, y, 22, 0, Math.PI*2, true); 
				context.closePath();
				context.fill();
 
				// Draw Foreground circle
				context.beginPath(); 
				context.fillStyle = 'rgb(' + c + ',' + c + ',90)';
				context.arc(x, y, 20, 0, Math.PI*2, true); 
				context.closePath();
				context.fill(); 
 
			} // end for
 
			b += 0.04;
 
			setTimeout("draw()",33);
 
		} // end draw function
 
</script>
 
</head>
 
<body onload="init();" align="center" bgcolor="#FFFFFF">
	<canvas id="canvas1" width="400" height="800"></canvas>
</body>
 
</html>