jQuery Mobile + MVC 3 +请求路径

Question

我正在尝试使用 jQuery Mobile + MVC 3 来运行一个新的移动网站。要求之一是安装 Google Analytics 并正确跟踪页面浏览量。我像平常一样插入了 GA 代码，但它似乎只跟踪主页，而不跟踪其他网站页面。经过一番审查后，我似乎需要将 GA javascript 代码分成两个单独的块。因此，在元素中，我有这样的：

<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>

然后，在结束标记之前我有这样的：

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

问题： @Model.RequestPath 始终返回“/”。我已经通过调试器看到该属性填充了适当的路径（即/somedirectory/somepage”），但是当它到达视图时，它只得到一个“/”。

重要信息：

• Model.RequestPath 配置为返回 Request.Url.AbsolutePath 的当前值。

• 更改操作方法 。将内部页面的 RequestPath 属性设置为常量没有效果，就像使用视图模型来填充页面（页面按预期呈现），但 RequestPath 属性似乎在某些时候被修改。对于调试器如何显示它填充了正确的路径，但在到达视图时输出“/”感到困惑。

• 我有两个页面：index.cshtml，这是主页，也是第一个提供的页面。其余的内部页面使用 SiteMaster.cshtml。它们都有相同的 GA 代码。

• 当我加载页面时，调试器会根据我的请求点击控制器操作（正如我所期望的那样），并且模型会填充正确的路径（但是视图仍然输出“/”）。

• 当我在 FireFox 中执行“查看源代码”时，调试器会再次触发，除了这次它点击主页的控制器操作。

• 我更改了 SiteMaster.cshtml 上的 GA 代码以调用“trackPageview1”，并更改了 index.cshtml 上的 GA 代码以调用“trackPageview2”，这样我就可以在查看源代码时看到正在调用哪个代码。它始终是 trackPageview2，这意味着它始终从 index.html 中提取，即使我位于使用 SiteMaster.cshtml 布局文件的页面上也是如此。这将有助于解释为什么 RequestPath 始终为“/”，但我仍然不明白为什么它不从主布局文件输出标记。

我确信这与 jQuery Mobile 以及它通过 AJAX 促进页面请求的方式有关，但我一直在试图弄清楚这一点。我想我会发帖看看这里是否有人可以提供帮助，同时我继续自己研究。

如果有必要，当答案出现或我找到更多信息时，我将用更多细节来澄清这篇文章。

Answer 1

这是我使用的代码。 （与 Nicholas 非常相似）

如果它在 windows.location 中找到哈希（#），它将解析出哈希后的路径。
示例： http://www.mysite.com/about/#/contact ，网址='/contact'

如果哈希值不存在，例如首次加载页面时，它将使用 windows.location.pathname 代替
示例： 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> 

Answer 2

您应该能够将 Google Analytics 代码直接放入母版中，无需进行任何修改。您将代码放在从母版继承的页面上是否有原因？ GA 将跟踪加载的不同页面，您所要做的就是将代码放在布局页面上。

Answer 3

如何将 location.href 与《使用 Google Analytics 与 jQuery Mobile》中的代码结合使用 博客条目：

<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>