Tracking a Javascript widget using Google Analytics

Question

I am trying to find the best tracking method for a Javascript widget. I work for non-commercial purposes, and I wrote a Javascript widget that websites can embed on their site. On the piece of code that they put on their website, there is a container for the widget (div) and it loads our .js file. Our .js file fills the HTML container to display the image and some information.

I would like to track the use of this widget on other sites and the number of downloads (visible). We use Google Analytics on our website to make it look like the most effective way to do this. I don’t want to embed our GA code in the widget, as this is likely to spoil any GA tracking that another site can do.

My idea was to enable a hidden iframe that loads the tracking page on our website, and the tracking page would have the correct GA code in it. So, for example: usersite.com embeds our widget on its page. The .js file is served from mycompany.org/js/widget.js widget.js creates a hidden iframe on usersite.com (in our div) that loads mycompany.org/js/trackingpage.html( and maybe it includes some parameters, such as domain = usersite.com or something that js on the tracking page can log out and log into the GA system), and trackingpage.html has our GA code to register that the widget was used.

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

Answer 1

Our widget works as a client, including a javascript file on its website. Our javascript code adds the widget to the right places on the page.

Adding Google Analytics was pretty simple: I added the GA code to the javascript file uploaded by the client 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:

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

Attention!

You must use the namespace to avoid a collision with the GA site (if any)

You need to set up a Google Analytics profile to display the host. Google has a good explanation for this in here (under "Change your cross-domain network profile with a filter to show the full domain in your content reports")

For now, this approach works fine if you make sure that the cookie configuration (domain, etc.) is similar to the hosting site. If, for example, the host domain is different, it can cause duplicate images.

Answer 2

On the client site using the widget, request the ajax address that your server calls to request the contents of the widget. Mark the URL of the request with the Google Campaign settings information and you can see the widget traffic. The response to ajax can be customized to fit the script.