It is possible to collect additional metadata along with each event, such as payment amount or type when checkout is initiated or the transactionId, when checkout is completed.

To work with these more advanced features, I would recommend that you check out angulartics2, which can be found at https://www.npmjs.com/package/angulartics2. angulartics2 is a vendor-agnostic analytics library for Angular that can enable unique and granular event tracking needs using popular vendors, such as Google Tag Manager, Google Analytics, Adobe, Facebook, Baidu and more, as highlighted on the tool's homepage, shown here:

angulartics2 integrates with the Angular router and the UI-Router with the ability to implement custom rules and exceptions on route-per-route basis. The library makes it easy to implement custom events and enables metadata tracking with data binding. Check out the following example:

example
<div angulartics2On="click" angularticsEvent="DownloadClick" angularticsCategory="{{ song.name }}" [angularticsProperties]="{label: 'Fall Campaign'}"></div>

We can keep track of a click event named DownloadClick, which would have a category and a label attached to it for rich events tracking within Google Analytics.

With advanced analytics under your belt, you can use actual usage data to inform how you improve or host your app. This topic concludes a journey that started by creating pencil drawn mock ups at the beginning of this book, covering a wide-variety of tools, techniques, and technologies a full-stack web developer must be familiar with in today's web to succeed. We dove deep into Angular, Angular Material, Docker, and automation in general to make you the most productive developer you can be, delivering the highest quality web app, while juggling a lot of complexity along the way. Good luck out there!