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!

woensdag 12 september 2012

Captcha's? Alleen als het écht niet anders kan.

Het gebruik van captcha's is de laatste jaren in een grote stroomversnelling gekomen. Je ziet ze bijna overal. Naar mijn mening zijn ze een vervelend onderdeel van een online formulier en moet het gebruik ervan vermeden worden tenzij het écht niet anders kan. Er zijn goede alternatieven.

Wat zijn captcha's?

Captcha's, je kent ze wel, die blokjes met vervormde letters of cijfers aan het eind van online formulieren. Die letters of cijfers moet je dan foutloos na-typen en pas daarna kan je je bij een website aanmelden als klant, of als lid van een forum of zo. Maar ook heel vaak om een contactformulier te 'beveiligen' bijvoorbeeld.
Captcha's worden erg veel toegepast en ook op heel veel kleine websites zie je ze. De bedoeling van zo'n captcha is dus te voorkomen dat spammers en spambots toegang krijgen tot fora, of dat de eigenaar van de website wordt overladen met spam-emails.

Captcha's kosten je klanten

Captcha's werken, technisch gezien, meestal prima. Maar ze hebben ook enkele grote nadelen. En die nadelen komen er vrijwel allemaal op neer dat je als bedrijf met je website een barrière opwerpt voor je klanten. Het lezen van de letters of cijfers in een captcha is vaak lastig, zeker wanneer er ook nog onderscheid gemaakt wordt in hoofdletters en kleine letters (nog afgezien van het feit dat blinden en slechtzienden bijna onmogelijk met captcha's overweg kunnen).

Regelmatig zal de websitebezoeker dus geïrriteerd raken wanneer hij (of zij) een captcha tegenkomt. Waarom zou hij überhaupt die letters willen lezen en intypen? Wanneer de klant in de echte wereld voor de winkel staat zit de deur toch ook niet op slot? Als een potentiële klant je belt dan vraag je toch ook niet als eerste of hij wel serieus geïnteresseerd is in je product? Waarom dan wel online?

Een captcha is naar mijn idee een vervelende onderbreking. En elke onderbreking is, hoe je het wendt of keert, een moment waarop de potentiële klant kan afhaken. Of op z'n minst een heel klein beetje geïrriteerd raken. Captcha's kosten je dus klanten.

"Maar ik krijg zonder captcha's zoveel spam-mails .."

Dat valt in de meeste gevallen wel mee, is mijn ervaring. Láten het er per dag een stuk of 5 zijn. Wat dan nog? Voor de meeste kleinere websites zal het probleem echt niet groter zijn dan dat. Die mails gooi je gewoon in de prullenbak, toch? Volgens mij is dat een betere tactiek dan je échte klanten met een captcha op te zadelen.

Ik geloof stellig dat het opwerpen van wélke barrière dan ook uiteindelijk klanten zal kosten. Iedere website-eigenaar zal dus moeten afwegen welk soort beveiliging hij wil toepassen op de in zijn websites gebruikte formulieren, en welke effecten dat kan hebben op zijn klanten. Als iets niet echt nodig is, doe het dan niet.

Captcha's raad ik sowiese af voor kleine ondernemers. Gooi die paar spam-mailtjes per dag gewoon in je prullenbak en lig er niet wakker van.

Alternatieven voor captcha's

Er zijn goede alternatieven voor captcha's. Een webformulier (contactformulier, inschrijfformulier, aanmeldformulier et cetera) kan met diverse trucjes worden uitgerust die net als captcha's het aantal spam-berichten drastisch kunnen verminderen.

Alternatieven voor captcha's zijn bijvoorbeeld het door een gebruiker laten oplossen van een simpel rekensommetje, of het laten antwoorden op een vraag. Maar feitelijk hebben deze alternatieven het zelfde nadeel als een captcha: er wordt voor de websitebezoeker een barrière opgeworpen. Ze zijn eigenlijk een variant op een captcha, niet echt een alternatief.

Echt alternatief 1: verborgen velden in een formulier

Een echt alternatieve oplossing die ik als programmeur zelf graag gebruik is, en nu wordt het wat technischer, een verborgen veld toevoegen aan een webformulier. Dat veld ziet er uit als een gewoon invoerveld dat door een gebruiker zou moeten worden ingevuld. Een website bezoeker ziet dat veld echter niet omdat het door de website software (css: display:none;) verborgen wordt. Een spambot ziet dat veld wél, en zal proberen het in te vullen. Wanneer het formulier dan wordt verstuurd controleert de software of het verborgen veld is ingevuld. Is het ingevuld, dan is het dus duidelijk dat er een spambot aan het werk is geweest en kan het verwerken van het formulier dus worden afgebroken (en wordt er dus geen spam-mail verstuurd bijvoorbeeld). Een simpele maar effectieve oplossing waar de klant zelf helemaal niets van merkt.

Echt alternatief 2: meet de tijd waarin het formulier is ingevuld

Een andere goed werkende manier is met behulp van een tijdmeting. Het werkt heel simpel: bereken de tijd die de websitebezoeker nodig heeft gehad om het formulier in te vullen. Als die tijd zodanig kort is dat een mens dit nooit voor elkaar zou hebben gekregen, dan is de kans vrijwel 100% dat een spambot het formulier heeft ingestuurd. Immers, een spambot is een stukje software dat razendsnel is.
(let op: doe de tijdmeting server-side en niet met javascript, want een bezoeker kan javascript uitgeschakeld hebben staan).

Captcha's? Alleen als het écht niet anders kan.

Zo zijn er nog wel meer mogelijkheden om spammails te verminderen. Gebruik deze mogelijkheden eerst, voordat je besluit tot klantonvriendelijke captcha's en de varianten daarop. Gebruik captcha's alleen als het écht niet anders kan.