如何在 sap-spartacus 店面中捕获 TMS 自定义事件

Question

我目前正在为我的 spartacus 店面项目开发 TMS 自定义事件。

但我正在阅读文档，但我不了解如何创建自定义事件。

我已经创建了自己的收集器，并且工作正常。

我正在尝试基于 spartacus 库中现有的 ProductDetailsPageEvent 创建一个 CustomPdpEvent，但是当我访问产品页面时没有触发。

这是我的代码：

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));
  }
}

我在标签管理器的事件属性上注册了这个自定义事件：

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 {}

谁能帮我解决这个问题？谢谢你的时间。

Answer 1

如果你创建了一个新事件，你必须从某个地方发送：

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

更多信息，请查看文档：https://sap.github.io/spartacus-docs/event-service/#dispatching-individual-events

如何在 sap-spartacus 店面中捕获 TMS 自定义事件

How to capture TMS customized events in sap-spartacus storefront

tms

google-tag-manager

angular

spartacus-storefront