donderdag 27 september 2012

AjaxClickSensor:

Eenvoudig clicks op je webpagina's registreren


Wat is de AjaxClickSensor?
De AjaxClickSensor is een eenvoudig php-script in combinatie met javascript/jQuery dat clicks op een pagina registreert en meldt aan de beheerder of SEO-manager van een website.

Een 'onClick'-event handler wordt gekoppeld aan een willekeurige link op een webpagina. Wanneer de link door een bezoeker wordt aangeklikt dan wordt middels een ajax-aanroep een emailbericht gestuurd naar de beheerder van de website zodat hij weet cq meet dat die betreffende link is geklikt.


Wanneer is deze clicksensor handig?
De AjaxClickSensor kan je op diverse manieren toepassen.
Bijvoorbeeld wanneer je voor SEO-doeleinden wil weten hoe vaak op een bepaalde link is geklikt. Handig bijvoorbeeld bij email-links (<a href="mailto:..) want die worden door Google Analytics niet gemeten.
Maar ook is dit handig bij de tegenwoordig steeds vaker voorkomende 'one-page design'-websites. Die one-page websites reageren wel op clicks van gebruikers, maar laden dan geen nieuwe html-pagina. Analyseprogramma's als Google Analytics zullen die clicks dus ook niet noteren. Een website eigenaar die geïnteresseerd is in het clickgedrag van de bezoekers kan met de AjaxClickSensor alsnog over die informatie gaan beschikken en kan er gebruik van maken om bijvoorbeeld de usability te verbeteren of ten behoeve van de SEO.

Een andere mogelijke toepassing is voor de zogenaamde anchor-links in de html. Een link dus die verwijst naar een anchor-tekst binnen dezelfde webpagina. Ook clicks op die links kan je simpel meten met de AjaxClickSensor. Bijvoorbeeld wanneer je een faq-pagina hebt met 'veelgestelde vragen en antwoorden'. De AjaxClickSensor maakt het erg simpel om er achter te komen welke vraag & antwoord het meest door de bezoekers van die pagina is gelezen.

Wanneer is de clicksensor niet handig?
De AjaxClickSensor is deels een javascript toepassing en werkt dus niet bij gebruikers die javascript in hun browser hebben uitgeschakeld.

Uitbreidingsmogelijkheden
De AjaxClickSensor is in dit voorbeeld gekoppeld aan de onClick event handler. Natuurlijk kan je er ook een andere event handler aan hangen, zoals onSubmit(), onBlur(), onChange(), onLoad(), … enzovoorts.

In dit voorbeeld is de actie die de AjaxClickSensor uitvoert eenvoudig: het stuurt een emailbericht naar de beheerder van de website met daarin de boodschap dat er een click is geregistreerd.
Maar je kunt er natuurlijk ook andere dingen mee doen. Zoals het registreren van de click in een database ten behoeve van je bezoekersstatistieken bijvoorbeeld.

Ook zou je alle clicks op alle links op je pagina's op deze manier kunnen registreren. Je legt daarmee dan feitelijk de basis voor een systeem waarin je de bezoekersstatistieken van je complete site kunt gaan bijhouden. Je eigen Google Analytics dus.. zonder dat je ook maar iets met Google te maken hebt. Interessant, gezien de huidige wetgeving rond privacy en cookies.

En zo zou je nog wel andere dingen kunnen bedenken.. Automatisch tweets.. automatische Facebook-updates.. registreren van advertentie-clicks..

Doe er je voordeel mee!

Wat zijn de vereisten?
Om de AjaxClickSensor te kunnen gebruiken moet jouw hosting-provider php ondersteunen.
Dat doen ze allemaal voor zover ik weet, dus eigenlijk zou het altijd moeten werken.


Installatiehandleiding:
Maak op de server in de www-map van je website een map 'ajax' aan en plaats daarin een bestandje met als naam acs.php. De volgende php-code plaats je in dat bestand:

<?php
/**
* @file acs.php (Ajax Click Sensor)
* @param $txt : bevat de linktekst (string)
* @param $src : bevat de url van de aanroepende pagina, of null (string)
* @const GEADRESSEERDE : emailadres van de persoon waar de clickmelding naartoe gemaild moet worden
* @author Paul van Eck (www.paulvaneck.nl)
* Dit script ontvangt minimaal 1 en maximaal 2 parameters van een aanroepend programma en stuurt een
email-bericht naar GEADRESSEERDE
*/

if (isset($_POST['param_1'])) $txt = $_POST['param_1']; else $txt='ajax/acs.php aanroep zonder parameter 1.';
if (isset($_POST['param_2'])) $src = $_POST['param_2']; else $src='Onbekend.';

if (isset($_POST['param_1'])) {
// alleen verder gaan als tenminste parameter 1 is gestuurd
define('GEADRESSEERDE','jouwemail@jouwdomein.nl');

$to=GEADRESSEERDE;
$subject = $txt;
$message = $txt."\n";
$message .= $src."\n\n";
$message .= "Tijd: ".date('Y-m-d H:i:s')."\n";
$message .= "Einde bericht.\n\n\n";
$fromEmail=GEADRESSEERDE;
$headers = "From: ".$fromEmail . "\r\n" .
"Reply-To: ".$fromEmail . "\r\n" .
"X-Mailer: PHP/" . phpversion();
$resultaat=mail($to, $subject, $message, $headers);
}

if ($resultaat) $antwoord="1"; else $antwoord="0";
// 1 = email goed verstuurd, 0 = email niet goed verstuurd
echo $antwoord;
?>

Let er op dat je de waarde van GEADRESSEERDE goed invult. Vervang in het script dus jouwemail@jouwdomein.nl door je eigen emailadres, anders raakt er iemand bij jouwdomein.nl gestrest..

Vlak voor de afsluitende tag </head> in je html-document (je webpagina dus) plaats je vervolgens het volgende stukje javascript:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript">
/** @author: Paul van Eck (www.paulvaneck.nl)
*/
function ajaxClickSensor(tekst)
{
var p1 = tekst;
$.ajax(
{
url: "http://www.mijnwebsite.nl/ajax/acs.php",
type: "POST",
data: {
param_1: tekst,
param_2: 'www.mijnwebsite.nl.'
}
});
return true; // zodat de standaard-functie van de link gewoon wordt uitgevoerd.
}
</script>

Hier moet je even de tekst www.mijnwebsite.nl wijzigen naar domeinnaam van jouw eigen website.
De AjaxClickSensor verstuurt 2 parameters. Parameter 1 is de tekst die door de click-sensor gemaild moet worden. Parameter 2 bevat de url van de aanroepende pagina.

In de body van je html-pagina kan je nu aan iedere willekeurige link de AjaxClickSensor hangen met de javascript event handler 'onClick()'. Hier een voorbeeld dus van een email-link:

<a onClick="ajaxClickSensor('Email-link geklikt op de contactpagina.')" href="mailto:mijnemail@mijndomein.com">Email mij!</a>

Natuurlijk kan je ook andere event handlers gebruiken zoals onMouseOver(), onSubmit() enzovoorts.

Hiermee is de installatie al compleet en zou het moeten werken.


Copyright?
Dit script mag je van mij vrij gebruiken in al je projecten, commercieel of privé. Pas hem aan waar je wilt en doe er iets goeds mee.

En even dit nog..
Nog een opmerking over de veiligheid van het php-script: Dit voorbeeld is eenvoudig gehouden om de werking van het script goed te kunnen laten zien. Wanneer je het script toepast denk dan altijd even na over het controleren van de aan het php-script doorgegeven parameters. Zeker wanneer je door het php-script database-bewerkingen laat uitvoeren is een goede controle van de invoerparameters vereist!

Geen opmerkingen:

Een reactie posten