使用Google Analytics跟踪AJAX请求

时间:2021-04-10 15:21:01

I'm changing a big section of a website to use jQuery Address' deep linking AJAX features. I'm using URIs like mysite.com/#!/page1/subpage/ and so on.

我正在改变网站的一大部分,以使用jQuery Address'深度链接AJAX功能。我正在使用像mysite.com/#!/page1/subpage/等URI。

I've read a good bit about tracking traffic with the _gaq.push() function, but I was wondering if it was possible to do it in a bit more traditional fashion...

我已经阅读了一些关于使用_gaq.push()函数跟踪流量的信息,但我想知道是否有可能以更传统的方式进行...

Each AJAX request calls a PHP function that builds a page and returns it in an <HTML> wrapper, which lets me easily define custom page titles and so on.

每个AJAX请求都调用一个PHP函数,该函数构建一个页面并将其返回到包装器中,这样我就可以轻松定义自定义页面标题等等。

If I put the analytics code on that page, will jQuery calling that page trigger it to track the visit?

如果我将分析代码放在该页面上,jQuery调用该页面会触发它来跟踪访问吗?

3 个解决方案

#1


15  

Well you can use jQuery's AJAX Events to globally listen for AJAX requests and then push an index onto the _gaq array (this seems like the most maintainable approach):

那么你可以使用jQuery的AJAX事件来全局监听AJAX请求,然后将索引推送到_gaq数组(这似乎是最易维护的方法):

$(document).on('ajaxComplete', function (event, request, settings) {
    _gaq.push(['_trackPageview', settings.url]);
});

Note that .on() is new in jQuery 1.7 and is the same as .bind() in this case.

请注意,.on()在jQuery 1.7中是新的,在这种情况下与.bind()相同。

Also note that I have not tested the contents of the arguments passed for global AJAX events.

另请注意,我还没有测试为全局AJAX事件传递的参数的内容。

UPDATE

UPDATE

You can also use $.globalEval() to parse scripts loaded in an AJAX response body: http://api.jquery.com/jquery.globalEval/

您还可以使用$ .globalEval()来解析在AJAX响应主体中加载的脚本:http://api.jquery.com/jquery.globalEval/

success: function(data) {

    var dom = $(data);

    dom.filter('script').each(function(){
        $.globalEval(this.text || this.textContent || this.innerHTML || '');
    });

    $('#mydiv').html(dom.find('#something').html());

}

Source: jQuery - script tags in the HTML are parsed out by jQuery and not executed

来源:jQuery - HTML中的脚本标记由jQuery解析而不执行

#2


5  

The other answers are outdated (as of 2013)- Google's recommends using their new Universal Analytics

其他答案已过时(截至2013年) - Google建议使用新的通用分析

You can track page views asynchronously like this:

您可以像这样异步跟踪页面视图:

ga('send', 'pageview', '/my-page');

See: https://developers.google.com/analytics/devguides/collection/analyticsjs/pages#overriding

请参阅:https://developers.google.com/analytics/devguides/collection/analyticsjs/pages#overriding

#3


2  

I use a system that involves requesting the html as plain text, parsing the html first to change all script tags into divs, detach those divs, append the page, then loop through the divs (that are actually scripts) and append their contents to script tags or create script tags with the src on that div. It is very similar to how the history.js framework example does it.

我使用的系统涉及将html作为纯文本请求,首先解析html以将所有脚本标签更改为div,分离这些div,附加页面,然后遍历div(实际上是脚本)并将其内容附加到脚本使用该div上的src标记或创建脚本标记。它与history.js框架示例的工作方式非常相似。

$.get(urlToLoad).promise().done(function(html) {
    var outHTML = html;
    outHTML = outHTML.replace(/<script/ig, "<div class='iscript'").replace(/<\/script/ig, '</script');
    outHTML = $(outHTML);
    var scripts = outHTML.filter('div.iscript').detach();
    $content.html(outHTML);
    scripts.each(function() {
      var $this = $(this), s = document.createElement("script");
      if ($this.attr('src') != "") {
        s.src = $this.attr('src');
      } else {
        s.nodeValue = $this.text();
      }
      $content[0].appendChild(s); // jquery's append removes script tags
    });
}).always(function() {
    $contentclone.replaceWith($content);
    $content.slideDown();
    $contentclone.remove();
});

using this method, you could add the script that does the tracking on each page. I personally prefer to do it on the global page in a way similar to how Jasper suggested.

使用此方法,您可以添加在每个页面上执行跟踪的脚本。我个人更喜欢在类似于Jasper建议的方式在全局页面上这样做。

#1


15  

Well you can use jQuery's AJAX Events to globally listen for AJAX requests and then push an index onto the _gaq array (this seems like the most maintainable approach):

那么你可以使用jQuery的AJAX事件来全局监听AJAX请求,然后将索引推送到_gaq数组(这似乎是最易维护的方法):

$(document).on('ajaxComplete', function (event, request, settings) {
    _gaq.push(['_trackPageview', settings.url]);
});

Note that .on() is new in jQuery 1.7 and is the same as .bind() in this case.

请注意,.on()在jQuery 1.7中是新的,在这种情况下与.bind()相同。

Also note that I have not tested the contents of the arguments passed for global AJAX events.

另请注意,我还没有测试为全局AJAX事件传递的参数的内容。

UPDATE

UPDATE

You can also use $.globalEval() to parse scripts loaded in an AJAX response body: http://api.jquery.com/jquery.globalEval/

您还可以使用$ .globalEval()来解析在AJAX响应主体中加载的脚本:http://api.jquery.com/jquery.globalEval/

success: function(data) {

    var dom = $(data);

    dom.filter('script').each(function(){
        $.globalEval(this.text || this.textContent || this.innerHTML || '');
    });

    $('#mydiv').html(dom.find('#something').html());

}

Source: jQuery - script tags in the HTML are parsed out by jQuery and not executed

来源:jQuery - HTML中的脚本标记由jQuery解析而不执行

#2


5  

The other answers are outdated (as of 2013)- Google's recommends using their new Universal Analytics

其他答案已过时(截至2013年) - Google建议使用新的通用分析

You can track page views asynchronously like this:

您可以像这样异步跟踪页面视图:

ga('send', 'pageview', '/my-page');

See: https://developers.google.com/analytics/devguides/collection/analyticsjs/pages#overriding

请参阅:https://developers.google.com/analytics/devguides/collection/analyticsjs/pages#overriding

#3


2  

I use a system that involves requesting the html as plain text, parsing the html first to change all script tags into divs, detach those divs, append the page, then loop through the divs (that are actually scripts) and append their contents to script tags or create script tags with the src on that div. It is very similar to how the history.js framework example does it.

我使用的系统涉及将html作为纯文本请求,首先解析html以将所有脚本标签更改为div,分离这些div,附加页面,然后遍历div(实际上是脚本)并将其内容附加到脚本使用该div上的src标记或创建脚本标记。它与history.js框架示例的工作方式非常相似。

$.get(urlToLoad).promise().done(function(html) {
    var outHTML = html;
    outHTML = outHTML.replace(/<script/ig, "<div class='iscript'").replace(/<\/script/ig, '</script');
    outHTML = $(outHTML);
    var scripts = outHTML.filter('div.iscript').detach();
    $content.html(outHTML);
    scripts.each(function() {
      var $this = $(this), s = document.createElement("script");
      if ($this.attr('src') != "") {
        s.src = $this.attr('src');
      } else {
        s.nodeValue = $this.text();
      }
      $content[0].appendChild(s); // jquery's append removes script tags
    });
}).always(function() {
    $contentclone.replaceWith($content);
    $content.slideDown();
    $contentclone.remove();
});

using this method, you could add the script that does the tracking on each page. I personally prefer to do it on the global page in a way similar to how Jasper suggested.

使用此方法,您可以添加在每个页面上执行跟踪的脚本。我个人更喜欢在类似于Jasper建议的方式在全局页面上这样做。