jQuery Mobile + MVC 3 + Request.Path

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

这是我使用的代码。 （很像尼古拉斯）

如果它在 windows.location 中找到一个哈希 (#)，它会解析出哈希后的路径。
示例：http://www.mysite.com/about/#/contact, url='/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 与此 Using Google Analytics with jQuery Mobile blog 条目中的代码结合使用：

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