Google Analytics Dashboard Plugin

It's finished! I've uploaded the plugin to the -extras repo, so you can grab it there. The current version requires Habari 0.7 to run. I've gone ahead and made a 0.6 branch. I don't have 0.6 installed anywhere right now to test, so if you get the chance to, let me know if it works or not. Once I find out I'll make a tag for it.

The plugin allows you to create your own dashboard modules for any reports that you want to see. Each module is made up from a XML file which tells the plugin what info we need from Google Analytics, and a PHP template that is used to output the modules display.

The templates have access to all of the data from the report. This way if you need to override anything that the plugin functions would handle you can. A perfect example is actually in one of the default modules, Content Overview. That template outputs the module pane without using any internal functions:

<ul class="items">
	<?php foreach ( $data[1] as $k => $v ) { ?>
	<li class="item clear">
		<span class="message pct75 minor"><?php echo $k; ?></span>
		<span class="date pct15 minor"><?php echo $v; ?> views</span>
		<span class="comments pct10"><?php echo number_format( (($v / $data_total) * 100), 2); ?>%</span>
	</li>
	<?php } ?>
</ul>

As I mentioned, you can also override any builtin functions that you need to. Googles GeoMap Visualization doesn't seem to properly detect the width of the DIV that it's contained in, so it tends to be wider than what your div actually is. To work around this, in the template, we actually add in a little detection and do the chart options there instead of in the map_overlay.xml.

<div id="div_<?php echo $slug; ?>"></div>
<script type="text/javascript">
// Get the actual width of the div
var divWidth = document.getElementById("div_<?php echo $slug; ?>").offsetWidth;
// Load up our GeoMap options instead of using builtin $js_opts
var opts = { 
	height: 200,
	width: divWidth,
	showLegend: false
};
<?php echo $js_data; ?>
<?php echo $js_draw; ?>
</script>

So to create your own dashboard modules, just create your report_name.xml and report_name.php in the custom directory. All of your custom modules should go here. I've split this up so that you can upgrade the plugin without losing any custom modules you have already done.

Just to show you how flexible this is, I'll cover how to create a Visitors vs Pageviews module for your dashboard. (Don't worry about copying all of this out. It's available as example_report_1 in the custom directory.) First, we'll create the XML that tells the plugin what dimensions and metrics we want to pull from Google Analytics.

<?xml version="1.0" encoding="utf-8" ?>
<report>
	<name>Visits vs Pageviews</name>
	<type>linechart</type>
	<opts>height: 200, backgroundColor: 'FAFAFA', legendBackgroundColor: 'FAFAFA', legend: 'bottom'</opts>
	<sort>none</sort>
 
	<dataReference order="1">
		<dimensions>ga:month,ga:day</dimensions>
		<metrics>ga:visits</metrics>
		<sort>ga:month</sort>
	</dataReference>
	<dataReference order="2">
		<dimensions>ga:month,ga:day</dimensions>
		<metrics>ga:pageviews</metrics>
		<sort>ga:month</sort>
	</dataReference>
 
	<dataTypes>
		<row type="string">Date</row>
		<row type="number">Visitors</row>
		<row type="number">Pageviews</row>
	</dataTypes>
</report>

And here's the PHP template that it uses:

<div id="div_<?php echo $slug; ?>"></div>
<script type="text/javascript">
	var opts = { <?php echo $js_opts; ?> };
	<?php echo $js_data; ?>
	<?php echo $js_draw; ?>
</script>

Pretty simple, huh? This will output the following on your dashboard module:

Any questions/problems, you can leave a comment here or catch me in #habari.

This entry was posted on Sunday, July 26th, 2009 and is tagged with google, habari and plugin. You can follow any responses to this entry through the Feed for this Entry.