jQuery Mobile + MVC 3 + Request.Path

I'm attempting to use jQuery Mobile + MVC 3 to run a new mobile site. One of the requirements is that Google Analytics be installed and tracking page views properly. I inserted GA code as I normally would, but it appears to be tracking only the home page and none of the other site pages. After some review, it appears I need to split up the GA javascript code into two separate blocks. So, in the element, I have this:

<script type="text/javascript">
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'xx-xxxxxx-x']);
        (function () {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.开发者_开发技巧google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();
  </script>

Then, just before the closing tag I have this:

<script type="text/javascript">
    $('[data-role=page]').live('pageshow', function (event, ui) {
        try {
            _gaq.push(['_trackPageview', '@Model.RequestPath']);
        } catch (err) { }
    });
</script>

The problem: @Model.RequestPath ALWAYS returns "/". I've stepped through the debugger and seen that the property is populated with the appropriate path (i.e. /somedirectory/somepage"), but when it hits the view, it just gets a "/".

Important Info:

• Model.RequestPath is configured to return the current value of Request.Url.AbsolutePath.

• Changing the action method of an interior page to set the RequestPath property to something constant has no effect. It's like it's using the view model to populate the page (the page renders as expected) but the RequestPath property seems to be getting modified at some point. I'm confused as to how the debugger shows that it's populated with the correct path, but then outputs "/" when it gets to the view.

• I have two pages: index.cshtml which is the home page and is the first page served. The rest of the interior pages use SiteMaster.cshtml. They both have identical GA code.

• When I load the page, the debugger hits the controller action for my request (as I'd expect) and the model is populated with the correct path (however the view still outputs a "/").

• When I do a "View Source" in FireFox the debugger fires again except this time it's hitting the controller action for my home page.

• I changed the GA code on SiteMaster.cshtml to call "trackPageview1" and on index.cshtml to call "trackPageview2" just so I can see when doing a view source which one is being called. It's ALWAYS trackPageview2, which means that its always pulling from index.html, even when I'm on a page that uses the SiteMaster.cshtml layout file. This would help to explain why the RequestPath is always "/" but I still don't understand why it's not outputting the markup from the master layout file instead.

I'm positive this has something to do with jQuery Mobile and the way it facilitates page requests via AJAX but I'm stuck trying to figure this out. Thought I'd post and see if anyone here can help while I continue to research on my own.

I'll clarify this post with more details if necessary as answers come in or as I find more information.

---

This is the code that I use. (Very similiar to Nicholas)

If it finds a hash(#) in windows.location, it parses out the path after the hash.
Example: http://www.mysite.com/about/#/contact , url='/contact'

If the hash is not present, like when a page is first loaded, it uses windows.location.pathname instead Example: http://www.mysite.com/about , url='/about'

<script type="text/javascript">
$('[data-role=page]').live('pageshow', function(event, ui) {
    var url = window.location.toString();
    var hashLocation = url.indexOf("#");
    if (hashLocation != -1) {
        url = url.substring(hashLocation + 1);
    }
    else {
        url = window.location.pathname.toString();
    }

    try {
        var pageTracker = _gat._getTracker("UA-XXXXXXX-XX");    
        pageTracker._trackPageview(url);
    } catch (err) { }
});           
</script> 

---

You should be able to just drop Google Analytics code in the master without any modifications. Is there a reason you are putting the code on pages that inherit from the master? GA will track the different pages that load, all you have to do is drop the code on the layout page.

---

How about using location.href in conjunction with the code from this Using Google Analytics with jQuery Mobile blog entry:

<script type="text/javascript">
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>


<script type="text/javascript">
    $('[data-role=page]').live('pageshow', function (event, ui) {
        try {
            var pageTracker = _gat._getTracker("YOUR_GA_ID");
            pageTracker._trackPageview(location.href.replace('#', ''));
        } catch(err) {

        }
    });
</script>