How to capture TMS customized events in sap-spartacus storefront

Question

I'm currently developing an TMS custom events to my spartacus storefront project.

But I'm reading docs and I dont understanding how to create custom events.

I've created my own collector, and its working fine.

I'm trying to create a CustomPdpEvent, based on existing ProductDetailsPageEvent from spartacus lib, but is not firing when I access an product page.

Here is my code:

import { CxEvent, EventService } from '@spartacus/core';
import { ProductDetailsPageEvent } from '@spartacus/storefront';

export class CustomPdpEvent extends CxEvent {
  constructor(events: EventService) {
    super();

    const event$ = events.get(ProductDetailsPageEvent);
    event$.subscribe(event => console.log('CustomPdpEvent is fired: ' + event));
  }
}

And I was registered this custom event on Event property of tag manager:

import { NgModule } from '@angular/core';
import { CustomPdpEvent } from '@core/services';
import { CustomCollectorService } from '@core/services/tms-events/custom-collector-service';
import { environment } from '@env';
import { provideConfig } from '@spartacus/core';
import { NavigationEvent } from '@spartacus/storefront';
import { AepModule } from '@spartacus/tracking/tms/aep';
import { BaseTmsModule, TmsConfig } from '@spartacus/tracking/tms/core';
import { GtmModule } from '@spartacus/tracking/tms/gtm';

@NgModule({
  declarations: [],
  imports: [BaseTmsModule.forRoot(), GtmModule, AepModule],
  providers: [
    provideConfig({
      tagManager: {
        gtm: {
          gtmId: environment.gtmId,
          collector: CustomCollectorService,
          events: [NavigationEvent, CustomPdpEvent],
          debug: true
        }
      }
    } as TmsConfig),
    provideConfig({
      tagManager: {
        aep: {
          events: []
        }
      }
    } as TmsConfig)
  ]
})
export class TagManagementFeatureModule {}

Anyone can help me with that issue? Thanks for your time.

Answer 1

If you created a new event, you have to dispatch from somewhere:

this.eventService.dispatch({payload...}, CustomPdpEvent);

For more, please take a look at the docs: https://sap.github.io/spartacus-docs/event-service/#dispatching-individual-events