Vaadin 应用程序内的 pendo 或类似服务

Question

人们如何在 Vaadin 7 应用程序中使用 pendo？根据我目前的 pendo 知识，我知道需要完成以下事情：

在每个页面上嵌入 pendo JavaScript 片段。因此，由于大多数 Vaadin 应用程序都是单页应用程序，我想这个代码片段需要加载到 UI，可能使用 Page.getCurrent().getJavaScript().execute 或 JavaScript.getCurrent().execute。我认为还有一个 @JavaScript 注释，但我已经尝试了几次但无法使其工作（请参阅 here and 以了解我无法使其工作的一个地方）。
通过调用 pendo.initialize({...}); 初始化 pendo。我想这需要在通过 JavaScript.getCurrent().execute 登录到我的应用程序（此时有用户 ID）后完成，但不完全确定在哪里执行此操作。此外，根据 Pendo 的说法，它需要在每次 windows 重新加载时完成。我想我可以在 UI class 中执行此操作，只有在登录完成后才会发生。但是在视图之间切换时我是否也需要这样做？严格来说，这不是重新加载，所以不确定。

基本上，我认为有人在 Vaadin 应用程序中使用过 Pendo，因此正在寻找我能得到的任何建议，尤其是未包含在 pendo 文档中的建议。

Answer 1

我没有直接使用 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 );
                                }
                            }
                        }
                    }
                } );
            }
        } );
    }

要添加到 header 的脚本基于通过构造函数实现的自定义 servlet

使用带有 @Configuration

@Configuration
public class VaadinConfig {

    @Bean
    public VaadinServlet getVaadinServlet () {
        return new CustomServlet ( new String [] { "The actual WalkMeScript" } );
    }


}

为了让 WalkMe 知道它在哪个页面以及接下来要突出显示哪个项目，我们在每个相关的 Vaadin 组件上引入了 id，然后在 WalkMe 脚本中使用这些 id

P.S。值得一提的是，我们使用的是 Spring Boot，因此根据您的堆栈，如何注册 Servlet 可能因您而异

Answer 2

这是我最后做的事情：

基于这是一个单页应用程序这一事实，我遵循了说明 here and here，并在我的资源目录中创建了一个 pendo.js 脚本。这个脚本只有第一个 link 的“片段的第 1 部分”，显然我去掉了 <script> 和 </script>，因为我把它单独放在一个文件中。
在我的 UI class 中，我添加了 @com.vaadin.annotations.JavaScript("pendo.js")
登录后，我运行 JavaScript.getCurrent().execute(pendoInitialization);，其中“pendoInitialization”是上面第一个 link 中要求的访问者和帐户信息，在我的例子中是 pendo.initialize({visitor: {id: 'VDR_JCARROS'}, account: {id: 'VEEDER'}});.

这似乎很有效。

Vaadin 应用程序内的 pendo 或类似服务

pendo or similar service inside Vaadin app

javascript

vaadin

vaadin7