Angular - Analytics Service Client

This is the ThiemeMeulenhoff Analytics (THAS) integration client, wrapped for usage in Angular projects.

• Install
• Import the client module
• Using the AnalyticsService
  • Sending custom events
• Using event directives

Install

Make sure you have setup your environment to use GitHub Packages for ThiemeMeulenhoff packages.

npm install @thiememeulenhoff/ng-analytics-service-client

Import the client module

Import the client module in your AppModule:

import { AnalyticsModule } from '@thiememeulenhoff/ng-analytics-service-client';

@NgModule({
  imports: [
    // ...
    AnalyticsModule.forRoot({
      token: 'MY_THAS_TOKEN_GOES_HERE',
      environment: 'test',
    }),
  ],
})
class AppModule {}

This will create a singleton service that is connected to the ThasClient instance, run with the specified configuration options.

Using the AnalyticsService

You can use the AnalyticsService to interact with the ThasClient. You can inject the service anywhere you would normally use other services.

Sending custom events

You can send any ThasEvent:

import {
  AnalyticsService,
  ThasActionEvent,
} from '@thiememeulenhoff/ng-analytics-service-client';

@Injectable()
class MyService {
  // Inject the service
  #analyticsService = inject(AnalyticsService);

  public sendNavigationEvent(): void {
    // Create any type of ThasEvent
    const event = new ThasNavigationEvent();

    // Send the event with the service
    this.#analyticsService.send(event);
  }
}

Using event directives

You can easily connect click events in your template code using these event directives.

<a href="https://awesome-tool.com" thasToolUse="awesome-tool">
  Open awesome tool
</a>

Supported directives are:

• thasAction
• thasMedia
• thasNavigation
• thasToolUse
• thasView