Creating a Perch dashboard widget for Google Analytics

Before Christmas, I added a news section to the CVW Web Design site because I wanted to write some articles there. As a result, I was also keen to get a quick snapshot of Google Analytics (GA) data every time an article was published. Perhaps I would get more visitors and page views for some articles and not others? With this information, I can tailor what I write. Of course, all this data is available via the GA system but I wanted a simple way of viewing a small subset of GA data in my website content management system (CMS).

Tl:dr: The cvw_googleanalytics Perch dashboard widget.

Starting points

I'm using Perch as the CMS for the site and the Perch developers recently introduced a Perch dashboard and widgets for the system so the Christmas break seemed like the ideal opportunity for me to get stuck into the Perch API code (something I've been threatening to do for a while, ahem). There was a new Perch tutorial for creating a dashboard widget so that was a good place to start. At the same time, I would need to read up on the GA API because I would be displaying the GA data outside of the GA system. At first glance, this looked like it would take me a while until I found OOCharts which is a script library that allows you to show GA data on your website. This seemed like a simple solution so I read the OOCharts documentation/example code and created a single HTML page example to show unique visitors, page views and a chart for the last 30 days. This worked fine (ouside of the Perch system). Yay!

Now to transfer the example to Perch….

Creating the Perch dashboard widget

Initially, I followed the Perch documentation and widget tutorial but I had a few problems with getting dashboard widgets to show up properly in my Perch admin. I think that was partly caused by a mistake in the Perch dashboard widget tutorial. The final value for the register_app function in admin.php needs to be “true" not “false". This has been corrected in the Perch dashboard documentation now and the tutorial will be updated soon I'm sure.

I had a few other problems as well (mostly caused by me being a clunkhead) but after a Twitter conversation with Pete Eveleigh, he wrote a similar dashboard widget called fm_analytics so I was able to see how he had overcome some issues that I had. Many thanks Pete.

Info: The fm_analytics widget does things differently to mine so go check it out.

Anyway, after another hour or so, I breathed a sigh of relief and shouted “Eureka!" (or something like that) when my newly modified dashboard widget was installed and showed the data in the Perch admin. Hurrah! Here's a screenshot of what the widget looks like on the Perch dashboard:

The widget gives two values for Unique Visitors and for Page Views followed by an interactive chart of the same data. The data is for the last 30 days and this can be configured in Perch settings. I may change the way that the data is displayed and tweak the style sheet in the next version but for the moment, it's OK.

I've named the widget cvw_googleanalytics and it's now on Github. I'll be improving the code over coming weeks. It's a personal project that scratches my own itch (so to speak) but if you want to try it out, please give it a whirl. All feedback gratefully received.

Here it is: The cvw_googleanalytics Perch dashboard widget.

What's next?

I want to read through the Perch API documentation to see how I might improve the widget but I'll be keeping it quite simple. I don't want to display lots of GA data but I want a few simple metrics and a chart or two. That's it.

It's been good to do a bit more with Perch outside of the normal installations and customisations – and I've enjoyed it – so I hope to create other widgets over coming months.

Credits: The foundation for the widget is OOCharts. It's great! Many thanks to its developer Tyler Shaddix.