pendo or similar service inside Vaadin app

How do people use pendo inside a Vaadin 7 application? I know of the following things that need to be done, with my current pendo knowledge:

1. Embed pendo JavaScript snippet on every page. So, since most Vaadin apps are single page apps, I guess this snippet needs to be loaded in UI, maybe using Page.getCurrent().getJavaScript().execute or JavaScript.getCurrent().execute. I think there is also a @JavaScript annotation, but I have tried that a few times and could not get it to work (see here and here for one place where I could not get it to work).
2. Initialize pendo by calling pendo.initialize({…});. I guess this needs to be done after logging into my application (so have user id at this point) via JavaScript.getCurrent().execute, but not entirely sure where to do this. Also, according to Pendo, it needs to be done on every windows reload. I guess I could do this in my UI class, only occurring after login is complete. But do I also need to do it when going between views? That is not, strictly speaking, a reload, so just not sure.

Basically, I figure someone out there has used Pendo in a Vaadin application, so looking for any advice I can get, especially advice that is not included already in the pendo documentation.

Answer

Here is what I ended up doing:

1. Based on the fact that this is a single page app, I followed the directions here and here, and created a pendo.js script in my resources directory. This script only has the “Part 1 of Snippet” from the first link, and obviously I got rid of <script> and </script>, since I put it in a file by itself.
2. In my UI class, I added @com.vaadin.annotations.JavaScript("pendo.js")
3. After logging in, I run JavaScript.getCurrent().execute(pendoInitialization);, where “pendoInitialization” is visitor and account information as requested in the first link above, in my case something like pendo.initialize({visitor: {id: 'VDR_JCARROS'}, account: {id: 'VEEDER'}});.

This seems to work well.