Tracking script zoals analytics
Met wat opzoekwerk vond ik dit:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<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>
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:
Code (php)
1
2
3
2
3
$('<img>', {
src: statsPage + '?' + params
}).appendTo('body').remove()
src: statsPage + '?' + params
}).appendTo('body').remove()
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:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<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>
(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>
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?
Gewijzigd op 27/10/2016 22:52:13 door Brecht S
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.
Gewijzigd op 27/10/2016 23:18:13 door Ben van Velzen
Code (php)
1
2
3
2
3
$('<img>', {
src: statsPage + '?' + params
}).appendTo('body').remove()
src: statsPage + '?' + params
}).appendTo('body').remove()
Ik zie niet direct hoe ik de params kan meesturen met mijn meetpixel zoals jij het hier voorstelt.
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.
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.
Gewijzigd op 27/10/2016 23:57:28 door Ben van Velzen
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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>
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
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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>
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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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.
}
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?
Toevoeging op 29/10/2016 10:41:38:
Heeft iemand een idee hier?
Gewijzigd op 28/10/2016 18:51:13 door Brecht S
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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);
}
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);
}
Nu moet dit ook in pure javascript zonder jquery zoals ik mijn eerste code heb opgebouwd.
Gewijzigd op 29/10/2016 18:13:23 door Brecht S
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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.
}
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.
}
Of ze betrouwbaar is weet ik niet, maar het werkt ondertussen al 3 jaar. Dus de functie onbeforeunload zit hier ook in, waarom is deze dan niet goed in mijn nieuwe code?
//When the user leaves the page(closes the window/tab, clicks a link)...
En dat is gewoonweg niet het gedrag van onbeforeunload. In oudere IE versies wel, nu mogelijk ook al niet meer.
onbeforeunload wordt aangeroepen als je op een link klikt of refresht. Wanneer onbeforeunload een resultaat geeft wordt een vraag gesteld of navigatie moet plaatvinden en wordt deze gebruikt voor de tekst in de navigatievraag.
Gewijzigd op 29/10/2016 19:07:18 door Ben van Velzen
Wat jij bedoeld is hier waarschijnlijk telkens een referrer mee te sturen ook? En op die manier te meten? Ik heb ook geen idee hoe dit aan te pakken eigenlijk... Maar wil dat wel eens proberen. Kan jij me hier even op weg helpen? En wat gaat er gebeuren als iemand een laatste pagina heeft bezocht en dan de browser tab sluit? Dan heb ik waarschijnlijk geen data hieromtrent?
Toevoeging op 29/10/2016 19:09:51:
Is er geen nieuwere manier om die onbeforeunload te laten werken? Of moet ik dit dan toch totaal vergeten? Vind dat raar aangezien dat nu bij mijn oudere websites wel werkt en alles mooi meekomt in de database.
Toevoeging op 29/10/2016 19:56:55:
Ik zie dat een script zoals google analytics gebruikt maakt van onderstaande:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
navigator.sendBeacon = navigator.sendBeacon || function () {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.my-url.com/response.php?pag_title=1');
xhr.send();
}
};
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.my-url.com/response.php?pag_title=1');
xhr.send();
}
};
Is dat iets interessants?
Ik vond ook deze: http://jasonzissman.com/timeme/index.html, dat toont toch duidelijk dat die onbeforeunload nog steeds werkt?
Gewijzigd op 29/10/2016 20:38:12 door Brecht S
Gewijzigd op 29/10/2016 23:25:06 door Ben van Velzen
Ben van Velzen op 27/10/2016 23:13:58:
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.
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.
Hallo Ben,
Dit lijkt mij interessant om meer te weten maar dan zonder javascript. Mag ik hier wat meer over weten
Gewijzigd op 30/10/2016 12:46:41 door johan de wit
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
navigator.sendBeacon = navigator.sendBeacon || function () {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.my-url.com/response.php?pag_title=1');
xhr.send();
}
};
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.my-url.com/response.php?pag_title=1');
xhr.send();
}
};
Ook hier krijg ik geen response terug. Misschien omdat er geen return in de functie is opgenomen? Enig idee hoe dit aan te pakken?
Voor de meetpixel: de vraag is hoe ik de tijd kan meten tussen de pagina's. Dat zie ik niet.
Gewijzigd op 31/10/2016 10:54:25 door Brecht S
Waar het op neerkomt is het volgende:
De meeste browsers negeren het gebruik van asynchrone XHR tijdens unload, maar navigator.sendBeacon niet. Deze moet je echter wel even zelf aanroepen tijdens unload.
Je huidige aanpak overschrijft de functie indien deze nog niet bestaat, deels correct.
Wat je wilt doen is het gedrag van navigator.sendBeacon emuleren wanneer deze niet bestaat, door een *synchrone* XHR request te doen, dus met de 3e parameter van xhr.open op false, en met directe doorgave van de data in de attributen zoals de request url niet hardcoded.
Wat je op de pagina op MDN zult terugzien is dat browserondersteuning voor sendBeacon beperkt is.
>> Voor de meetpixel: de vraag is hoe ik de tijd kan meten tussen de pagina's. Dat zie ik niet.
Niet? Trek de request tijd van de vorige en de huidige pagina van elkaar af. *boem* tijd die besteed is op de vorige pagina. Juist om die reden zet je per bezoek een cookie die een "sessie" representeert.
Gewijzigd op 31/10/2016 11:52:34 door Ben van Velzen
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
window.addEventListener('unload', logData, false);
function logData() {
navigator.sendBeacon = navigator.sendBeacon || function () {
var xhr = new XMLHttpRequest();
var endTime = new Date();
xhr.open('GET', 'http://www.my-url.com/response.php?endTime='+endTime, false);
xhr.send();
};
}
function logData() {
navigator.sendBeacon = navigator.sendBeacon || function () {
var xhr = new XMLHttpRequest();
var endTime = new Date();
xhr.open('GET', 'http://www.my-url.com/response.php?endTime='+endTime, false);
xhr.send();
};
}
Of is dit nog steeds niet juist? Hoe krijg ik hier een response terug in alert van mijn reponse.php file?
Ik heb deze geprobeerd toe te voegen aan mijn functie logData maar krijg niks terug:
Code (php)
1
2
3
4
5
2
3
4
5
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE) {
alert(xhr.responseText);
}
}
if (xhr.readyState == XMLHttpRequest.DONE) {
alert(xhr.responseText);
}
}
Wat bedoel je met de direct doorgave van de url niet harcoded?
Ik weet dat de browser ondersteuning beperkt is, heb dat gelezen.
Meetpixel: Wat gebeurd er dan met de eerst bezochte pagina? Die heeft toch geen request tijd?
En hoe kan ik nu weten in dezelfde response.php wat de eerste tijd was en wat de tweede tijd was? Hoe vang ik dat op?
Gewijzigd op 31/10/2016 13:28:50 door Brecht S
>> Wat bedoel je met de direct doorgave van de url niet harcoded?
Ik weet dat de browser ondersteuning beperkt is, heb dat gelezen.
Simpel. navigator.sendBeacon is een alternatief voor XHR, die zelf een url vraagt als argument. Het is dus de bedoeling om de url uit het argument te gebruiken in je *vervangende* functie, niet om deze daar te gaan hardcoden.
>> Meetpixel: Wat gebeurd er dan met de eerst bezochte pagina? Die heeft toch geen request tijd?
En hoe kan ik nu weten in dezelfde response.php wat de eerste tijd was en wat de tweede tijd was? Hoe vang ik dat op?
Natuurlijk heeft die dat wel, dat is de tijd waarop hij wordt opgevraagd. Dat gooi je gewoon in je database. Ik zie echt niet wat daar niet duidelijk aan is.
Het eindresultaat is heel simpel, je gooit de instructies nu gewoon door elkaar en hoopt dat het werkt, terwijl iets als dit beter zal gaan:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
navigator.sendBeacon = navigator.sendBeacon || function (url, data) {
var xhr = new XMLHttpRequest();
xhr.open('POST', url, false);
xhr.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
xhr.send(data);
};
function logData() {
var data = {'endDate': new Date()};
navigator.sendBeacon('http://www.my-url.com/response.php', data);
}
window.addEventListener('unload', logData, false);
var xhr = new XMLHttpRequest();
xhr.open('POST', url, false);
xhr.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
xhr.send(data);
};
function logData() {
var data = {'endDate': new Date()};
navigator.sendBeacon('http://www.my-url.com/response.php', data);
}
window.addEventListener('unload', logData, false);
Uiteraard niet getest, maar het zal iets in deze geest moeten worden. Dit POST gegevens naar response.php, geheel volgens sendBeacon specificatie.
Gewijzigd op 31/10/2016 13:50:55 door Ben van Velzen