I wrote this Aurelia custom attribute to listen for DOM events on any element and send custom event data to the Google Analytics API. It is pretty flexible and worked well for the app I needed it for, which had a limited scope. For larger apps, adding tracking code to every button and link may be a bit cumbersome: I’d recommend using an Aurelia Google Analytics plugin for that.

Here’s a simple use:

<button type= "button" analytics= "PrimarySalesButton" > Order now </button>

This will send {"action": "PrimarySalesButton"} to analytics when the button gives off a click event. A more complex example might look like this:

<form analytics= "on.bind: 'submit'; event.bind: 'ContactFormSubmitted'; category.bind: 'CustomerContact'; label.bind: 'Send your question'" > ... <input type= "submit" value= "Send your question" > </form>

This will send {"action": "ContactFormSubmitted", "category": "CustomerContact", "label": "Send your question"} when it receives a submit event from the form.

You can choose to include the attribute only in views that use it, but I found it easier to add it as a global resource.

P.S.: this is of course assuming that you’ve already initialized the Analytics tracking code before this is called. See the Google Analytics instructions for setting up tracking.