3rd party js libraries which need to run on every page.

[willfults]

I'm trying to display a js chat widget on my site from http://www.olark.com

I'm trying to use the turbolinks... document.addEventListener('page:change', function() {
function so that every time a user hits a new page, the code gets executed and displays the chat window. But it only displays after the first page load. After that, it doesn't work. I'm also experiencing a similar issue with a facebook recommend widget. To duplicate simply copy and paste this code into the bottom of your html page (using a partial so it displays on every page). Then navigate around your app, it only loads after the first page. Is this an issue with the olark plugin or am I doing something wrong?

Here is the code I am using - http://pastebin.com/KS6GNyNj

I am using gem version 1.0.0, Rails 3.2.11

I noticed that document.addEventListener('page:change', function() {
Gets executed twice on the second page load. Try something like
document.addEventListener('page:change', function() {
alert('hi')
});

Then when you hit the third page it runs 3 times, 4th page 4 times etc.

[willfults]

OK I found out that if you place this code in a js file
document.addEventListener('page:fetch', function() {
alert('fetched')
});

It runs once per page. But if you place the same code in a partial that gets displayed in the body (with a script tag), and then move around your site, it may run more than once per page load. Not sure if that part is a bug or a feature :) Still having issues with 3rd party libraries though.

[reed]

If you put that code (in your second comment) in the body, it's going to bind a new function to the page:fetch event on every page load. So, after the initial page load, if you visit two pages via turbolinks, your next page:fetch event will trigger three separate functions that call alert('fetched'). To guarantee the function only gets bound once, you should either move the code into the head, or bind the code to execute on page ready.

With regards to Olark, I'm not sure you're going to be able to get it working with turbolinks. I was only able to give it a quick look, but the script that it runs does a lot. It creates a handful of cookies, sets a JS timeout, adds a few scripts and stylesheets to the DOM, creates an iframe in the body, etc. Hacking it so that it can reinitialize on every page would be pretty messy. When I get a chance, I'll dig a little deeper and see if I can get it working. You may want to contact Olark's support team and see if they have any suggestions.

[willfults]

Thanks reednj77 appreciate the help. On a similar note regarding 3rd party js libraries, is google analytics compatible with turbolinks? I saw an open issue a while back - #26
But it seems like it got closed without any action. I'm going to be playing with google analytics today and see if I can get that working w/ turbolinks but if there are any suggestions on how to get that working I'm all ears.

[willfults]

Alright got google analytics working. All you need to do is include the google analytics code in a partial that is displayed on every page & also add this line of code in a js file....
document.addEventListener('page:change', function() { _gaq.push(['_trackPageview']) })

[willfults]

Found a solution - http://empact.posterous.com/running-olark-under-turbolinks

[reed]

Sweet, I'm glad you got it working. I was trying a similar solution, but I don't have an Olark account, so it was difficult for me to test it. I saw errors in the console and figured it was broken, but according to the post, it works despite those errors. Thanks for being proactive and sharing the solution you found with us. I'll be sure to include it in the compatibility readme that I'm working on.

[aawilson]

Hey guys. We (Olark) kind of have a minor bit of bandwidth for something like this, but since it's probably going to be a bigger issue when Turbolinks becomes part of mainline Rails, we'd love to work with you guys. The posterous link above is gone, but the All-Seeing Eye of Google seems to have caught it:

http://webcache.googleusercontent.com/search?num=20&site=&source=hp&q=cache%3Ahttp%3A%2F%2Fempact.posterous.com%2Frunning-olark-under-turbolinks&oq=cache%3Ahttp%3A%2F%2Fempact.posterous.com%2Frunning-olark-under-turbolinks&gs_l=hp.3...2482.2482.0.3024.1.1.0.0.0.0.185.185.0j1.1.0...0.0.0..1c.1.17.hp.4dcCj-7cPzs

Let us know if you're plugging around on this and need any specific questions answered about the things you run into.

[reed]

I summed up that article here:

http://reed.github.io/turbolinks-compatibility/olark.html

If there's anything you'd like me to add to it or change, let me know.

[Primigenus]

@aawilson I tried getting Olark working with (client-side) turbolinks. Here's the code I'm using: https://gist.github.com/Primigenus/5928718

On initial pageload (hard refresh with the browser), everything works. Clicking a link with turbolinks enabled works as well. However, after clicking the turbolink, I start getting lots of errors logged to the console from application.js. It doesn't appear to affect functionality of Olark itself, but I can't be sure, so I wanted to check. Either way, having a bunch of errors logged to the console isn't pretty, so it would be nice if we could work towards resolving that situation.

Here's an idea of what kind of errors are being logged:

Uncaught TypeError: Cannot read property 'theme' of undefined application.js:395
Uncaught TypeError: Cannot read property 'strict' of undefined application.js:17
Uncaught TypeError: Cannot read property 'theme' of undefined application.js:395
[framesocket] timed out while flushing to persistent storage application.js:344
#error - getDetails Cannot read property 'strict' of undefined application.js:1
Uncaught TypeError: Cannot read property 'allowEndConversation' of undefined application.js:150

[GriffinHeart]

@reed we're using your solution and works awesome the only small detail is that using the back button breaks olark. Been trying to fix that but haven't had any success.

I summed up that article here:

http://reed.github.io/turbolinks-compatibility/olark.html

If there's anything you'd like me to add to it or change, let me know.

[leods92]

After some tests I can assert that anyone implementing this must set location manually.
Do that by calling ga('send', 'pageview', { location: '...' }).
If you let GA script set it on its own it will set the first page browser loaded, the script caches that value.

I suggest you setting location as Google suggests here.

Here's the snippet pasted:

var location = window.location.protocol +
    '//' + window.location.hostname +
    window.location.pathname +
    window.location.search;

[mitosch]

Hi there

I saw this thread after trying to implement UserReport with turbolinks. Currently it is not possible to use it together.

So I thought about a generic solution:

• Create an iframe within your turbolinks app pointing to a special layout without turbolinks
• Put every third party application which doesn't support turbolinks or manual re-initialization into that iframe
• Everytime a turbolinks page load is triggered (i guess it is "page:load" or "page:change"?) send a real page-reload to the iframe

What do you think about this solution? Do you see some disadvantages?

I'll try that on my app and leave the feedback in here. I guess there are a lot of third party tools which only handles the "normal" page reloads and are therefore not compatible with turbolinks, so a generic solution could be useful.

Thanks for feedback.