MC's BLOG

I thought it was about time to blog about the latest version of my Google Analytics package for Umbraco, here, a couple of weeks after it has been released on our.umbraco.org.

It seems I haven’t blogged since august 2009, so excuse me if I’m a bit rusty.

Let me take a stroll down memory lane to CodeGarde’09 when the package was first showcased and actually won the prize for best package, which I’m clearly very proud off. I have been getting very good feedback ever since, and this has really motivated me to make the package even greater.
First release included some basic reports that you would also find in Google Analytics when logging in and clicking the main sections (Dashboard, Visitors, Traffic Sources, Content and Goals), and the charts was made using the Google Chart API – so Google all the way It covered a basic need to view basic statistics within Umbraco, but wasn’t really all that flexible.

After CodeGarden’09 I started the initial work to rewrite the package to make it more flexible and enable the ability to create custom reports, which had been a goal of mine since day one or two. Okay, maybe not from the first couple of days, as my first goal was to create a simple statistics section in Umbraco while learning how to create a custom section, which I had never done before. Version 1 of the package was very much a learning process for me. So after having gone through the learning process of version 1 I was ready to pursue my second goal: Create a killer Google Analytics package.

To fulfill my second goal I would have to implement the following features:

• Custom Reports
• Flash Charts
• Umbraco DataType

These features seemed somewhat simple at the time, but turned out to be very time consuming to make.
Creating custom reports based on 47 predefined Metrics and 65 predefined Dimensions makes up for a s**t load of combinations, so I had to come up with a way to calculate the results as a single integer, an average, a percentage and time. I think I have tested something like 90% of the reports, which are available through Google Analytics by default and it seems that my model works (so far anyway – I dread multi-series reports).

Next feature was the Flash charts. Flash charts are simply more flashy then static images, so I chose to go with Fusion Charts Free for the implementation because 1.they are free and open source, 2.they are super nice and 3.there is an impressive amount of charts available to work with. So far I have only implemented the Single Line chart, 2D & 3D Pie chart and Bar chart, but hope to implement more. Luckily it will be easy to add more charts, as I have created a C# wrapper for the properties that make up the Flash object.
I have kept the Google Chart API implementation for the summary charts, but also implemented as objects in my model.

The Data Type was one of the most requested features in the package forums on our.umbraco.org, so clearly I wanted to implement this as well and it is a very cool feature to have. I would love to be able to add a statistics-tab to my Document Types and see how many pageviews, visits etc. my content got.

With the main features down the only hurdle to overcome was the time factor. I originally thought I would be able to post an update in August 2009, but didn’t have enough time so maybe October was more realistic, but no. I kept pushing the release because I didn’t have enough time to dedicate to the project, and only worked on it from time to time during weekends.
The new year came and I had got a lot of work done, and when the feb16 birthday event was announced it was great opportunity to prep a release. The implementation of the different charts was done, and ability to create custom reports was also ready. Only some small features was still needing some polish, and the Data Type.
I thought to myself that I must release this package (give the people what they want) very soon, so I set a deadline for February 26. for release of the reworked package.

For the feb16 birthday event I demoed the new and hugely improved package in Copenhagen, which seemed to go okay. The crowd was really really quite, but I’m hoping it was because they were speechless
I announced that the package would be released on our.umbraco.org on feb 26. so the heat was on. The following 10 days I coded like a crazy to make my deadline, and I started creating teasers for the package to rise awareness and to further pressure myself.

Version 1.0.6 was released on feb.26th. and was very well received. The installer was updated a couple of days later, so current version is 1.0.7.

Current features include:

• 32 Standard Reports
• Custom Reports
• Data Type (choose any report)
• Switch between multiple profiles for accounts available through credentials (google account)
• Flash Charts based on Fusion Chart Free (Single line-, 2D & 3D Pie- and Bar charts)
• Static Charts for summary views (based on Google Charts API)
• Tables for viewing things like Content by Visits, Browser types, version etc.
• Sorting of reports (Umbraco tree)
• Sorting of charts within a report
• Editing of existing charts within a report
• Delete charts from a report
• Delete reports
• Change icons for reports in tree

Here are links to the 10 teasers, which I created during the last 10 days of development:

Installing the Package: http://screenr.com/EHh
Accounts & Profiles: http://screenr.com/3jx
Editing Reports: http://screenr.com/q3x and http://screenr.com/Mix
Data Type: http://screenr.com/gbx and http://screenr.com/8vx
Sorting Reports: http://screenr.com/Szx
Changing Icons: http://screenr.com/4cx
Custom Reports: http://screenr.com/k4x

I hope you find this package useful! I really enjoyed making it, and thanks for all the wonderful feedback!
If you have any suggestions for updates or additions, please feel free to add a request on the forums. Please also feel free to share your custom reports, as I would love to see which reports others use.

Google Analytics for Umbraco version 1.0.7

I have been thinking about this subject for some time now, but todays tweets got me thinking and I thought I’d write up a post to hopefully stir up some discussion.

Maybe I should start off by saying that i’m not a money hungry developer, but I think that we can all agree that even though we are working with an open source CMS, we have to make money some how some way. Of course we get paid when developing a customer solution, but it seems to me that things are a bit different when developing addons, plugins, packages, datatypes and everything else that has been developed by and for the Umbraco community.

Currently there are two packages available for purchase in the Umbraco store, and I counted 68 packages on our.umbraco.org today.
Don’t get me wrong, I love the fact that so many people are contributing with a lot of great stuff that is free to install and use. I personally used Warren‘s CWS package to get up to speed on Umbraco v.4 after not having used Umbraco since v.3.0.3. I think it is a great resource, but I probably wouldn’t have bought it if it was only available for purchase in the Umbraco store. No offense Warren

I myself started a pretty big project (at least for a spare time project) by developing Google Analytics for Umbraco, which is open sourced and thus free for all I thought about different models for getting a bit of return on creating a fairly large project, but ultimately decided that it should be open sourced. Partly because Google Analytics is already free to use, so it seem to be the best incentive to make the Umbraco package free as well – even though it might have greater value for some. Another part of the decision has to do with installbase and getting the package out there – won’t go into details, but sometimes its just nice to share your shit.
Axendo, who have also created an Analytics plugin for Umbraco, have chosen to make a limited free version and a paid version, which I think is a cleaver thing to do. I hope the good guys at Axendo are not pissed of by me making my package open source and free, but hopefully they’ll still be able to sell their package, and they could actually use my source in their product should they want to do so in the future.
I would personally find it cool if someone would want to adopt my Google Analytics for Umbraco package, and I would encourage all Solution Providers and Developers to make some money on implementing the Google Analytics section in customer solutions. In my latest offer to a new client I included a couple of packages from our.umbraco.org, which I think will be a win win situation for all: the client will get some very useful tools (free) and we (the solution provider) got some extra hours in on implementation.

Making a package free, open source or paid is ultimately up to the developer. One might think that because the CMS is free so should the addons. Well, not necessarily! Take a great addon like uCommerce which will definatly not be free, this product has a clear incentive for customers to buy it. I won’t go into details about uCommerce but I would love to hear Søren‘s thoughts on selling an addon for an open source CMS

Over the next six month I will be developing a couple of addons for Umbraco (got the ideas, just need the time), which will all be open source and made in my spare time. The main reason for these addons being open source is that the counter part or the part that will be integrated with Umbraco is also open source. I’m also hoping that the fact that the addons are free to install will help them spread and thus create a greater installbase. This could of course also be done with a limited free version and a paid full version, but I’m somehow not entirely sure that would work for the addons in question.
So how do I get paid for spending a lot of spare time creating great addons? Should I get paid? Isn’t the gift of giving enough?
Well, a sponsor-an-umbraco-dev program would be great but I don’t know who would actually sponsor my work, so maybe selling support/upgrades/feature request implementations would be a better solution?

I personally think that when the good guys at Umbraco start selling the Forms module, it will make it easier for other developers to sell their packages, addons, plugins or whatever. Would also love to hear Niels‘ thoughts on this – do you think that Umbraco Corp. in a sense will lead the pack and in some way encourage customers/users to pay for addons?
When a customer sees what great stuff he can get for a reasonable amount of money he probably won’t have a problem paying for it even though he “bought” an open source CMS in the first place, right?

So what do you think? Do you feel obligated to open source your Umbraco package or simply make it available for free? Are all the packages on our.umbraco.org not worth paying for? Are you hoping that all packages for Umbraco will always be free to install and use?

Please share your thoughts, as I would love to hear what others think about this subject.

Darren Ferguson, you are one of the few people with packages in the store. What are your thoughts?

Tommy Poulsen, you are making a great addon with the PDF creator. Do you intend to sell this addon or contribute it as a free to use package on our.umbraco.org and why?

Other package developers: Do you ultimately feel it depends on the content/usability of the package whether it should be free or paid?

I hope I didn’t make this post too much about money, but rather what makes developers or solution providers choose to make an Umbraco package free, paid or open source and how they get compensated for their work (via implementation for example?).

I’m happy to announce the first beta release of my Google Analytics plugin/section for Umbraco.
The development took a bit longer then first anticipated, but I think it turned out really well. There are still a few bugs, so I don’t recommend that you install it in a customer solution just yet. This first release is a beta release, so first off you should just try it out and please feel free to report any bugs you might find.
When I have had a chance to clean up the source code, and documenting it I will release the code as open source.

Currently known bugs are:
When submitting a new date range the first click on the button doesn’t raise the click event of the button, so you have to make your selection again and click the button to refresh the view with your new date range (default date range si one month).
I’m currently using Googles Chart API to display the charts, so the amount of data that can be displayed is limited.

At the bottom of this post you will find a link to download the files necessary to install the google analytics plugin. This is not a “normal” umbraco package that you can install from within the client, so need to unpack the files within the root directory of you umbraco installation.
These files are included in the package:
web.config
umbracoAppInserts.sql
umbracoAppTreeUpdate.sql (only needed if you have downloaded the package before – contains sql fix).
bin\Google.GData.Analytics.dll
bin\Google.GData.Client.dll
bin\Sitereactor.GoogleAnalytics.dll
config\Analytics\Analytics.config
config\Analytics\AnalyticsChartProperties.config
umbraco\config\lang\*.xml
umbraco\statistics\StatContent.aspx

So, there are a couple of things that you have to be aware of when installing/unpacking these files.
First off, the web.config file is just a standard umbraco web.config so be sure not to overwrite you own. This file is simply included to shown you how and where to configure the google analytics account that you want displayed within Umbraco.
Under <appSettings> you have to add the following to your web.config file:
<add key=”GoogleAnalytics.Email” value=”email@gmail.com”/>
<add key=”GoogleAnalytics.Passwd” value=”password”/>
<add key=”GoogleAnalytics.ProfileId” value=”ga:profileid”/>

These three entries are your Google Analytics credentials. If you are unsure of what your profileid number is, then login to analytics, click on the account you want shown within umbraco, click view report and the id value of the querystring is your profileid

The umbracoAppInserts.sql file is a sql script that creates three entries in your umbraco database, which will make the Statistics section appear within umbraco. Before you run this script, open it up and replace [umbracodatabasename] with [your db name].

Finally, in “umbraco\config\lang\” I have included the newest language files (from the 4.0.2.1 release) as all of these files include a translation for “Statistics” (the name of the section). You only need to extract these to your umbraco\config\lang directory if the section name looks like this: [stats]

I have included the latest release build of the Google Analytics .NET API, which is needed to get access to and retrieve data from the service.

The Sitereactor.GoogleAnalytics assembly contains all my wonderfull code -> Connecting to and retrieving analytics data feeds, manipulating the data and forming URLs for retrieving Google Charts (check out the API here). If you have a suggestion for another Chart implementation then googles, please let me know (should be open source).
All of this code will become open source very soon.

StatContent.aspx handles the analytics views within umbraco.

Analytics.config and AnalyticsChartProperties.config are used to configure the five views within the statistics section (Dashboard, Visitors, Traffic Sources, Content and Goals). These views are exactly what you find on the Google Analytics site with the only difference that it is currently not possible to click the statistics and get a detailed view (this will be included in a future release).
The usage of <section name=”Dashboard”> and <report name=”Pageviews” chartType=”" chartData=”" aggregateType=”"> within the Analytics.config-file is currently strongly typed, so you shouldn’t mess to much with this file – if you change the name attribute something will break or not shown up
The AnalyticsChartProperties.config-file you can go crazy with Values/InnerText only, though. Here, the size and color of small and large charts are specified. For example, a large SingleLineChart has a width of 500px and height of 125px, so if you want to increase that or maybe just change the color of the line, be my guest.

I think that was pretty much it. Let me know if you have any problems installing the section or experience bugs or differences in the datasets, please let me know (after you have double checked ). All feedback is appriciated.

Here are some screens of what to expect – file at the bottom.

Download the package from our.umbraco.org.

UPDATE: Package updated with sql insert and update script.
Previous package had a typo in the umbracoAppInserts.sql script (the column “treeHandlerType” in the “umbracoAppTree” table had “loadStatTree” – should be “LoadStatTree”). Caused the five nodes not loading.

PS: This release was only been tested with umbraco v4.0.1. If you have trouble installing it with v3, please let me know and I’ll look into it.

UPDATE (07/07-09): This blog post is a bit our of date with regards to the installation of the add-in for umbraco. Please look to the project page on our.umbraco.org for the latest package.
Current package is GoogleAnalytics_1.0.2-fixed.zip.
Google Analytics for Umbraco Project page

This is the first installment in a series about implementing google analytics (with the new data export api) in Umbraco, so you can get your sites statistics in your CMS (where it should be). This post only deals with getting the section up and running, so everything is prepared for the next installment, which will deal with the actual statistics.

As you can see in my previous post I have been giving a shot at porting the analytics api to the .NET client library. Having the availability of analytics in Googles .NET client library would make the code and usage much prettier …. and it would probably make the implementation in a sysmtem like Umbraco much easier.

Well back to the topic. When I first saw the announcement of the analytics api I touhgt that an ideal implementation would be a CMS like Umbraco (or Sitecore for that matter), and when Niels Hartvig twitted about the challenge to create an analytics plugin for Umbraco I knew it was my calling. Okay, not a calling in a biblical sense, but an obvious excuse to get started.

So how do one get started… I thought the best solution would be to create a statistics section and keep the style of the Umbraco sections. Lucky for me there is predefined css classes and icon for a statistics section, so I can concentrate on how to implement the functionality.
I haven’t actually created a new section before, so I started off by browsing the Umbraco forums for tips and inspiration, which I found in a two piece article on simm.dk – Part one & two. The article shows which tables in the database needs to be updated with info on the new section, which was a great help to get started.

I started by creating a new entry for my statistics app in the umbracoApp table:

umbracoApp table view

The fields was filled with the following data:

• sortOrder: 9
• appAlias: stats
• appIcon: .traystats
• appName: Statistics
• appInitWithTreeAlias: NULL

You can find a description of the diffirent fields in the article on simm.dk, so I won’t go too much into detail about the above. The important thing here is to note the ‘appAlias’, which is used to reference the application in the next two tables that also has to be updated with some data about the application. The classname ‘.traystats’ is already present in the css, so we don’t need to change or anything special here – lucky me/us.

Next table that has to be changed in order for the statistics section to show in Umbraco is umbracoAppTree:

umbracoAppTree table view

The fields was filled with the following data:

• treeSilent: False
• TreeInitialize: True
• treeSortOrder: 0
• appAlias: stats
• treeAlias: stats
• treeTitle: Statistics
• treeIconClosed: folder.gif
• treeIconOpen: folder_o.gif
• treeHandlerAssembly: Sitereactor.GoogleAnalytics
• treeHandlerType: LoadStatTree
• action: NULL

Again you’ll find a very nice description of the different fields in the article on simm.dk. The most important part here is probably the treeHandlerAssembly and treeHandlerType, which I have set to my custom assembly that will make up the Google Analytics section and the class which will load the tree (treeHandlerType) is set to LoadStatTree.
The Open and Closed tree icons are is standard, as I don’t want to do anything special on this part as of now.

I want to make a special note on the appAlias, one thing that I missed in the articles on simm.dk. You might want to add a key of the appAlias to the language xmls, which are located in /umbraco/config/lang/ (en.xml for the english language), otherwise the title on the treelist could end up being just [stat] (which isn’t very pretty). Look for the following area tag:
<area alias="sections"> and add the following key <key alias="stats">Statistics</key>

The next table is easy Its just mapping the user(s) to the app/section – in this case I only have a single admin user who I want to give access.

umbracoUser2App table view

The default admin user id is zero, so just add that and the appAlias and the table editing is done.

Now on to the coding.

I started off by trying the code example in the last of the two articles on simm.dk, but couldn’t actually get it to work so I browsed through the Umbraco source code to see how the User and Member sections are built. The way these two classes (loadUsers and loadMembers) are built is fairly simple and you can find them plus all the other classes, which loads treelists in Umbraco in the following folder: umbraco 4.0.1 source\umbraco\presentation\umbraco\Trees.
So to setup the code that loads the tree menu I created a class, which implements BaseTree – an abstract class that implements the ITree interface.
Example: public class LoadStatTree : BaseTree

This implementation implies that the following three clases are implemented in the LoadStatTree class:

• protected override void CreateRootNode(ref XmlTreeNode rootNode)
• public override void RenderJS(ref StringBuilder Javascript)
• public override void Render(ref XmlTree tree)

CreateRootNode simply does what the name implies – creates the root node for the current section. This can be implemented as follows:
rootNode.Icon = FolderIcon; //Standard icon for a folder
rootNode.OpenIcon = FolderIconOpen; //Standard icon for an open folder
rootNode.NodeType = TreeAlias; //Alias of the current tree
rootNode.NodeID = "-1"; //Start node should be set to minus in order to not interfer with the normal structure/nodetree.

RenderJS is used to render Javascript output to the browser, which (from the actually section in Umbraco) is used to open the webform with the dashboard/TabView (right side of the screen). Here is an example:
Javascript.Append(
@"
function openStats(id) {
parent.right.document.location.href = stats/statsDashboard.aspx?id=' + id;
}
");

In the sample code, which you will find at the end of this post the webform that is opened simply shows a Hello World text. In order for the dashboard to look correct and in keeping with the look and feel of Umbraco it would be a good idea to implement the TabView control. In the next post I’ll show you how it can be done and how I have used it.

The last method Render is used to programmatically create the tree menu using the XmlTree. For this example I have simply created four items in the menu using the XmlTreeNode like this:
XmlTreeNode xNode = XmlTreeNode.Create(this);
xNode.NodeID = "0";
xNode.Text = "Menu Item 1"; //Name
xNode.Action = "javascript:openStats(0);";
xNode.Icon = "folder.gif";
xNode.OpenIcon = "folder_o.gif";
tree.Add(xNode);

Okay, so now the tree menu is in place and we can concentrate on the content and how and what of the analytics statistics to show on the dashboard.
While we wait for a finished version of the analytics data export api implemented in the .NET client library, this article is a good place to start for using the available api in C#: Introducing Google Analytics API with asp.net / C#. It could of course be implemented using javascript, but not sure how well it would fit into the existing context of Umbraco. I have yet to try it out, but I fear that it will interfer with some of the existing javascript used by the Umbraco client and that the login functionality won’t be too smooth. But maybe initializing the login with some jQuery appended to the browser might do the trick. Anyway, I will look into both possibilities untill the next post where there will be an actual implementation of the google analytics data api.

Here is the code sample, which implements the above examples (and which will also be expanded with an implementation of google analytics).
And here is a screenshot of the results of the examples and code given in this post:

Umbraco Statics Section

I found this post on the umbraco forum, which was one of the things I was missing in the 3.0.3 version of umbraco. hohios shows how you can add templating/html snippets functionality to TineMCE in umbraco….

Great feature and just what I has looking for in my current moonlighting project.

Check out the post at umbraco forums:
TinyMce -Format- dropdown and html templates-snippets (workaround)

Update for Umbraco v.4.
This post is a little outdated for the newer versions of umbraco, which was kindly pointed out in the comments. So if you want to enable the ‘template’-plugin for TinyMCE please look at this wiki entry:
Enabling the ‘Template’ plugin for TinyMCE.