Product Analytics using Amplitude in Angular

Amplitude is a product analytics service that helps the organization understand user behavior in your applications. We would be specifically talking about how to implement this tool into Angular application.

In the context of Angular, Amplitude is integrated by adding its tracking code to the application and then using it to track specific events. Amplitude specifies using Browser SDK for the same. If you are using earlier versions of Angular like Angular 11/12, then Browser SDK might not work for you. I tested this on version 14, and it worked fine. For earlier version you might have to use Javascript version, which would also help in tracking the events. the documentation for Javascript version is here. But do remember that this is a maintenance SDK and would be deprecated soon.

For our article purposes, we are using Angular 14 to demonstrate the below code. All version above 14 should just work fine.
Starting version 1.9.1, Browser SDK now tracks default events. Browser SDK can be configured to track the following events automatically:

Attribution
Page views
Sessions
Form interactions
File downloads

Please note: As per the website, form interactions include anything inside a <form> or <input> will be tracked by default. If you are using material ui or some other libraries, then your events might not be tracked.

Below are the steps needed to plug Amplitude analytics tool into Angular:
1. Install Amplitude
2. Create AmplitudeService using connectionId(Token_key).
3. Create models/ interfaces to structure the code better(Optional).
4. Add event at places where you need to track analytics.
5. Test whether Amplitude is working by testing in the Amplitude analytics tools account.

Detailed steps for implementation:

1. Install npm using :-

npm install @amplitude/analytics-browser

Refer this documentation for further code examples:

2. Write AmplitudeService as follows:

// amplitude.service.ts
import { Injectable } from '@angular/core';
import * as amplitude from '@amplitude/analytics-browser';

@Injectable({
  providedIn: 'root',
})
export class AmplitudeService {
  initAmplitude() {
    amplitude.init('<AMPLITUDE_API_KEY>');
  }

  trackEvent(eventName: string, eventData?: any) {
    amplitude.track(eventName, eventData);
  }
}

2. Add Amplitude to the project as follows:-

// app.component.ts or main component file
import {AmplitudeService} from "./<path_to_folder>/amplitude.service";

//in your constructor, add below service
 constructor (private amplitudeService: AmplitudeService) {}

// Initialize Amplitude with your API key provided by PO
amplitudeService.initAmplitude();

4. Use the “trackEvent()“ in your component as follows:

//import the service component in any of the component which needs tracking
import {AmplitudeService} from "./<path_to_folder>/amplitude.service";

//track as below in any method like click() etc
this.amplitudeService.trackEvent('Test', { additionalData: 'some data' });

5. Run the application and verify whether this event is registered in the Amplitude Analytics tool.

This is how your first Amplitude event in the Amplitude account might look like(See how we reported “Test” event above which shows up in the account):

Amplitude account example with “Test” event logged in the event stream.

This was a brief overview of how to implement analytics tools like Amplitude in Angular.

Happy Coding!

If ever you face issues, let me know. I have extensive experience in resolving these issues and might help you solve yours!