关于前端:SAP-Emarsys-和-SAP-Spartacus-的集成

27次阅读

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

要将 WebExtend Scripts for Emarsys 集成到 SAP Spartacus 中，能够依照以下步骤操作：

在 Spartacus 我的项目的根目录中创立一个名为“emarsys”（或其余名称）的新文件夹，而后将 Emarsys WebExtend 脚本文件（例如 12345.js）放入该文件夹中。
在 Spartacus 我的项目的“index.html”文件中增加以下代码，以在页面底部引入 Emarsys 脚本文件：

<script src="./emarsys/12345.js" type="text/javascript"></script>

请确保将门路“./emarsys/12345.js”替换为您理论存储 Emarsys WebExtend 脚本文件的门路和文件名。

在 Spartacus 我的项目的“app.module.ts”文件中导入“BrowserTransferStateModule”，并将其增加到 @NgModule 注解的 imports 数组中，如下所示：

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

@NgModule({declarations: [AppComponent],
  imports: [BrowserModule, BrowserTransferStateModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

在 Spartacus 我的项目的“app.server.module.ts”文件中，将“BrowserTransferStateModule”增加到 NgModule 注解的 imports 数组中，如下所示：

import {NgModule} from '@angular/core';
import {ServerModule, ServerTransferStateModule} from '@angular/platform-server';
import {AppModule} from './app.module';
import {AppComponent} from './app.component';

@NgModule({imports: [AppModule, ServerModule, ServerTransferStateModule],
  bootstrap: [AppComponent],
})
export class AppServerModule {}

在 Spartacus 我的项目的“app.component.ts”文件中，增加以下代码以向 Emarsys 发送自定义事件：

import {Component, OnInit} from '@angular/core';
declare var emarsys: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {ngOnInit() {
    // 发送自定义事件
    emarsys.push({event: 'Custom Event'});
  }
}

请确保将“Custom Event”替换为您要发送的理论事件名称。

实现这些步骤后，您就能够将 Emarsys WebExtend 脚本集成到 SAP Spartacus 中，并通过发送自定义事件来跟踪用户行为。请留神，您须要将代码适当地批改和调整，以便与您本人的 Emarsys 帐户进行正确的集成。

Angular 中的 BrowserTransferStateModule 模块是 Angular 提供的一个用于在客户端和服务器端之间传输数据的模块。该模块提供了一个 TransferState 服务，用于在服务器端生成的响应中捕捉数据，而后在客户端渲染应用程序时将该数据传输到浏览器。

在传统的客户端应用程序中，浏览器会首先向服务器发出请求，而后服务器会返回 HTML 响应。在 Angular 应用程序中，应用程序通常在浏览器中运行，但也能够在服务器上预渲染局部或全副应用程序。在这种状况下，服务器会生成 HTML 响应，而后将其发送回浏览器，这样浏览器就不用再向服务器发出请求了。

BrowserTransferStateModule 模块的作用是在服务器端生成响应时，将响应中的数据存储在 TransferState 服务中。而后，当应用程序在浏览器中运行时，该服务会将数据从 TransferState 服务中读取并注入到应用程序中，以便应用程序能够立刻应用该数据，而不用期待服务器返回数据。

这种形式能够进步应用程序的性能和响应速度，因为它能够缩小服务器申请的数量，并在客户端渲染应用程序时立刻提供所需的数据。同时，因为数据曾经在服务器端生成并存储在 TransferState 服务中，所以不用放心客户端和服务器端之间的同步问题。

正文完