Add Google Analytics Tracking to JSFiddle

If you’ve use JSFiddle, you already know how awesome it is.  It’s an elegant way to share code snippets that work.  I’ve been using it to test and prototype some FabricJS scripts and help the community by sharing some FabricJS scripts to others.  It’s not much, but I like to offer help when I can.

The marketing and data minded person in me though wants to know who is using my code.  I’ve seen it shared a time or two on StackOverflow (super cool to see), but I want to know more.  So the question came: how can I track my JSFiddles usage in Google Analytics?  This is not a default feature of JSFiddle.  But with a minimal amount of effort this can be resolved quickly.

The Solution:

Create a Google Analytics Account

We first need to have a account to report to in Google Analytics.  So you’ll need to first set that up.  I won’t go into the details on what that entails – if you don’t know how to do this, Google is always there to help you.  Try this guide for example.

I do want to touch on options on how to best structure you Google Analytics account however.  In my opinion, there could be different methods to do this reporting depending on where you’d like to see your data.

1. A new property
   • This is the most straightforward and easy to setup option.  And for most this might make the most sense.  Essentially, this means that this traffic is a domain unique to your other domains/websites.  It’ll keep your JSFiddle traffic in different reports and entities from your other Google Analytics data.  To setup this method of reporting, create a new property in Google Analytics.
2. A view within an existing property
   • This method would put your JSFiddle traffic under an existing property, which implies that it is part of that same property.  Look at it this way – lets say your JSFiddle is used as part of your business to share how to write code that works with your service.  For that matter, JSFiddle is really seen as a direct extension of your business and in essence should be reported with the data of your primary site, despite coming from a different domain name.  To setup this method of reporting, use the same tracking code for the property (website) you’d like the JSFiddle traffic to be associated to.
   • You will have some further options you can choose to explore.  This method will put both your primary domain and your JSFiddle traffic into the same reporting.  If you’d like to quickly and easily isolate your JSFiddle tracking only, you may want to set up a view with filters just for JSFiddle traffic.  Here again, I won’t go into the details, but Google can help you in understanding and setting up views.
     • If I were setting this up, I’d go further than that though with multiple views:
       • All Traffic
         • A view for all traffic for this property.  I would set a filter for my internal IP Addresses, but that’s about it.  I’d leave this view unfiltered otherwise.
       • Primary Domain
         • A view with filters to show only traffic from the primary domain.
       • JSFiddle Domain
         • A view that is filtered to show only traffic from the JSFiddle domain.

Ok, that’s enough about Google Analytics.  That’s not the secret behind this post – so lets get to that.

Add Google Analytics Tracking to JSFiddle

So really all we need to do is take the tracking code from Google Analytics and add it to our JSFiddle.  Once it’s there, we are all set to start seeing data come in.  But where do we best put the code?

• You could put the code directly into the Fiddle – it is just a Javascript tag after-all.  (be sure to remove the opening/closing <script></script> tags)  I DO NOT advise taking this approach as it will muddy up your code.  The point of JSFiddle is to show clean code snippets to help others understand a concept – it’s not to show GA tracking code.  Plus if you ever need to make a change to your GA code, you’d need to do this on all of your Fiddles.  That doesn’t scale well…
• The “right way” to do this, is simply add your Google Analytics tracking code as an external resource.  I simply put my code on my webserver in a new .js file and host it there.  You then simply add the URL of your tracking code as an external resource to each of your fiddles.
  • In writing this, I’m wondering if it’d be possible to add it in a JSFiddle and use that to host the code… not sure I guess… something someone could try and comment back if it works or not.

1. Create a file on your web server.  Name it what you’d like, and use the .js extension.
   

   

   &#200B; // ]]>