Отслеживание скрипта как аналитика

Question

Я понимаю, что могу сделать что-то вроде скрипта Google analytics. Они работают с javascript для сбора данных и отправки их на заданный URL. Но я хочу, чтобы он обошелся без ajax или REST API.

Что я нашел до сих пор:

<script type="text/javascript"> 
var statsPage = 'http://www.uw-url.be/process.php'; 
var stats = { 
    page: location.href, 
    browser: 'ie', 
    ip: '127.0.0.1', 
    referral: 'google.com?search=test' 
}; 
var params = $.param(stats); 
alert(statsPage+'?'+params); 
</script> 

Предупредительного сообщение дает все, что нужно, но проблема в том, как я могу отправить эти данные в statsPage URL? Я нашел небольшое решение в Интернете для этого, но я не знаю, это нормально ... Может быть, есть лучшее решение для этого, но я не знаю ... Я слушаю вас, ребята!

$('<img>', { 
    src: statsPage + '?' + params 
}).appendTo('body').remove() 

Существует что-то еще ... Если я смотрю на Analytics JavaScript-код это всего другой сценарий. Может ли кто-нибудь объяснить мне, как это работает?

Пример здесь:

<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','https://www.google-analytics.com/analytics.js','ga'); 

    ga('create', 'UA-49578310-1', 'auto'); 
    ga('send', 'pageview'); 

</script> 

Смысл всего этого в том, что каждый может использовать это на своем веб-сайте. С API AJAX или REST невозможно просто интегрировать его. Никто не может работать с этим.

Для моего первого опубликованного скрипта я также использую jquery() для этого. Сценарий Google Analytics нет.

EDIT

У меня есть построить новый код на основе ответа от Peter G. Я не нужно JQuery для этого. Является ли этот код достаточно безопасным для использования? Я написал функцию для р вара:

function ca(c,o,n,t,e,t,u){return p={type:c,userid:o,gender:n}} 

ca("pageview", "1", "male"); 

Всего сценарием ниже:

<script type="text/javascript"> 
var statsPage = 'http://www.my-url.com/response.php'; 

function ca(c,o,n,t,e,t,u){return p={type:c,userid:o,gender:n}} 

ca("pageview", "1", "male"); 


var params = Object.keys(p).map(function(k) { 
    return encodeURIComponent(k) + '=' + encodeURIComponent(p[k]) 
}).join('&') 

const req = new XMLHttpRequest(); 
//req.addEventListener('load' /*callback after req is complete*/); 
req.open('GET', statsPage + '?' + params); 
req.send(); 

req.onreadystatechange = function() { 
    if (req.readyState == XMLHttpRequest.DONE) { 
     alert(req.responseText); 
    } 
} 
</script> 

Как вы можете видеть, я скрыл addEventListener здесь. В чем разница, чтобы использовать это с или без этого?

Answer 1

Некоторая проверка кода, используемого в Google Analytics (используйте unminifier, например http://unminify.com/ ... код слишком длинный, чтобы воспроизвести здесь) показывает, что большая часть кода связана с определением WHAT для отправки, а не как Отправь это. Вот интересная часть о том, как они посылают его:

// ... 
    wd = function(a, b, c) { 
     var d = O.XMLHttpRequest; 
     if (!d) return !1; 
     var e = new d; 
     if (!("withCredentials" in e)) return !1; 
     e.open("POST", a, !0); 
     e.withCredentials = !0; 
     e.setRequestHeader("Content-Type", "text/plain"); 
     e.onreadystatechange = function() { 
      4 == e.readyState && (c(), e = null) 
     }; 
     e.send(b); 
     return !0 
    }, 
    x = function(a, b, c) { 
     return O.navigator.sendBeacon ? O.navigator.sendBeacon(a, b) ? (c(), !0) : !1 : !1 
    }, 
// ... 

O является window объект. Они выполняют XMLHTTPRequest при загрузке страницы и используют функцию navigator.sendBeacon, когда страница закрыта. Если все, что вы хотите сделать, это отправить свои данные через Интернет, я бы предложил метод XMLHTTPRequest, так как navigator.sendBeacon предназначен для отправки данных на странице закрыть (поэтому страница не отстает при закрытии, вы не увидите различий по загрузка страницы). Если все, что вы хотите сделать, это отправить данные в виде запроса GET, вы можете сделать следующее (хотя вам следует рассмотреть возможность рефакторинга, чтобы вместо этого вы могли использовать запрос POST ...).

const req = new XMLHttpRequest(); 
req.addEventListener('load', /*callback after req is complete*/); 
req.open('GET', statsPage + '?' + params); 
req.send(); 

Обратите внимание, что вы на самом деле не нужен addEventListener обратного вызова, если вы не заботитесь о результате вызова. Read more about XMLHttpRequest() here.

Вы также можете столкнуться с проблемами CORS, если запрашиваемый вами URL-адрес отличается от того, с которым вы работаете, и используете обратные вызовы addEventHandler. Read more on that on this SO page вид, как это выходит за рамки этого вопроса.