add ga.

src/analytics.js

@@ -0,0 +1,22 @@
+window.trackEvent = function (category, action, label, value) {
+	if (window.ga) {
+		ga('send', 'event', category, action, label, value);
+	}
+}
+
+// if online, load after 2 seconds
+if (navigator.onLine) {
+	setTimeout(function() {
+		(function(i,s,o,g,r,a,m){
+			i['GoogleAnalyticsObject']=r;
+			i[r]=i[r]||function(){
+		(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+		m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+		})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+		ga('create', 'UA-87786708-1', {'cookieDomain': 'none'});
+		// required for chrome extension protocol
+		ga('set', 'checkProtocolTask', function(){ /* nothing */ });
+		ga('send', 'pageview');
+	}, 0);
+}

src/index.html

@@ -555,10 +555,10 @@
 
 		<script src="lib/split.js"></script>
 
+		<script src="analytics.js"></script>
 		<script src="deferred.js"></script>
 		<script src="loader.js"></script>
 		<script src="script.js"></script>
 		<script src="dropdown.js"></script>
-
 	</body>
 </html>

src/manifest.json

@@ -8,7 +8,7 @@
 		"storage",
 		"tabs"
 	],
-	"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
+	"content_security_policy": "script-src 'self' https://www.google-analytics.com 'unsafe-eval'; object-src 'self'",
 	"options_ui": {
 		"page": "options.html",
 		"chrome_style": true

src/script.js

@@ -115,6 +115,7 @@
 		document.body.classList.add('layout-' + mode);
 
 		resetSplitting();
+		trackEvent('ui', 'toggleLayout', mode);
 	}
 
 	function saveSetting(setting, value) {
@@ -171,6 +172,7 @@
 		chrome.storage.sync.set({
 			htmlMode: value
 		}, function () {});
+		trackEvent('ui', 'updateCodeMode', 'html', value);
 	}
 	function updateCssMode(value) {
 		cssMode = value;
@@ -181,6 +183,7 @@
 		chrome.storage.sync.set({
 			cssMode: value
 		}, function () {});
+		trackEvent('ui', 'updateCodeMode', 'css', value);
 	}
 	function updateJsMode(value) {
 		jsMode = value;
@@ -191,6 +194,7 @@
 		chrome.storage.sync.set({
 			jsMode: value
 		}, function () {});
+		trackEvent('ui', 'updateCodeMode', 'js', value);
 	}
 
 	// computeHtml, computeCss & computeJs evaluate the final code according
@@ -306,6 +310,7 @@
 			document.body.appendChild(a);
 			a.click();
 			a.remove();
+			trackEvent('fn', 'saveFileComplete');
 		});
 	}
 
@@ -355,6 +360,7 @@
 
 		helpBtn.addEventListener('click', function () {
 			helpModal.classList.toggle('is-modal-visible');
+			trackEvent('ui', 'helpButtonClick');
 			return false;
 		});
 
@@ -367,6 +373,7 @@
 					lastSeenVersion: version
 				}, function () {});
 			}
+			trackEvent('ui', 'notificationButtonClick');
 			return false;
 		});
 
@@ -389,10 +396,12 @@
 				.replace(/'/g, "'")
 			codepenForm.querySelector('input').value = json;
 			codepenForm.submit();
+			trackEvent('ui', 'openInCodepen');
 			e.preventDefault();
 		});
 
 		saveHtmlBtn.addEventListener('click', function () {
+			trackEvent('ui', 'saveHtmlClick');
 			saveFile();
 		});
 
@@ -418,6 +427,7 @@
 		window.addEventListener('keydown', function (event) {
 			if ((event.ctrlKey || event.metaKey) && (event.keyCode === 83)){
 				event.preventDefault();
+				trackEvent('ui', 'saveFileKeyboardShortcut');
 				saveFile();
 			}
 		});
@@ -442,6 +452,7 @@
 					url: 'chrome://extensions?options=' + chrome.i18n.getMessage('@@extension_id')
 				});
 			}
+			trackEvent('ui', 'settingsBtnClick');
 			return false;
 		});