Google Analytics within jQuery Mobile
On a mobile web app we are working on we wanted to track every page view on the inside of the jQuery Mobile framework.
We ran into a bit of an issue doing that due to how pages are handled within jQuery Mobile. Page loads are not true hard reloads. Instead, they are dynamically inserted into the DOM. That’s a problem for the traditional Google Analytics tracking code.
in the root layout of the site we add GA tracking snippet
Then we created a new page_tracker.coffee file that is included in the head of the page:
fireTracker = () -> try hash = location.hash if hash _gaq.push(['_trackPageview', hash.substr(1)]); else _gaq.push(['_trackPageview', location.pathname]); catch err
Then, within the header we simply added this bit of code:
This only binds to the pageshow event for the document which prevents a buildup of DOM elements triggering the show event.