Door
Brecht S
op 27-10-2016 22:15
gewijzigd op 27-10-2016 22:52
5.249 views
Ik ben aan het uitzoeken hoe ik iets gelijkaardig kan maken aan het trackingscript van google analytics. Deze werken met een javascript code om gegevens te verzenden zonder ajax.
Met wat opzoekwerk vond ik dit:
<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>
De alert geeft alles mooi weer.
Nu ben ik nog op zoek naar hoe ik die parameters naar de url opgegeven in statsPage kan verzenden. Ik heb hier geen idee en kan dit ook nergens terugvinden precies. Misschien is er een betere methode om dit te doen ook. Ik luister naar jullie...
Ik vond wel deze, maar weet niet of dit gaat werken:
Als ik analytics script bekijk ziet dit er totaal anders uit, maar ik versta daar niet zoveel van. Misschien kan iemand mij dit even uitleggen?
Een voorbeeld:
De bedoeling zou uiteindelijk zijn dat iedereen dat javascript op zijn pagina kan plakken en ik in de backend alles mooi kan opvangen. Vandaar wou ik niet met AJAX werken en ook niet met een REST API. Daar kan niet iedereen mee overweg.
Voor mijn script (eerst geposte) heb ik ook jquery nodig en voor de analytics.js script niet blijkbaar. In mijn geval moet ook iedereen het jquery script (<script src="https://code.jquery.com/jquery-1.12.4.js"></script>) boven de code gaan zetten. Misschien is dit ook te omslachting?
Wat meestal gewoon wordt gedaan is gebruik maken van een "meetpixel", dus een image van 1x1 die feitelijk een php script is. Deze kun je gewoon met javascript invoegen, en als je aan iets minder gegevens genoeg hebt kan het zelfs zonder javascript.
Overigens heb je strict genomen jquery nooit *nodig*. De cross browser zaken moet je dan alleen wel even zelf doen. In het geval van het invoegen van een plaatje hoef je niets bijzonders te doen. Zie document.createElement, of zonder fysieke image een Image object.
Dat is inderdaad wat dat ook doet, maar dat vereist geen jquery als je het gewoon met platte JS oplost.
De params stuur je mee door uit te gaan van een image als http://www.example.com/analytics.php?referer=...&page=... etc. Dat wordt hier ook gedaan, zie de params variabele.
Wat ik dan niet kan doen is die params in een array gaan verzamelen en die automatisch laten toevoegen zoals het nu is met die jquery param? Dus ik moet wel degelijk alles in de URL gaan zetten zodat ik dat er achteraf terug kan uithalen met $_GET?
Om het op die manier te kunnen doen wel ja. Uiteraard zijn er andere mogelijkheden zoals een XHR POST, maar je geeft aan dat je dat niet wilt. Voor de goede orde: je hebt natuurlijk je javascript bestand op jouw server, en deze wordt aangeroepen door de website via een script resource. Je bent daarbij dus vrij om te gebruiken wat je wilt. Voor de betrouwbaarheid zou ik alleen wel snel voor een image gaan, ook om de vertraging voor de website zelf minimaal te houden.
Dus in feite moet je een script gaan ontwerpen die voldoet aan je eisen. Meestal zal gewoon een simple <script src="analytics.js"> genoeg zijn, zonder verdere functiekoppelingen. Maar nogmaals: het is maar net wat je wilt, en hoe savvy je je gebruikers inschat.
En natuurlijk: het voorbeeld van Google is wat ondoorzichtig, maar dat is minified, mogelijk met webpack oid. Wat het doet is een script tag invoegen op de juiste plek in de html. De rest gebeurt in https://www.google-analytics.com/analytics.js.
Ik heb nog wat verder zitten graven en ben uiteindelijk tot een werkende code gekomen die je hieronder kan terugvinden:
<script type="text/javascript">
var statsPage = 'http://www.my-url.com/response.php';
var p = {
type: "pageview", //Type: pageview, form, ...
userid:1,
gender: "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>
Dat werkt helemaal zonder het gebruik van jquery.
Ik heb ook een functie geschreven voor mijn var p
<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>
Toevoeging:
Wat ik nu nog zou willen toevoegen is een tijd wanneer iemand de pagina verlaat. Hiervoor zou ik in de functie ca nog iets moeten kunnen toevoegen, hoe pak ik dit het best aan?
Ik had hier eerder al iets geschreven daaromtrent:
var startTime = new Date(); //Start the clock!
window.onbeforeunload = function() //When the user leaves the page(closes the window/tab, clicks a link)...
{
var endTime = new Date(); //Get the current time.
var timeSpent = (endTime - startTime); //Find out how long it's been.
var xmlhttp; //Make a variable for a new ajax request.
if (window.XMLHttpRequest) //If it's a decent browser...
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest(); //Open a new ajax request.
}
else //If it's a bad browser...
{
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //Open a different type of ajax call.
}
var url = "http://www.my-url.com/response.php?userID=1&pag_titel=1&datum=1&time="+timeSpent; //Send the time on the page to a php script of your choosing.
xmlhttp.open("GET",url,false); //The false at the end tells ajax to use a synchronous call which wont be severed by the user leaving.
xmlhttp.send(null); //Send the request and don't wait for a response.
}
Hoe krijg ik nu die 2 in elkaar?
[size=xsmall]Toevoeging op 29/10/2016 10:41:38:[/size]
Ik heb volgende script geschreven om te proberen maar de reponse komt altijd in het begin als ik de pagina de eerste keer ga herladen met F5, daarna niet meer. Dus de beforeunload functie werkt hier duidelijk niet. Als ik de browser tab sluit in Chrome krijg ik geen response.
window.onbeforeunload = function() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.digital-productions.be/dev/analytics/response.php?pag_titel=1', true);
// If specified, responseType must be empty string or "text"
xhr.responseType = 'test';
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE) {
alert(xhr.responseText);
}
}
xhr.send(null);
}
De eerst geschreven code met de functie gaat van zodra een pagina geladen is mij bepaalde parameters doorsturen. Dat zit goed, nu moet er bij het verlaten van de website ook een bepaald aantal parameters verstuurd worden. En dat was ik aan het proberen met de laatst geposte code.
Nu moet dit ook in pure javascript zonder jquery zoals ik mijn eerste code heb opgebouwd.