如何解决Vaadin 应用程序中的 pendo 或类似服务
人们如何在 Vaadin 7 应用程序中使用 pendo?以我目前的 pendo 知识,我知道以下需要完成的事情:
- 在每个页面上嵌入 pendo JavaScript 片段。因此,由于大多数 Vaadin 应用程序都是单页应用程序,我猜这个片段需要在 UI 中加载,可能使用
Page.getCurrent().getJavaScript().execute
或JavaScript.getCurrent().execute
。我认为还有一个@JavaScript
注释,但我已经尝试了几次,但无法使其正常工作(请参阅 here 和 here 以了解我无法获得它的地方去工作)。 - 通过调用 pendo.initialize({...}); 来初始化 pendo。我想这需要在通过
JavaScript.getCurrent().execute
登录我的应用程序后完成(因此此时有用户 ID),但不完全确定在哪里执行此操作。此外,根据 Pendo 的说法,它需要在每次 Windows 重新加载时完成。我想我可以在我的 UI 类中做到这一点,只有在登录完成后才会发生。但是在视图之间切换时我也需要这样做吗?严格来说,这不是重新加载,所以不确定。
基本上,我发现有人在 Vaadin 应用程序中使用过 Pendo,所以寻找我能得到的任何建议,尤其是尚未包含在 pendo 文档中的建议。
解决方法
我没有直接使用 Pendo 的经验,但使用过名为 WalkMe (https://www.walkme.com/) 的类似产品。为了将其添加到页面中,我们执行了以下操作
- 创建
com.vaadin.server.VaadinServlet
的自定义实现 - 覆盖
com.vaadin.server.VaadinServlet#servletInitialized
,这里我们执行以下操作
@Override
public void servletInitialized () throws ServletException {
super.servletInitialized ();
getService ().addSessionInitListener ( new SessionInitListener () {
@Override
public void sessionInit ( SessionInitEvent event ) throws ServiceException {
event.getSession ().addBootstrapListener ( new BootstrapListener () {
@Override
public void modifyBootstrapFragment ( BootstrapFragmentResponse response ) {
}
@Override
public void modifyBootstrapPage ( BootstrapPageResponse response ) {
if ( scripts.length != 0 ) {
ArrayUtils.reverse ( scripts );
for ( String script: scripts ) {
if ( !script.isEmpty () ) {
response.getDocument ().head ().prependElement ( "script" ).attr ( "type","text/javascript" ).text ( script );
}
}
}
}
} );
}
} );
}
- 要添加到标头的脚本通过构造函数基于自定义 servlet 实现
- 使用@Configuration 注解的类将 CustomServlet 注册为 VaadinServlet 类型的 bean
@Configuration
public class VaadinConfig {
@Bean
public VaadinServlet getVaadinServlet () {
return new CustomServlet ( new String [] { "The actual WalkMeScript" } );
}
}
为了让 WalkMe 知道它在哪个页面上以及接下来要突出显示哪个项目,我们在每个相关的 Vaadin 组件上引入了 id,然后在 WalkMe 脚本中使用这些 id
附言值得一提的是,我们使用的是 Spring Boot,所以根据你的堆栈,如何注册 Servlet 可能会有所不同
,这是我最终做的:
- 基于这是一个单页应用这一事实,我遵循了 here 和 here 的指示,并在我的资源目录中创建了一个
pendo.js
脚本。这个脚本只有第一个链接中的“代码片段的第 1 部分”,显然我去掉了<script>
和</script>
,因为我把它单独放在了一个文件中。 - 在我的 UI 类中,我添加了
@com.vaadin.annotations.JavaScript("pendo.js")
- 登录后,我运行
JavaScript.getCurrent().execute(pendoInitialization);
,其中“pendoInitialization”是上面第一个链接中要求的访问者和帐户信息,在我的例子中类似于pendo.initialize({visitor: {id: 'VDR_JCARROS'},account: {id: 'VEEDER'}});
。
这似乎运作良好。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。