A Single Page Application is a website that loads all of the resources required to navigate the site on the first page load. When a user clicks a link the content is loaded from the first page load data. To the user, the website behaves as expected because the URL in the address bar is like the traditional page navigation.
Munchkin works well with traditional websites because Munchkin runs every single time the users load a new page. However, with a single page application if you are not loading a new page, Munchkin will run only once.
The approach I’ll walk through in this post is to track when a user clicks on a link, and then send this information to Munchkin. We’ll implement this using the clickLink Munchkin function. Below is an example implementation in jQuery that binds for click events to the clickLink Munchkin method. When calling the clickLink Munchkin method it passes the parameter for the URL that was clicked.
|
1 2 3 4 5 6 |
<script> $("a").on('click', function(event) { var urlThatWasClicked = $(this).attr('href'); Munchkin.munchkinFunction('clickLink', { href: urlThatWasClicked}); }); </script> |