Behavioral Targeting mit dem kostenlosen Tool BTBuckets
[An dieser Stelle würden Sie einen Facebook-„Gefällt mir“-Button sehen – wenn Deutschland nicht das Land der ausufernden Datenschutz-Paranioia wäre.]
Durch die Google Analytics Application Gallery wurde ich auf das kostenlose Behavioral-Targeting-Tool BTBuckets aufmerksam. Diese externe Lösung zur differenzierten Ansprache von Website-Besuchern lässt sich sehr einfach per JavaScript einbinden und steuern. Als kleinen Test habe ich hier im Blog für Erstbesucher der Website einen zusätzlichen Hinweis auf den RSS-Feed eingebunden.
Was ist Behavioral Targeting?
„Behavioral targeting uses information collected on an individual’s web-browsing behavior, such as the pages they have visited or the searches they have made, to select which advertisements to display to that individual.“
Quelle: Wikipedia
Behavioral Targeting hat zwar seinen Ursprung in der Display-Werbung, ist jedoch nicht darauf beschränkt. Prinzipiell lässt sich jede beliebige Art von Inhalten ausliefern, die für einen Website-Besucher einen Zusatznutzen bieten, basierend auf seinem bisherigen Verhalten. So könnte man beispielsweise in einem Online-Shop Spezialpreise für Kunden anbieten, die über den Link eines Kooperationspartners auf die Website gelangt sind. Die aus bisherigen Produktaufrufen abgeleiteten Produktempfehlungen auf der Website von Amazon sind ebenfalls ein Beispiel für Behavioral Targeting.
Es muss jedoch nicht immer ums Verkaufen gehen. In manchen Blogs werden zusätzliche Boxen für Besucher eingeblendet, die über eine Google-Suche auf die Website kommen. Texte wie „Sie haben nach XY gesucht. Die folgenden Artikel könnten daher für Sie interessant sein …“ sind in diesen Boxen zu lesen. Ein weiteres Beispiel für nicht-verkäuferisches Behavioral Targeting ist die automatische Weiterleitung von Besuchern auf eine bestimmte Sprach- oder Länderversion der Website.
In den meisten Fällen erfolgt die Identifizierung der Website-Besucher per Cookie. Auf diese Weise lassen sich auch anonyme Besucher individuell ansprechen. Allerdings sind alle Informationen über einen Besucher naturgemäß verloren, sobald das Cookie gelöscht wird oder der Website-Besucher einmal einen anderen Browser oder Computer benutzt. Das muss man als Website-Betreiber immer im Hinterkopf behalten, wenn man Behavioral-Targeting-Tools einsetzt. Behavioral-Targeting-Regeln, die auf Informationen basieren, die in Cookies gespeichert sind, sollte man eher als nette Add-Ons ansehen, auf die im Ernstfall jedoch nicht zwangsläufig Verlass ist. Vorsicht geboten ist daher vor allem bei erfolgskritischen Behavioral-Targeting-Inhalten (z. B. Sonderpreise oder spezielle Angebote), die durch ein bereits länger zurückliegendes Verhalten anonymer Besucher ausgelöst werden. In solchen Fällen ist zu überlegen, ob eine echte Personalisierung mit vorheriger Anmeldung nicht doch die sicherere Lösung ist.
Wie funktioniert Behavioral Targeting mit BTBuckets?
BTBuckets ist ein kostenloser Service. Ob man sich auf einen kostenlosen Dienst verlassen will, wenn man Behavioral Targeting auf einer Website einführen möchte, mit der man Geld verdient, sollte man sich sicher sehr genau überlegen. Für kleinere Blogs oder um einfach einmal ein wenig mit Behavioral Targeting herumzuspielen zu können, eignet sich BTBuckets aber meiner Meinung nach gut. Nach der Anmeldung muss man auf der eigenen Website lediglich ein paar Zeilen JavaScript ins Template einfügen und kann loslegen. Hierzu findet sich auf der BTBuckets-Website eine Anleitung mit Videos. Nutzer von Google Analytics können die Statistiken von BTBuckets zudem durch eine Erweiterung des Google Analytics Tracking Codes in ihre Webanalyse-Auswertungen integrieren. WordPress-Nutzer können BTBuckets übrigens besonders einfach mithilfe eines WordPress-Plugins einbinden.
Die Funktionsweise von BTBuckets ist denkbar einfach. Aufgrund bestimmter Regeln werden Website-Besucher in verschiedene „Buckets“, also Eimer, einsortiert. Nach der Anmeldung sind für einen leichten Einsteig auch bereits vier „Default Buckets“ („New Visitor“, „Returning Visitor“, „Search“ und „Social Media“) vordefiniert. Basierend auf dieser Einsortierung wiederum lassen sich spezielle Inhalte ausliefern. Diese „Targets“ genannten Inhalte können beliebigen HTML- oder JavaScript-Code enthalten. An die gewünschten Stellen der Website wird dann nur noch ein kleiner JavaScript-Schnipsel eingefügt, der das entsprechende Target aktiviert, sobald ein Website-Besucher die Voraussetzungen erfüllt.
Ein Beispiel für Behavioral Targeting mit BTBuckets: Zusätzlicher Hinweis auf den RSS-Feed für Erstbesucher des Blogs
Wer die Website michael-van-laar.de zum ersten Mal besucht (oder das entsprechende BTBuckets-Cookie gelöscht hat) und dabei eine Seite des Blog-Bereichs aufruft, bekommt oberhalb der Hauptüberschrift eine zusätzliche Box angezeigt, die auf den RSS-Feed hinweist.
Screenshot: Blog-Startseite mit RSS-Zuzsatzbox
Sobald ein Besucher in den „Returning Visitor“-Eimer einsortiert wird, erscheint die Zusatzbox nicht mehr. Um Besucher nicht unnötig mit dieser Zusatzbox zu nerven, habe ich außerdem eine kleine Zusatzfunktion eingebaut, die bei einem Klick auf den Link zum RSS-Feed oder auf den kleinen Schließen-Button die Box dauerhaft ausblendet. Da auch diese Funktion mithilfe von BTBuckets gelöst ist, funktioniert dies natürlich nur solange ein Website-Besucher seine Cookies nicht löscht.
Technische Umsetzung, Teil 1:
Ein neuer Eimer muss her
Für die Umsetzung dieser kleinen Behavioral-Targeting-Fingerübung ist zunächst ein neuer Bucket „RSS-Box-Closer“ notwendig. In diesen werden alle Besucher einsortiert, die zwar noch immer der Default-Bucket-Regel „New Visitors“ entsprechen, jedoch die zusätzliche Box nicht mehr angezeigt bekommen sollen. Dies geschieht sozusagen „manuell“. Wie weiter unten im Code des Targets „RSS-Zusatzbanner“ zu sehen ist, lasse ich bei einem Klick des Besuchers auf den RSS-Link oder auf den Schließen-Button der Zusatzbox per JavaScript das Event „no_mode_rssbox“ an BTBuckets senden. Dieses Event dient als Trigger für die Einsortierung eines Website-Besuchers in den „RSS-Box-Closer“-Eimer.
Screenshot: Einstellungen des Buckets „RSS-Box-Closer“
Warum eine so umständliche Lösung? Warum nicht einfach einen Besucher durch den Klick auf einen der Links direkt als „Returning Visitor“ kennzeichnen und die zusätzliche Box auf diese Weise dauerhaft vor ihm verbergen? Ganz einfach: Erstens lassen sich die „Default Buckets“ nicht bearbeiten. Und mithilfe der JavaScript API von BTBuckets lassen sich zwar Events „von Hand“ aufrufen, nicht jedoch direkte Einsortierung eines Website-Besuchers vornehmen. Zweitens möchte ich keine Website-Besucher als Wiederkehrer kennzeichnen, die gar keine sind. So bleiben die Statistiken halbwegs sauber und unverfälscht.
Technische Umsetzung, Teil 2:
Zusatzinhalt in ein Target packen
Die Einblendung der zusätzliche Box geschieht über das neue Target „RSS-Zusatzbanner“. Im Targeting Callback Code verwende ich die jQuery-Syntax, weil jQuery ohnehin geladen wird. Der kleine Code-Schnipsel fügt über der ersten h2-Überschrift die erwünschte Box ein. Zudem sorgt er mithilfe der JavaScript API von BTBuckets ($BTB.trackEvent("no_more_rssbox");) dafür, dass bei einem Klick auf einen der Links innerhalb der Box das Event „no_more_rssbox“ an BTBuckets gesendet wird.
Da ich die zusätzliche Box nur in einem Teilbereich der Website erscheinen lassen möchte, ist die Option „Manually insert code“ ausgewählt. Auf diese Weise kann ich den Code exakt auf den Seiten einfügen, wo ich ihn haben will. (Genauer gesagt lasse ich mithilfe einer PHx-Anweisung den BTBuckets-Code nur dann von MODx in den HTML-Code einfügen, wenn der angeforderten Seite das Blog-Template zugewiesen wurde.) Da ich innerhalb des Targeting Codes jQuery verwende, muss der BTBuckets-Code für die Zusatzbox im Template der Website natürlich nach dem jQuery-Aufruf stehen.
Screenshot: Einstellungen des Targets „RSS-Zusatzbanner“
Hier noch einmal der Targeting Callback Code in leichter lesbarer Form:
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function(){
var hiderssbox = $BTB.isUserOnBucket("rssboxcloser");
if (hiderssbox == false) {
$("h2:first").before("<div class='outer_box rss_zusatzbanner' style='margin-bottom: 5em;'><div class='inner_box'><p class='icon_rss'><a href='http://feeds.feedburner.com/michaelvanlaar'><img src='/assets/templates/mvl/images/icon-rss-48.png' width='48' height='48' alt='RSS-Feed' /></a></p><h3>Immer auf dem Laufenden bleiben</h3><p><strong><a href='http://feeds.feedburner.com/michaelvanlaar'>Jetzt den RSS-Feed abonnieren</a></strong> und keinen Artikel verpassen!</p><a class='close_box'>Information zum RSS-Newsfeed ausblenden</a></div></div>");
}
$(".rss_zusatzbanner a").click(function(){
$BTB.trackEvent("no_more_rssbox");
});
});
/* ]]> */
</script>
Das Schließen der Box mithilfe des kleinen Schließen-Buttons besorgen drei zusätzliche Zeilen jQuery-Code:
$(".close_box").click(function(){
$(this).closest(".outer_box").slideUp();
});
Diese Funktion zum Schließen der Box habe ich bewusst in mein allgemeines DOM-Manipulationsskript ausgelagert. Denn das Schließen von Boxen kann in Zukunft vielleicht auch noch an anderer Stelle ganz nützlich sein. Da alle Boxen als äußeren Container immer ein div mit der Klasse „outer_box“ bekommen, lässt sich auf diese Weise jeder beliebigen Box ein kleiner Schließen-Button hinzufügen. Damit der Schließmechanismus funktioniert, muss der BTBuckets-Code im Website-Template vor das DOM-Manipulationsskript platziert werden.
Zum Schluss der Vollständigkeit halber auch noch die verwendeten Style-Anweisungen:
@media screen {
.outer_box {
background: #ffd2aa;
margin-bottom: 2.5em;
margin-top: 2.5em;
padding: 9px;
}
.inner_box {
background: #fff;
border: 1px solid #ff870f;
overflow: hidden;
padding: 15px;
position: relative;
}
.inner_box p, .inner_box ul, .inner_box ol, .inner_box h2, .inner_box h3, .inner_box h4 {
margin-bottom: 0 !important;
margin-top: 0 !important;
}
.close_box {
background: #ff870f url('images/box-close.png') center center no-repeat;
border: 0;
cursor: pointer;
display: block;
font-size: 1px;
height: 15px;
position: absolute;
right: 0;
text-indent: -9999em;
top: 0;
width: 15px;
}
}
@media print {
.rss_zusatzbox {
display: none;
}
}
Das Hintergrund-Bild des Schließen-Buttons werde ich selbstverständlich noch in das bereits vorhandene CSS-Sprite integrieren, um den zusätzlichen HTTP-Request zu vermeiden.
