关于前端:Google-Tag-Manager-GTM-和-Adobe-AEPL-在-SAP-Spartacus-中的应用

40次阅读

共计 2662 个字符，预计需要花费 7 分钟才能阅读完成。

Google Tag Manager (GTM) 和 Adobe Experience Platform Launch (AEPL) 都是风行的标签治理平台，它们能够在 SAP Spartacus 中用于治理网站上的各种标签，包含广告标签、剖析标签、社交媒体标签等等。上面介绍一下它们在 SAP Spartacus 中的利用：

GTM 是一个收费的标签治理平台，由 Google 提供。在 SAP Spartacus 中，您能够应用 GTM 来治理您的网站标签。GTM 具备易于应用的界面，使您可能轻松地增加、编辑和删除各种标签，例如 Google Analytics 标签、Facebook 像素标签、AdWords Remarketing 标签等等。此外，GTM 还提供了一些高级性能，例如事件跟踪、转化跟踪和自定义变量，能够帮忙您更好地了解网站的应用状况，以及进行优化和测试。

AEPL 是由 Adobe 开发的标签治理平台，它提供了一种可扩大的、面向开发者的形式来治理网站上的标签。在 SAP Spartacus 中，您能够应用 AEPL 来治理各种标签，例如 Adobe Analytics 标签、Adobe Target 标签、Adobe Audience Manager 标签等等。AEPL 具备易于应用的用户界面，同时也提供了弱小的 API 和插件，能够帮忙您更好地集成和治理您的标签。此外，AEPL 还提供了一些高级性能，例如自动化标签配置、实时数据收集和自定义事件触发器，能够帮忙您更好地理解网站上的用户行为，并进行优化和测试。

总之，GTM 和 AEPL 都是风行的标签治理平台，在 SAP Spartacus 中都能够用于治理网站上的各种标签。您能够依据本人的需要抉择其中一种或两种都应用，并通过它们更好地了解和优化您的网站。

对于 GTM 的一个具体例子：

(1) 您须要在 GTM 中创立一个新的标签，并将其配置为应用 Google Analytics。在这个标签中，您须要指定您的 Google Analytics 跟踪 ID，并抉择您想要跟踪的事件类型和指标。

(2) 在 SAP Spartacus 中，您须要将 GTM 代码增加到您的应用程序中。您能够在 Spartacus 应用程序的 index.html 文件中增加以下代码：

<!DOCTYPE html>
<html>
  <head>
    ...
  </head>
  <body>
    ...
    <!-- 将以下 GTM 代码增加到您的 index.html 文件中 -->
    <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 -->
    ...
  </body>
</html>

请留神，您须要将下面的代码中的“GTM-XXXXXXX”替换为您在 GTM 中创立的标签的 ID。

(3) 您须要在 SAP Spartacus 的 Angular 应用程序中增加一个 Google Analytics 服务，该服务将向 GTM 发送事件数据。您能够在 Angular 应用程序的 app.module.ts 文件中增加以下代码：

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserTransferStateModule} from '@angular/platform-browser';
import {AppComponent} from './app.component';

// 导入 Google Analytics 服务
import {GoogleAnalyticsService} from './services/google-analytics.service';

@NgModule({declarations: [AppComponent],
  imports: [BrowserModule.withServerTransition({ appId: 'serverApp'}),
    BrowserTransferStateModule,
  ],
  providers: [
    // 增加 Google Analytics 服务
    GoogleAnalyticsService,
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

请留神，您须要创立一个名为“GoogleAnalyticsService”的服务，该服务将发送事件数据到 GTM。您能够应用以下代码作为 GoogleAnalyticsService 服务的根底：

import {Injectable} from '@angular/core';
declare const gtag: Function;

@Injectable({providedIn: 'root',})
export class GoogleAnalyticsService {constructor() {}

  public emitEvent(eventCategory: string, eventAction: string, eventLabel: string = null, eventValue: number = null) {
    gtag('event', eventAction, {
      event_category: eventCategory,
      event_label: eventLabel,
      value: eventValue,
    });
  }
}

请留神，下面的代码中的“gtag”是您在 GTM 中创立的标签主动生成的全局函数。您须要在 GTM 中为该标签设置事件触发器，并将其与下面的 GoogleAnalyticsService 服务中的 emitEvent 办法关联起来。

正文完