Javascript widget tracking with Google Analytics

Question

I am trying to figure out the best way to do tracking for a Javascript widget. I work for a non-profit and I have written a Javascript widget that websites can embed on their site. The piece of code they put on their site has a container for the widget (a div) and it loads our .js file. Our .js file populates the container with HTML to show an image and some info.

I'd like to be able to track the usage of this widget on other sites and the number of times it gets loaded (seen). We are using Google Analytics on our site so that seems like the most effective way to do it. I don't want to embed our GA code in the widget since that would more than likely screw up any GA tracking the other site may be doing.

My idea was to include a hidden iframe that loads a tracking page on our site and the tracking page would have the proper GA code in it. So, for example: usersite.com embeds our widget on their page. The .js file is served from mycompany.org/js/widget.js the widget.js creates a hidden iframe on usersite.com (in our div) that loads mycompany.org/js/trackingpage.html (and maybe it includes a few parameters like domain=usersite.com or something that the js on the tracking page can pull off and log to GA) and trackingpage.html has our GA code to register that the widget has been used.

This seems like a simple way to solve this. Does this seem like a reasonable way to do this? or is there a better way?

Answer 1

Our widget works by the customer including a javascript file in his site. Our javascript code adds the widget to the needed places in the page.

Adding Google Analytics was quite simple: I added the GA code to the javascript file that is loaded by the customer site:

// setup google analytics
var _gaq = _gaq || [];
_gaq.push(['REPLACE_WITH_SOME_UNIQUE_NAMESPACE._setAccount', 'REPLACE_WITH_YOUE_GA_ID']);
_gaq.push(['REPLACE_WITH_SOME_UNIQUE_NAMESPACE._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);
})();

I also track other specific events directly from our Javascript like that:

  _gaq.push(['REPLACE_WITH_SOME_UNIQUE_NAMESPACE._trackEvent', 'REPLACE_WITH_YOUR_EVENT_CATEGORY', 'REPLACE_WITH_YOUR_EVENT_ACTION']);

Important

You must use the namespace in order to avoid colliding with the site's GA (if present)

You should configure your Google Analytics profile to also display the host. Google have a good explanation on that in here (under Modify your cross-domain profile with a filter to show the full domain in your content reports)

So far this approach seems to work fine as long as you make sure the cookie configuration (domain etc.) are similar to the hosting site's. If, for example, the host domain is different, it may cause duplicate hits.