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 embeds our widget on their page. The .js file is served from mypany/js/widget.js the widget.js creates a hidden iframe on usersite (in our div) that loads mypany/js/trackingpage.html (and maybe it includes a few parameters like domain=usersite 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?

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. embeds our widget on their page. The .js file is served from mypany/js/widget.js the widget.js creates a hidden iframe on usersite. (in our div) that loads mypany/js/trackingpage.html (and maybe it includes a few parameters like domain=usersite. 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?

• javascript
• google-analytics

• You can alway do what Google does: create a (sub)domain that serves nothing but a single pixel. On each event in your javascript widget request that pixel (with parameters for event name and any parameter that isn't sent with a http request anyways ). Write a script that parses the log file for that domain and hook the results up to an excel table or a mercial dashboard solution. Seems cleaner than messind around with GA. And talk to you clients so they can make sure they are allowed to deploy widgets that send parties to 3rd party servers (at least in Europe that's not longer a given). – Eike Pierstorff Commented Nov 16, 2012 at 14:43
• Parsing logs sounds like a huge PITA. No thanks. But thanks for trying! – Brian Pipa Commented Dec 11, 2012 at 16:10
• I have a very similar problem. Did you e up with a solution since you asked the question? Any tips? – davidrac Commented Jul 10, 2013 at 8:40
• @davidrac No, nothing yet. I haven't really tackled it yet. It's actually not high priority for anyone but me (since I wrote the widget) but I'd like to get something in place to track its usage. – Brian Pipa Commented Aug 13, 2013 at 14:05
• Thanks. I've actually solved this for our widget. It's quite simple. I'll post the answer. – davidrac Commented Aug 13, 2013 at 14:14

2 Answers 2

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./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.

On the client site with the widget, have an ajax request that calls to your server to request the widget content. Tag the request URL with GA Campaign parameter information and you will be able to see widget traffic. The ajax response can be adjusted to fit the scenario.