Tracking script zoals analytics

Door Brecht S op 27-10-2016 22:15 gewijzigd op 27-10-2016 22:52

5.251 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:


$('<img>', {
    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:


<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?

Brecht S

31-10-2016 15:34 gewijzigd op 31-10-2016 15:36

Ik wist niet dat alerts genegeerd werden in een unload. Daarom krijg ik dus geen response. Ok, dan ga ik die gegevens ergens laten wegschrijven. Is die setRequestHeader hier nodig? Of kan dat ook zonder? En voor de addEventListener: moet die niet beforeunload zijn ipv unload?

Met die meetpixel ben ik nog niet mee. Ik kan een <script> zetten en daarin de url opnemen met de parameters erin. Die kan ik dan terug ophalen in mijn response.php file. Dat is duidelijk. Maar die request tijd niet.

Bvb pagina 1:


<script type="text/javascript" src="http://www.my-url.com/response.php?time=xxx"></script>

En voor pagina 2 dus dezelfde code? En dan zou ik de tijd van pagina 2 moeten aftrekken van pagina 1. Hoe kan ik weten welke tijd van pag 1 komt en welke van pag 2? Dat gedeelte zie ik niet. Maar dan is het wel zonder een img tag.

Ben van Velzen

31-10-2016 16:07 gewijzigd op 31-10-2016 16:15

>> Met die meetpixel ben ik nog niet mee. Ik kan een <script> zetten en daarin de url opnemen met de parameters erin. Die kan ik dan terug ophalen in mijn response.php file. Dat is duidelijk. Maar die request tijd niet.
MeetPIXELS zijn plaatjes, geen scripts. En wat is er zo lastig aan het deel "je vraag in je PHP de tijd op, slaat deze op in de database en poept een plaatje uit"?

>> Is die setRequestHeader hier nodig? Of kan dat ook zonder? En voor de addEventListener: moet die niet beforeunload zijn ipv unload?
Als je navigator.sendBeacon wilt gebruiken moet je POSTen, en niet met GET werken, omdat sendBeacon zelf ook POST. Dus ja, die header is nodig, en je krijgt de gegevens via $_POST. De keuze tussen unload en beforeunload is aan jou. beforeunload kan echter wel false positives geven in het geval van het annuleren van navigatie, op nee klikken op basis van een andere beforeunload handler etc.

Brecht S

31-10-2016 17:11

Ok, dan werk ik met unload. Voor de setRequestHeader hebben we wel xhr.setRequestHeader("Content-Type", "text/plain;charset=UTF-8"); Het ging mij hierover en niet over de POST want dat was al duidelijk. Waarom als text/plain?

Dus voor de meetpixel is het dan:


<img src='http://www.my-url.com/response.php?time=<?php date('Y-m-d H:i:s'); ?>'>

Ik kan nu de datum en uur gaan opslaan door de $_GET['time'] aan te roepen in de response.php pagina.
Als ik dit nu doe op pagina 2 moet ik toch weten van waar die user is gekomen om de eerste tijd te hebben? Dus moet ik de url ook iedere keer meenemen. OF ben ik hier helemaal verkeerd aan het denken. Het is dus geen probleem om de tijd vanuit de php mee te sturen alleen zie ik niet hoe ik de begintijd (van pag 1) en de begintijd (van pag 2) kan opvragen tussen de pagina's en dan het verschil kan berekenen begintijd2 - begintijd 1.

Ben van Velzen

31-10-2016 17:13 gewijzigd op 31-10-2016 17:14

Waarom doe je dat nou zo dan? In response.php vraag je de tijd op, die hoef je helemaal niet door te geven. Je maakt het jezelf alleen maar moeilijk. Dus gewoon zo:


<img src="http://www.my-url.com/response.php">

>> Als ik dit nu doe op pagina 2 moet ik toch weten van waar die user is gekomen om de eerste tijd te hebben?
Nee, je moet alleen weten dat het die user was, de pagina waar hij vandaan kwam was de laatst bezochte (dus meest recente) voordat hij de huidige pagina bezocht.

Brecht S

31-10-2016 17:55 gewijzigd op 31-10-2016 17:56

Ha ja inderdaad. Ik kan de tijd gerust opnemen in de response.php pagina. Alleen dat laatste nog. Ik moet wel degelijk weten wie die user was (met eventueel een userID mee te sturen) omdat er meerdere klanten, users op het platform zitten en ik moet dan wel weten welk laatst bezochte pagina die bepaalde user had. Dus zal ik die wel moeten meesturen als parameter met de URL?

Wat moet ik nu doen met die text/plain in de header? Moet die er staan of hoeft dit niet? Zie mijn vorige post hieromtrent.

Ben van Velzen

31-10-2016 18:05

Wanneer je sendBeacon zou willen gebruiken, dan wordt de request volgens de specificatie via POST gedaan. Wanneer je hiervoor een shim gebruikt zoals ik in het voorbeeld doe heb je die header nodig, omdat je je data moet POSTen. Het voordeel van sendBeacon is dat deze wordt uitgevoerd buiten het renderen van pagina's etc om, dus er treedt geen vertraging op wanneer dit aanwezig is. Ik zou zelf alleen niets op unload doen, vooral omdat het niet echt nodig is. Je kunt heel veel zaken schatten op basis van navigatiesnelheid etc.

Brecht S

31-10-2016 18:19

Ik wou beide methoden eens uitproberen, hetzij met de sendBeacon, hetzij met de img pixel. Dit om eens te vergelijken.
Als ik de sendBeacon gebruik moet ik wel werken met de unload. Het enige wat ik hier wil weten is de tijd dat een bezoeker de pagina verlaat.

Dus ik moet de userID meesturen in de response.php als parameter in de URL? Anders weet ik niet wie het is.

Ben van Velzen

31-10-2016 18:20

Correct, anders weet je het inderdaad niet.

Brecht S

31-10-2016 18:43

Ok, ga dat allemaal eens uittesten en kom er later op terug mocht het nodig zijn. Bedankt voor je inzet om me op weg te helpen. Ondertussen toch al weer heel wat bijgeleerd!

johan de wit

09-11-2016 16:15

Johan de wit op 30/10/2016 12:45:46

[quote="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.

Hallo Ben,

Dit lijkt mij interessant om meer te weten maar dan zonder javascript. Mag ik hier wat meer over weten
[/quote]

Waar kan hier meer info over vinden?

Reageren

Inloggen om te reageren