Aurelia Custom Attribute for registering events with Google Universal Analytics

analytics.ts

import {autoinject, bindable} from "aurelia-framework";

declare const ga: (
	command: "send",
	type: "event",
	category?: string,
	action?: string,
	label?: string,
) => void;

@autoinject
export class AnalyticsCustomAttribute {

	@bindable
	on = "click";

	@bindable({primaryProperty: true})
	event?: string;

	@bindable
	category?: string;

	@bindable
	label?: string;

	private listener: (event: Event) => void;

	constructor(private element: Element) {
		this.listener = this.onEvent.bind(this);
	}

	bind() {
		this.element.addEventListener(this.on, this.listener);
	}

	unbind() {
		this.element.removeEventListener(this.on, this.listener);
	}

	onEvent() {
		ga("send", "event", this.category, this.event, this.label);
		return true;
	}
}