{"id":491,"date":"2014-11-01T21:47:54","date_gmt":"2014-11-01T15:47:54","guid":{"rendered":"http:\/\/promincproductions.com\/blog\/?p=491"},"modified":"2014-11-01T21:48:47","modified_gmt":"2014-11-01T15:48:47","slug":"add-google-analytics-tracking-jsfiddle","status":"publish","type":"post","link":"https:\/\/promincproductions.com\/blog\/add-google-analytics-tracking-jsfiddle\/","title":{"rendered":"Add Google Analytics Tracking to JSFiddle"},"content":{"rendered":"<p>If you&#8217;ve use <a href=\"http:\/\/jsfiddle.net\/\" target=\"_blank\" rel=\"nofollow noopener\" data-lasso-id=\"244\">JSFiddle<\/a>, you already know how awesome it is. \u00a0It&#8217;s an elegant way to share code snippets that work. \u00a0<a title=\"PromInc JSFiddle public dashboard\" href=\"http:\/\/jsfiddle.net\/user\/PromInc\/fiddles\/\" target=\"_blank\" data-lasso-id=\"245\" rel=\"noopener\">I&#8217;ve been using<\/a> it to test and prototype some FabricJS scripts and help the community by sharing some FabricJS scripts to others. \u00a0It&#8217;s not much, but I like to offer help when I can.<\/p>\n<p>The marketing and data minded person in me though wants to know who is using my code. \u00a0I&#8217;ve seen it shared a time or two on StackOverflow (super cool to see), but I want to know more. \u00a0So the question came: how can I track my JSFiddles usage in Google Analytics? \u00a0This is not a default feature of JSFiddle. \u00a0But with a minimal amount of effort this can be resolved quickly.<\/p>\n<h2>The Solution:<\/h2>\n<h3>Create a Google Analytics\u00a0Account<\/h3>\n<p>We first need to have a account\u00a0to report to in Google Analytics. \u00a0So you&#8217;ll need to first set that up. \u00a0I won&#8217;t go into the details on what that entails &#8211; if you don&#8217;t know how to do this, Google is always there to help you. \u00a0<a href=\"https:\/\/support.google.com\/analytics\/answer\/1009694?hl=en\" target=\"_blank\" rel=\"nofollow noopener\" data-lasso-id=\"246\">Try this guide for example<\/a>.<\/p>\n<p>I do want to touch on options on how to best structure you Google Analytics account however. \u00a0In my opinion, there could be different methods to do this reporting depending on where you&#8217;d like to see your data.<\/p>\n<ol>\n<li>A new property\n<ul>\n<li>This is the most straightforward and easy to setup option. \u00a0And for most this might make the most sense. \u00a0Essentially, this means that this traffic is a domain unique to your other domains\/websites. \u00a0It&#8217;ll keep your JSFiddle traffic in different reports and entities from your other Google Analytics data. \u00a0To setup\u00a0this method of reporting, create a new property in Google Analytics.<\/li>\n<\/ul>\n<\/li>\n<li>A view within an existing property\n<ul>\n<li>This method would put your JSFiddle traffic under an existing property, which implies that it is part of that same property. \u00a0Look at it this way &#8211; lets say your JSFiddle is used as part of your business to share how to write code that works with your service. \u00a0For 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. \u00a0To setup this method of reporting, use the same tracking code for the property (website) you&#8217;d like the JSFiddle traffic to be associated to.<\/li>\n<li>You will\u00a0have some further options\u00a0you can choose to explore. \u00a0This method will put both your primary domain and your JSFiddle traffic into the same reporting. \u00a0If you&#8217;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. \u00a0Here again, I won&#8217;t go into the details, but <a href=\"https:\/\/support.google.com\/analytics\/answer\/2649553?hl=en\" target=\"_blank\" rel=\"nofollow noopener\" data-lasso-id=\"247\">Google can help you in understanding and setting up views<\/a>.\n<ul>\n<li>If I were setting this up, I&#8217;d go further than that though with multiple views:\n<ul>\n<li>All Traffic\n<ul>\n<li>A view for all traffic for\u00a0this property. \u00a0I would set a filter for my internal IP Addresses, but that&#8217;s about it. \u00a0I&#8217;d leave this view unfiltered otherwise.<\/li>\n<\/ul>\n<\/li>\n<li>Primary Domain\n<ul>\n<li>A view with filters to show only traffic from the primary domain.<\/li>\n<\/ul>\n<\/li>\n<li>JSFiddle Domain\n<ul>\n<li>A view that is filtered to show only traffic from the JSFiddle domain.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>Ok, that&#8217;s enough about Google Analytics. \u00a0That&#8217;s not the secret behind this post &#8211; so lets get to that.<\/p>\n<h3>Add Google Analytics Tracking to JSFiddle<\/h3>\n<p>So really all we need to do is take the tracking code from Google Analytics and add it to our JSFiddle. \u00a0Once it&#8217;s there, we are all set to start seeing data come in. \u00a0But where do we best put the code?<\/p>\n<ul>\n<li>You could put the code directly into the Fiddle &#8211; it is just a Javascript tag after-all. \u00a0(be sure to remove the opening\/closing &lt;script&gt;&lt;\/script&gt; tags) \u00a0I DO NOT advise taking this approach as it will muddy up your code. \u00a0The point of JSFiddle is to show clean code snippets to help others understand a concept &#8211; it&#8217;s not to show GA tracking code. \u00a0Plus if you ever need to make a change to your GA code, you&#8217;d need to do this on all of your Fiddles. \u00a0That doesn&#8217;t scale well&#8230;<\/li>\n<li>The &#8220;right way&#8221; to do this, is simply add your Google Analytics tracking code as an external resource. \u00a0I simply put my code on my webserver in a new .js file and host it there. \u00a0You then simply add the URL of your tracking code as an external resource to each of your fiddles.\n<ul>\n<li>In writing this, I&#8217;m wondering if it&#8217;d be possible to add it in a JSFiddle and use that to host the code&#8230; not sure I guess&#8230; something someone could try and comment back if it works or not.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ol>\n<li>Create a file on your web server. \u00a0Name it what you&#8217;d like, and use the\u00a0.js\u00a0extension.<br \/>\n<figure id=\"attachment_494\" aria-describedby=\"caption-attachment-494\" style=\"width: 500px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-01-at-10.43.23-AM.png\" rel=\"attachment wp-att-494\" data-lasso-id=\"248\" data-rel=\"lightbox-gallery-VbTOEHWb\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img decoding=\"async\" class=\"size-medium wp-image-494\" src=\"https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-01-at-10.43.23-AM-500x105.png\" alt=\"Add tracking to your JSFiddle scripts.\" width=\"500\" height=\"105\" srcset=\"https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-01-at-10.43.23-AM-500x105.png 500w, https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-01-at-10.43.23-AM-150x32.png 150w, https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-01-at-10.43.23-AM.png 598w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/a><figcaption id=\"caption-attachment-494\" class=\"wp-caption-text\">Remove the wrapping<\/p>\n<p>\/\/ &lt;![CDATA[\n\ntags, and save your properties Google Analytics tracking code in a publicly accessible .js file.<\/figcaption><\/figure><span id=\"mce_marker\" data-mce-type=\"bookmark\">&#xFEFF;&amp;#200B;<\/span>\n\/\/ ]]&gt;\n<\/dd>\n<\/dl>\n<\/div>\n<\/li>\n<li>Copy the tracking\u00a0code provided by\u00a0Google Analytics into this new file and save it.\n<ul>\n<li>NOTE: remove the\u00a0opening and closing &lt;script&gt;&lt;\/script&gt; tags from the Google Analytics code.<\/li>\n<\/ul>\n<\/li>\n<li>Paste the URL to your tracking code into the JSFiddle external resource option, and click the\u00a0<em>plus<\/em> button to attach it.<br \/>\n<figure id=\"attachment_492\" aria-describedby=\"caption-attachment-492\" style=\"width: 284px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-01-at-9.28.27-AM.png\" rel=\"attachment wp-att-492\" data-lasso-id=\"249\" data-rel=\"lightbox-gallery-VbTOEHWb\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img decoding=\"async\" class=\"size-full wp-image-492\" src=\"https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-01-at-9.28.27-AM.png\" alt=\"Track your JSFiddles in Google Analytics with an externally hosted Goolge Analytics tracking code\" width=\"284\" height=\"356\" srcset=\"https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-01-at-9.28.27-AM.png 284w, https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-01-at-9.28.27-AM-150x188.png 150w\" sizes=\"(max-width: 284px) 100vw, 284px\" \/><\/a><figcaption id=\"caption-attachment-492\" class=\"wp-caption-text\">Create a publicly accessible file with your Google Analytics code and add it as an external resource to your JSFiddles.<\/figcaption><\/figure>\n<\/li>\n<li>Click <em>Update<\/em>\u00a0to save \u00a0this version of your JSFiddle.<\/li>\n<li>Click the\u00a0<em>Set as base<\/em> button to save this as the public version of your JSFiddle.<br \/>\n<figure id=\"attachment_493\" aria-describedby=\"caption-attachment-493\" style=\"width: 413px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-01-at-9.28.50-AM.png\" rel=\"attachment wp-att-493\" data-lasso-id=\"250\" data-rel=\"lightbox-gallery-VbTOEHWb\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img decoding=\"async\" class=\"size-full wp-image-493\" src=\"https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-01-at-9.28.50-AM.png\" alt=\"Google Analytics Tracking for JS Fiddle - Save your work\" width=\"413\" height=\"77\" srcset=\"https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-01-at-9.28.50-AM.png 413w, https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-01-at-9.28.50-AM-150x28.png 150w\" sizes=\"(max-width: 413px) 100vw, 413px\" \/><\/a><figcaption id=\"caption-attachment-493\" class=\"wp-caption-text\">After adding your Google Analytics tracking code as an external resource, click update and Save as base to lock in your changes.<\/figcaption><\/figure>\n<\/li>\n<li>Open Google Analytics and watch all of the traffic come rolling in!!!<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>","protected":false},"excerpt":{"rendered":"<p>If you&#8217;ve use JSFiddle, you already know how awesome it is. \u00a0It&#8217;s an elegant way to share code [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":492,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"wprm-recipe-roundup-name":"","wprm-recipe-roundup-description":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[50,12,5],"tags":[],"class_list":["post-491","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-analytics","category-javascript-jquery","category-website-development"],"jetpack_featured_media_url":"https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-01-at-9.28.27-AM.png","jetpack_shortlink":"https:\/\/wp.me\/p4BbcR-7V","jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/posts\/491","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/comments?post=491"}],"version-history":[{"count":2,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/posts\/491\/revisions"}],"predecessor-version":[{"id":496,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/posts\/491\/revisions\/496"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/media\/492"}],"wp:attachment":[{"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/media?parent=491"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/categories?post=491"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/tags?post=491"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}