programing

Google Analytics에서 AJAX에서 호출한 페이지를 추적하려면 어떻게 해야 합니까?

megabox 2023. 8. 17. 21:05
반응형

Google Analytics에서 AJAX에서 호출한 페이지를 추적하려면 어떻게 해야 합니까?

저는 AJAX를 사용하여 제 웹사이트의 페이지를 호출하고 있지만, 어떤 이유로 구글 애널리틱스는 페이지 방문을 등록하지 않고 있습니다.AJAX 트리거 페이지를 등록하도록 강제하기 위해 제가 무언가를 해야 합니까?

저는 다음과 같은 최신 범용 분석 코드를 사용하고 있습니다.

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXXXXX-1', 'mywebsite.ext');
  ga('send', 'pageview');

</script>

위의 스니펫이 포함된 페이지에 대한 JQuery AJAX 호출을 다음과 같이 사용하고 있습니다.

<script>
//<![CDATA[             
$(document).ready(function(){

        $.ajax({
                url : "http://www.mywebsite.ext",
                type: "GET",
                async: false,
                data : { fromajax : "y" },
                success: function(data, textStatus, jqXHR)
                {
                        // alert("success - Data: " + data + "\ntextStatus: " + textStatus);
                },
                error: function (jqXHR, textStatus, errorThrown)
                {
                        alert("error \ntextStatus: " + textStatus + "\nerrorThrown: " + errorThrown + "\njqXHR: " + jqXHR);
                }
        });

});
//]]>

데이터베이스에 기록하는 로깅 문이 있기 때문에 페이지가 호출되는 것이 확실합니다.실시간 개요를 사용하여 테스트하는 동안 Analytics 코드가 작동하고 있다는 것도 알고 있습니다.

요약하자면, AJAX를 사용하여 http://www.mywebsite.ext라는 페이지가 있는데, 대상 페이지(http://www.mywebsite.ext)에는 페이지를 추적하지 않는 일부 범용 분석 코드가 포함되어 있습니다.브라우저에서 정상적으로 페이지를 방문하면 페이지가 정상적으로 추적됩니다.

나는 그 이후 스레드에서 가상 폴더로 "가" 함수를 호출할 수 있다는 것을 발견했습니다.따라서 저는 AJAX 호출을 취소하고 대신 범용 분석 기능을 다음과 같이 수정했습니다.

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXXXX-1', 'mywebsite.ext');
ga('send', 'pageview', '/localfolder/page');
ga('send', 'pageview');

</script>

제가 지금 가지고 있는 문제는 ga('send', 'pageview', '/localfolder/page')를 호출하지만 ga('send', 'pageview')는 호출하지 않는다는 것입니다.

하지만 이벤트 사이에는 최소한의 간격이 있는 것으로 알고 있습니다.Google Analytics 이벤트 추적 - 이벤트 간 최소 간격

따라서 setTimeout(function(){},2000)을 추가했습니다. 이벤트와 마지막 이벤트 사이에는 여전히 호출되지 않습니다.심지어 9초까지 올라갔어요.

Google Analytics를 로드하기 위한 기존 표준은 비동기 방식이었습니다.

var _gaq=[["_setAccount","UA-#######-#"],["_trackPageview"]];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
s.parentNode.insertBefore(g,s)}(document,"script"));

이 비트는 초기 페이지 로드를 추적하지만 이후 AJAX 호출은 추적하지 않습니다.페이지 로드를 추적할 때마다 다음 스니펫을 추가합니다.

// "_trackEvent" is the pageview event, 
_gaq.push(['_trackPageview', '/some-page']);

_trackPageview가 다시 사용되지만 이번에는 로드된 AJAX 주소의 URL을 제공합니다.위의 작은 JavaScript 스니펫을 사용하면 전체 페이지를 다시 로드할 때와 마찬가지로 페이지 뷰를 추적할 수 있습니다.이 스니펫을 MoTools의 History 플러그인과 함께 사용하는 것을 추천합니다.

Ajax와 결합된 코드는 다음과 유사해야 합니다.

jQuery(document).ajaxComplete(function(e, xhr, settings){
  var d = document.location.pathname + document.location.search + document.location.hash;
  _gaq.push(['_trackPageview', d]);
});

범용 분석 코드를 사용하려면 가상 페이지 로드에 대한 구문이 다릅니다.

UA에서 가상 페이지 뷰를 추적하기 위한 구문은 다음과 같습니다.

ga(‘send’, ‘pageview’, ‘path to your virtual page’);

예:

<a href=”http://www.example.com/gu/dw/seo-beginners-guide.pdf” onClick=”ga(‘send’, ‘pageview’, ‘/virtual/guides/download/seo-beginners-guide.pdf’);”> Download SEO Beginners Guide</a> 

따라서 사용자가 'Download SEO Beginters Guide' 링크를 클릭하면 UA는 '/virtual/guides/download/seo-beginners-guide.pdf'라는 가상 페이지 뷰를 생성합니다.

출처:
http://davidwalsh.name/ajax-analytics
https://stackoverflow.com/a/7762559/3582159
http://www.optimizesmart.com/event-tracking-guide-google-analytics-simplified-version/

이 답변은 새 GA 스니펫 전용입니다.

업데이트된 답변은 저에게 적합하지 않았습니다. 여기 저에게 적합한 이 답변의 약간 수정된 버전이 있습니다.

if ("ga" in window) {
    tracker = ga.getAll()[0];
    if (tracker) {
        tracker.set("page", '/some-page');
        tracker.send("pageview");
    }
}

AJAX 요청이 끝날 때만 수행합니다.

gtag('config', 'GA_MEASUREMENT_ID', {'page_path': '/new-page.html'});

출처: https://developers.google.com/analytics/devguides/collection/gtagjs/single-page-applications

Ajax를 받는 사람들이 Javascript를 예상하거나 처리하지 않아서 문제가 있을 수 있습니다.

Google은 다음 프로토콜을 해결책으로 제공합니다.

POST/collect HTTP/1.1 호스트: www.google-analytics.com

payload_data

자세한 내용은 다음과 같습니다.

https://developers.google.com/analytics/devguides/collection/protocol/v1/devguide#proxy-server-tracking

스크립트 언어를 사용하여 POST 또는 GET 메서드를 사용해야 합니다.만약 당신이 답과 해결책을 생각해 낸다면, 저에게 알려주세요!저는 이 일을 성공시키기 위해 최선을 다하고 있습니다.

HTML

<a class="ajax-load" href="home.html" >Home</a>

자바스크립트

jQuery(document).ready(function($) {
    $(".ajax-load").click(function(event) {
        event.preventDefault();
        var href = $(this).attr("href");
        $.ajax({
            url: href,
            type: 'post',
            dataType: 'html',

        })
        .done(function(response) {
            $(".somediv").html(response);
            // now send page view
            ga('send','pageview','/virtual/....');
        })
        .fail(function() {
            // show error dialog
        })
    });
});

언급URL : https://stackoverflow.com/questions/24199037/how-do-i-get-google-analytics-to-track-pages-called-by-ajax

반응형