注意：此功能是在 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 介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。