注意：此功能是在 Spartacus 库的 3.2 版中引入的。

Spartacus 标签管理系统 (TMS) 允许您设置标签管理器，并指定应将哪些 Spartacus 事件传递给配置的 TMS。 Spartacus 开箱即用地支持 Google 标签管理器 (GTM) 和 Adobe Experience Platform Launch (AEPL)，而其他标签管理器可以轻松插入。

Spartacus 支持并行运行多个标签管理器集成，您可以决定每个受支持的标签管理解决方案应收集哪些事件。

注意：要使用 Spartacus 标签管理系统，您还应该熟悉 TMS 所依赖的 Spartacus 事件服务。

标签管理器的使用意味着在 Spartacus 中实时执行第三方脚本。 这些脚本可能包含恶意负载。 因此，对于在 Spartacus 内执行第三方脚本可能导致的内容或副作用，SAP 不承担任何责任。 参与实施 Spartacus 店面标签管理器的开发团队应咨询业务利益相关者，以确认遵守当地隐私和安全法律，例如 GDPR。

有关第三方脚本安全风险的更多信息，请参阅 OWASP 备忘单系列中的第三方 JavaScript 管理备忘单。

Setup

如果您使用 Google 跟踪代码管理器，则可以通过 gtmId 配置属性提供 GTM ID。 Spartacus 运行由 GTM 提供的立即调用函数表达式 (IIFE)，并将 GTM 脚本“注入”到 DOM 中。

如果您正在使用 Adobe Experience Platform Launch，则可以通过 scriptUrl 配置属性提供脚本 URL，Spartacus 将使用此 URL 将脚本“注入”到 DOM 中。

如果您不提供任何配置属性，Spartacus 假定您希望控制“注入”脚本，在这种情况下，Spartacus 只是开始收集事件并填充数据层。

尽管不可能涵盖每个现有标签管理解决方案的设置说明，但在许多情况下，该过程需要您在 index.html 中指定某个 script 标签，该标签会加载和引导 TMS。 例如，以下是如何配置 GTM 的示例：

<!-- Google Tag Manager -->
<script>
  (function (w, d, s, l, i) {
    w[l] = w[l] || [];
    w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
    var f = d.getElementsByTagName(s)[0],
      j = d.createElement(s),
      dl = l != "dataLayer" ? "&l=" + l : "";
    j.async = true;
    j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
    f.parentNode.insertBefore(j, f);
  })(window, document, "script", "dataLayer", "GTM-XXXXXXX");
</script>
<!-- End Google Tag Manager -->

配置

• debug 是启用控制台日志的布尔值。 它应该只在开发模式下启用。
• dataLayerProperty 是一个字符串，用于命名数据层对象。 如果您不使用数据层的默认名称，则只需提供 dataLayerProperty。
• events 是一个 AbstractType<CxEvent>[] ，它列出了要收集并推送到数据层的所有事件类。
• collector 是一个 Type<TmsCollector>，并且是自定义收集器服务实现。
• gtmId 仅适用于 GTM。 当您提供 gtmId 时，Spartacus 会为您处理脚本“注入”和引导。
• scriptUrl 仅适用于 AEPL。 当您提供 scriptUrl 时，Spartacus 会为您处理脚本“注入”和引导。

要开始收集事件，您需要导入 BaseTmsModule.forRoot()，并提供配置。 或者，您可以导入 AepModule 或 GtmModule 以利用 Spartacus 中的默认配置。

例子：

import { NgModule } from '@angular/core';
import {
  CartAddEntrySuccessEvent,
  CartRemoveEntrySuccessEvent,
  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({
  imports: [
    ...,
    BaseTmsModule.forRoot(),
    GtmModule,
    AepModule,
    ...
  ],
  providers: [
    ...,
    provideConfig({
      tagManager: {
        gtm: {
          gtmId: 'GTM-XXXXXXX',
          events: [NavigationEvent, CartAddEntrySuccessEvent],
        },
        aep: {
          scriptUrl: '//assets.adobedtm.com/xxxxxxx/yyyyyyy/launch-zzzzzzz-development.min.js',
          events: [NavigationEvent, CartRemoveEntrySuccessEvent],
        },
      },
    } as TmsConfig),
  ],
})
export class AppModule {}

在此示例中，Spartacus 仅指示每个已配置的 TMS 解决方案应收集哪些事件。 在这种情况下，GTM 和 AEPL 都可以并行运行。

Customization

上一节中的示例使用默认配置与 GTM 和 AEPL 集成，并且只包含最少量的自定义配置。 但是，可以调整 Spartacus 与数据层以及事件的交互方式，如以下部分所述。

Events Payload

根据您使用的 TMS 客户端，对事件有效负载的要求可能会有很大差异。 Spartacus 中的默认事件负载旨在满足最典型用例的要求。 但是，如果默认设置不能满足您的需求，您可以通过几种不同的方式重新映射或调整有效负载，如以下部分所述。

您可以在 Spartacus 中创建自定义事件并重新映射数据以满足您的数据结构要求，只需注册一个新的事件源，如注册事件源中所述。

const eventSource = this.eventService.get(NavigationEvent).pipe(
  map((navigationEvent) =>
    createFrom(CustomNavigationEvent, {
      // the next lines are example logic, not necessarily the actual page name and type
      pageName: navigationEvent.context.id,
      pageType: navigationEvent.context.type,
    })
  )
);

eventService.register(CustomEvent, eventSource);

在上面的示例中，Spartacus NavigationEvent 被重新映射到 CustomNavigationEvent。