Track custom events with google analytics

Requirements:

• You have an existing google analytics account
• You have a webpage to track events with

How:

Edit: If you’re on ES6 with webpack or similar, checkout this Github Gist instead.

1. You include google analytics in your page

(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", "//www.google-analytics.com/analytics.js", "ga");

// Replace UA-XXXXXXX-X with your google analytics user key
ga("create", "UA-XXXXXXX-X", "ntnu.no");

ga("send", "pageview");
ga("set", "anonymizeIp", true);

2. You set up custom tracking

var _gaq = _gaq || [];

// Replace UA-XXXXXXX-X with your google analytics user key
_gaq.push(["_setAccount", "UA-XXXXXXXX-X"]);

_gaq.push(["_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);
})();

3. You call the events when you want them tracked

function trackFrontpageOutboundLink(
  Category, Action, Value
) {
  _gaq.push([
    '_trackEvent',
    Category,
    Action,
    Value
  );
}

Category, Action, and Value are just labels that you are free to use as you please. Some structure is probably nice.