注意：此功能是在 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 typepageName: navigationEvent.context.id,pageType: navigationEvent.context.type,}))
);eventService.register(CustomEvent, eventSource);

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

SAP Spartacus Tag Management System TMS 介绍相关推荐

选择 SAP Spartacus 作为 SAP Commerce Cloud Storefront 实现框架的五个理由
原文:Five Reasons to Move to a Project Spartacus JavaScript Storefront 如果您已经阅读了 SAP Commerce Cloud Pro ...
SAP Spartacus 的 CSS 架构
在 Angular 中,组件的 CSS 样式被封装进了自己的视图中,而不会影响到应用程序的其它部分. 通过在组件的元数据上设置视图封装模式,你可以分别控制每个组件的封装模式. 可选的封装模式一共有如下 ...
Jerry在2020 SAP全球技术大会的分享：SAP Spartacus技术介绍的文字版
这是Jerry 2020年的第86篇文章,也是汪子熙公众号总共第268篇原创文章. 这篇文章的视频版本如下: https://v.qq.com/x/page/b3212l6kqvg.html 这个分享 ...
SAP Field Service Management 和微信集成的案例分享和实现介绍
SAP FSM(Field Service Management), 属于SAP C/4HANA五朵云里的Service Cloud. 本文介绍笔者在工作中经历过的一个项目,包含 SAP Field ...
SAP Spartacus 的会话管理 Session Management
官网从一开始,Spartacus 就包含了客户端身份验证和用户身份验证. 尽管这对于 Web 应用程序来说并不常见,但对于 Spartacus 来说是必须的,因为后者需要使用 OCC API. 客户 ...
SAP Spartacus 中的依赖注入 Dependency Injection 介绍
先了解 Angular 中的依赖注入依赖项是指某个类执行其功能所需的服务或对象.依赖项注入(DI)是一种设计模式,在这种设计模式中,类会从外部源请求依赖项而不是让类自己来创建它们. Angular ...
SAP Spartacus 的 cx-page-layout selector 介绍 - PageLayoutComponent
在SAP Spartacus page的源代码里,能看到很多cx-page-layout的selector,如下图所示: 这些cx-page-layout不是Directive,而是Component ...
SAP Spartacus 里的 .release-it.json 文件
在 SAP Spartacus package.json 里有一个依赖叫做 release-it: 这个工具的链接:https://github.com/release-it/release-it 这 ...
SAP Spartacus PageLayoutComponent 如何知道自己应该显示哪些具体内容
我们以前介绍过,经过 SAP Spartacus 路由配置后的 routes 数组,其 route 数据结构的 Component 属性,清一色指向 generic 的 PageLayoutCompo ...

SAP Spartacus Tag Management System TMS 介绍

Setup

配置

Customization

Events Payload

SAP Spartacus Tag Management System TMS 介绍相关推荐

最新文章

热门文章