Munchkin code for a Single Page Application website

Highlighted
Anonymous
Not applicable

Munchkin code for a Single Page Application website

Our company has launched a new website and community and we have the munchkin code on each page.

We have one section of our community where we have a Single Page Application with dynamic content, so if the user clicks on a link, the page does not reload, just the content in that section.

we would like to be able to track each link/load of the dynamic content for this page.

Has anyone experience something like this previously using the Munchkin code?

Thanks

Nick

1 REPLY 1
Highlighted
Level 10 - Community Moderator

Re: Munchkin code for a Single Page Application website

Munchkin will automatically detect hrefs that begin with # and ignore them.

If you want in-page clicks to be tracked, set the <a href> to, for example, "/current/page/#hash" and use JS to override the default action (you already are using JS-based navigation if you have a SPA, to be sure).  That's the easiest way to automatically track clicks on links that do not unload the page.

If you can't change the hrefs so they are automatically picked up, you can manually call

Munchkin.munchkinFunction('clickLink', { href:"/whatever/you/want/to/log" } )

when you start/finish loading dynamic content.

Note: it's more efficient to manually call munchkinFunction('visitWebPage') but if you want to show literal Clicked Link activities in Marketo, you will need to stick with clickLink. Alternately, you can switch clickLink to async mode.  The problem is then that you are guaranteed to lose hits when the lead does switch pages. My Munchkin Enhanced library can help a bit with that, though it is not a cure-all.