写点什么

SAP Emarsys 和 SAP Spartacus 的集成

作者:Jerry Wang
  • 2023-04-18
    四川
  • 本文字数:1512 字

    阅读完需:约 5 分钟

SAP Emarsys 和 SAP Spartacus 的集成

要将 WebExtend Scripts for Emarsys 集成到 SAP Spartacus 中,可以按照以下步骤操作:


  1. 在 Spartacus 项目的根目录中创建一个名为“emarsys”(或其他名称)的新文件夹,然后将 Emarsys WebExtend 脚本文件(例如 12345.js)放入该文件夹中。

  2. 在 Spartacus 项目的“index.html”文件中添加以下代码,以在页面底部引入 Emarsys 脚本文件:


<script src="./emarsys/12345.js" type="text/javascript"></script>
复制代码


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


  1. 在 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 {}
复制代码


  1. 在 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 服务中,所以不必担心客户端和服务器端之间的同步问题。

发布于: 刚刚阅读数: 4
用户头像

Jerry Wang

关注

🏆InfoQ写作平台-签约作者🏆 2017-12-03 加入

SAP成都研究院开发专家,SAP社区导师,SAP中国技术大使。2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今。工作中使用 ABAP, Java, JavaScript 和 TypeScript 进行开发。

评论

发布
暂无评论
SAP Emarsys 和 SAP Spartacus 的集成_SAP_Jerry Wang_InfoQ写作社区