Analytics for 3rd party JavaScript widgets

Question

I'm trying to find the best approach for analyics on 3rd party JavaScript widgets - i.e. tools and content that is distributed to any number of arbitrary users, who include the widgets as HTML snippets with tags.

On the same domain

Note that the widgets do not load into an iframe element that has a document loaded from the external site. Instead, they load content into the DOM of the host page - i.e. they are treated as being on the same domain as the host.

Analytics for a fragment of the host page

So, essentially, I want to track stats (such as widget views, user clicks and custom interactions within the widget), but I only want to track stats for the fragment of the host page that is the widget. I don't want to track clicks on the host page that are outside the widget.

I want the stats to be collated together, so that stats for the widget on site A will be aggregated with those of the widget on site B and site C, etc.

Questions

1. Is it possible to use Google Analaytics in a custom way that satisfies these requirements? Or is it not possible to separate GA from the rest of the data collected on the host page?
2. If it is possible to use Google Analytics, then will there be a problem if the host page already uses GA (with a different GA profile ID), or is it possible to keep them safely apart?
3. Are there any other analytics packages out there that are properly suited to widget stats tracking, to meet these requirements?
4. Or, how else would you approach the problem of obtaining stats for these widgets?

Answer 1

GA can be used for this, though since it is a free tool, it is a bit limited compared to the other tools out there. Example of other tools out there are Yahoo Web Analytics (YWA), Omniture SiteCatalyst, and Webtrends.

Most of the tracking tools out there have the ability to do custom link and "event" tracking. Basically what you would do is lookup the necessary snippet of code for custom link tracking and put it into a wrapper function to be executed in an onclick event (or add an event listener, etc..).

The first thing you want to do is decide what "events" you want to have for the widget(s). You mentioned counting "widget views". That's easy enough to do: just put a snippet of custom code on the page the widget is embedded on.

But beyond that...does clicking any button count as a single event? Does each button signify a different event? etc... Also, are there any custom values you want to associate with the buttons, like a product ID or description or whatever.

Another important thing to ask yourself when deciding on what you want to track is "How actionable is this data?" There is very little you can't track, but there are a lot of things that aren't very useful for making real business decisions.

For example, it sounds like overall you are wanting to try to measure user interaction with widgets. I'm sure the idea is to figure out how useful, engaging, etc... they are to people, so you can figure out whether it's worth further developing them or throwing money at them or dropping them. Fair enough. But just remember to make the events goal-oriented. Knowing how many times a user clicked a button isn't very useful because all by itself it isn't very actionable. Knowing how many times people completed a process or step, etc.. is more actionable.

Once you have made a list of what all you want to track and when, then you can start building your custom code.

With GA, there are 2 main ways to track events and metrics: through steps/goals, and through custom variables. The way you setup steps/goals with GA is to have GA match what the URL of the page is. For example, if you have a newsletter signup form, the form page might be signup.html and the confirmation page might be signup_confirmation.html. You would then setup a goal in the GA interface. The goal would match for signup_confirmation.html and you could have a step be to look for signup.html. Then you can see how many people viewed your form and completed it vs. abandoned it.

You can use this same tracking method with events, by pushing a virtual page view to GA.

Here is an article detailing how to push a virtual page view:

http://www.google.com/support/analytics/bin/answer.py?hl=en&answer=55521

But basically, whenever the event happens (like a view of the widget, click of a button, etc.. you would execute the following javascript:

pageTracker._trackPageview(’virtual url here’);

Main thing to note about this method is that you can organize/categorize/provide hierarchy to your data by passing delimited values. This will help you rollup data for different widgets/sites.

The 2nd way to record events is with custom variables. Making use of custom variables during events provides a lot of reporting possibilities and flexibility. Here is a link to how to use them:

http://code.google.com/apis/analytics/docs/tracking/gaTrackingCustomVariables.html