Search code examples
javascriptruby-on-railszurb-foundationzurb-joyride

How can I use Zurb Foundation's Joyride post_ride_callback, but only when the user completes the tour?


I am using Rails, and I have Joyride set up, and the callbacks work, but I want to adjust it so that it only executes the post_ride_callback when the user completes the tour, not when they cancel it in the middle. According to their docs, it seems like I should be able to determine which took place:

post_ride_callback     : function (){},    // A method to call once the tour closes (canceled or complete)

http://foundation.zurb.com/docs/components/joyride.html

This is what I have (which works) as of now in application.js:

$(document)
  .foundation({joyride: { 
    pre_ride_callback: function() {
      console.log('tour started');
      send_tour_start_event_to_ga();
    },
    post_ride_callback: function() {
      console.log('tour finished');
      send_tour_complete_event_to_ga();
    }
  }}
 )
.foundation('joyride', 'start');

I am using this to send events to Google Analytics, and I would like to be able to track what % of users that start the tour actually finish it. Any thoughts on how I can have post_ride_callback only run when the tour has been completed? It seems like this guy may be on to something: https://github.com/zurb/joyride/pull/119


Solution

  • Using Foundation 4.3.2 I faced the same problem. I wanted to load other web pages to show a new tour when the first tour was completed, but that would happen also when a user closes the tour.

    Basically what I did was adding a new class (closeJoyride) on templeate > Link in the foundation.joyride.js file, so we have the control of that action.

     template : { // HTML segments for tip layout
        link    : '<a href="#close" class="closeJoyride joyride-close-tip">&times;</a>',
    

    Then, you trigger a function when the user closes the tour:

    $( ".closeJoyride" ).click(function() {
       $(document).foundation('joyride', 'stop');
    });
    

    Now your post_ride_callback will just work when the tour is complete. I guess this will work also for Foundation 5.

    I hope I helped you.