Auf unseren Websites kommen hin und wieder sogenannte Affiliate-Links zum Einsatz. Dabei handelt es sich um Links zu Produkten oder Angeboten, bei denen wir unter bestimmten Voraussetzungen eine Provision erhalten kann, wenn über diesen Link beispielsweise ein qualifizierter Kauf zustande kommt.
Für den Besucher entstehen durch die Verwendung eines solchen Links normalerweise keine zusätzlichen Kosten. Trotzdem soll natürlich erkennbar sein, dass hinter dem Link ein kommerzielles Interesse steht.
Uns ist diese Transparenz wichtig. Deshalb kennzeichnen wir Affiliate-Links entsprechend und wollte dafür gleichzeitig einen schlichten, wiedererkennbaren Affiliate-Hinweis mit CSS gestalten.
Hier ein Beispiel, welches unseren CSS-Code-Schnipsel nutzt:
* Affiliate-/Werbelink · Provision möglich · keine Mehrkosten.
Affiliate-Links sollen als solche erkennbar sein
Affiliate-Marketing ist grundsätzlich nichts Geheimnisvolles. Ein Betreiber empfiehlt oder verlinkt ein Angebot und kann eine Vergütung erhalten, wenn daraus eine qualifizierte Handlung oder ein Kauf entsteht.
Gerade deshalb finden wir es richtig, dem Besucher offen mitzuteilen, dass ein solcher Zusammenhang besteht.
Die konkrete Kennzeichnung kann je nach Anbieter und Einsatz unterschiedlich aussehen. Manche Partnerprogramme machen außerdem eigene Vorgaben. Amazon verlangt beispielsweise zusätzliche Angaben für Teilnehmer seines Partnerprogramms.
Unser CSS löst diese rechtliche oder vertragliche Frage nicht. Es sorgt lediglich dafür, dass ein einmal festgelegter Hinweis auf unserer Website immer in derselben Form dargestellt werden kann.
So würde es ohne unseren CSS-Code-Schnipsel aussehen:
* Affiliate-/Werbelink · Provision möglich · keine Mehrkosten.
Mein CSS für den Affiliate-Hinweis
Dafür verwenden wir folgenden kleinen Codeschnipsel:
/**
* Affiliate-Hinweis
*/
.affiliate-hinweis {
font-size: 0.7em;
color: #8E948E;
text-align: center;
}Auch hier steckt technisch nicht besonders viel dahinter.
Mit .affiliate-hinweis definieren wir eine eigene CSS-Klasse. Diese kann ich anschließend einem Element zuweisen, das unseren Affiliate-Hinweis enthält.
Ein einfaches Beispiel könnte so aussehen:
<p class="affiliate-hinweis">
Affiliate-Link: Wenn du über diesen Link kaufst, kann ich eine Provision erhalten.
Für dich entstehen dadurch keine zusätzlichen Kosten.
</p>Welcher Text tatsächlich verwendet werden sollte, muss natürlich zum jeweiligen Partnerprogramm und zur konkreten Verwendung passen. Das Beispiel ist deshalb nicht als allgemeingültige rechtliche Vorlage gedacht.
Was macht der CSS-Code?
font-size: 0.7em; stellt den Hinweis kleiner als den umgebenden normalen Text dar.
Mit color: #8E948E; verwenden wir ein zurückhaltendes Grau mit leicht grünlichem Einschlag.
text-align: center; richtet den Hinweis mittig aus.
Das Ergebnis ist ein dezenter Hinweis, der sich optisch vom normalen Fließtext unterscheidet und trotzdem nach einem einheitlichen Muster dargestellt werden kann.
Dezent ja – versteckt nein
Bei Affiliate-Hinweisen gibt es allerdings einen wichtigen Unterschied zu rein dekorativen Elementen.
Wenn wir beispielsweise eine Trennlinie in einer Sidebar möglichst unauffällig gestalten, ist das hauptsächlich Geschmackssache. Eine Werbe- oder Affiliate-Kennzeichnung soll dagegen vom Besucher tatsächlich wahrgenommen werden können.
Deshalb sollte man Schriftgröße, Farbe und Kontrast auf der eigenen Website kontrollieren.
Unser Wert von 0.7em ist bewusst klein gewählt. Je nach Standardschriftgröße des Themes kann das bereits ziemlich klein wirken. Auch das helle Grau muss zum jeweiligen Hintergrund passen.
Ich würde deshalb nicht einfach meinen Farbwert und meine Schriftgröße übernehmen, sondern mir das Ergebnis auf Desktop, Tablet und Smartphone ansehen.
Der Hinweis darf sich gestalterisch zurücknehmen. Er sollte aber nicht so zurückgenommen sein, dass man ihn erst suchen muss.
Die Farbe lässt sich leicht anpassen
Natürlich ist #8E948E kein vorgeschriebener Farbwert.
Wer eine hellere oder dunklere Website verwendet, kann den Wert entsprechend anpassen. Wichtig ist weniger die konkrete Farbe als eine vernünftige Lesbarkeit.
Dasselbe gilt für die Schriftgröße. Wenn 0.7em im verwendeten Theme zu klein erscheint, kann beispielsweise ein etwas größerer Wert sinnvoller sein.
Der CSS-Code ist also eher eine Ausgangsbasis als eine gestalterische Vorschrift.
Warum zusätzliches CSS?
Für diese kleine Gestaltung wollte ich weder die eigentlichen CSS-Dateien des Themes verändern noch extra ein Child-Theme erstellen.
Der Hinweis besteht aus wenigen Eigenschaften und lässt sich problemlos über das zusätzliche CSS verwalten.
Das hat außerdem den Vorteil, dass meine Anpassung bei einem normalen Update des aktuell verwendeten Themes nicht einfach durch neue Theme-Dateien überschrieben wird.
Bei einem Theme-Wechsel muss man allerdings daran denken, dass WordPress zusätzliches CSS an das jeweilige Theme bindet. Soll die Gestaltung auch mit dem neuen Theme verwendet werden, muss der Codeschnipsel entsprechend übernommen und dort erneut kontrolliert werden.
Die Klasse sorgt nur für das Aussehen
Ein wichtiger Punkt zum Schluss: Die Klasse affiliate-hinweis erkennt keine Affiliate-Links automatisch.
Sie überprüft auch nicht, ob eine Kennzeichnung rechtlich ausreicht und weiß nicht, welches Partnerprogramm hinter einem Link steckt.
Sie macht nur genau das, was ich von ihr verlange: Ein Element mit dieser Klasse bekommt eine bestimmte Schriftgröße, Farbe und Ausrichtung.
Die eigentliche Kennzeichnung muss weiterhin bewusst an der richtigen Stelle eingefügt werden.
Das gefällt mir an der Lösung wiederum ganz gut. Keine zusätzliche Erweiterung, kein großes System und kein Automatismus, auf den ich mich blind verlassen müsste.
Ein Hinweis, eine CSS-Klasse und überall dieselbe Darstellung.