Affiliate Marketing – einfache Sticky Ad Box erstellen

just-yum-yum-bloggerwissen-6

In diesem Artikel erfährst Du, wie Du in mit Hilfe einer WordPress Widget Area und ein paar Zeilen PHP-Code eine einfache responsive Sticky Ad Box erstellen kannst.

Was ist eine Sticky Ad Box?

Eine Sticky Ad Box wird auch als Ankeranzeige bezeichnet, da diese Art der Werbeanzeige fest auf dem Bildschirm verankert ist.

Das Ziel dieser Form der Darstellung ist es, die Sichtbarkeit Deiner Werbeanzeige zu verbessern und somit Deine Einnahmen zu erhöhen.

Voraussetzung ist jedoch, dass Du die Sticky Ad so platzierst, dass sie Deine Seitenbesucher nicht daran hindert, die eigentlichen Inhalte Deiner Seite lesen zu können.

Sticky Ad Box richtig platzieren

In Desktop-Ansichten sind beliebte und bewährte Positionen für Sticky Ads die linke und/oder die rechte Sidebar sowie der obere und/oder untere Bildschirmrand einer Seite.

Für Desktop-Ansichten belaufen sich die gängigen Bannergrößen auf

  • 160 x 600 Pixels (Wide Skyscraper)
  • 300 x 250 Pixels (Medium Rectangle)
  • 300 x 600 Pixels (Large Rectangle)
  • 728 x 90 Pixels (Super Banner)

Auf mobilen Endgeräten werden Sticky Ads in der Regel am oberen oder unteren Bildschirmrand platziert.

Auf mobilen Endgeräten haben sich die Bannergrößen 320 x 50 Pixel und 300 x 50 Pixel bewährt.

Letztere Größe solltest Du allerdings nur dann verwenden, wenn Du auf Deiner Webseite einen bedeutenden Anteil mobiler Besucher mit einem Viewport kleiner 320 Pixel hast.

Mobil ist weniger, mehr

Auf mobilen Endgeräten solltest Du grundsätzlich sehr sparsam mit Sticky Ads umgehen, da sie Deinem Besucher wertvollen Viewport stehlen.

Das Platzieren einer Sticky Ad sowohl am oberen als auch am unter Bildschirmrand ist mobil daher ein absolutes No-Go.

Eine einfache Sticky Ad Box erstellen

Wie Du eine einfache Sticky Ad Box mit wenig Aufwand in WordPress selber erstellen kannst, erfährst Du jetzt.

Mit der WordPress Widget Area eine Sticky Ad Box erstellen

Um meine Sticky Ad Box erstellen zu können, benötige ich zunächst eine neue Widget Area. Also eigentlich zwei, weil ich zwischen Desktop View und Mobile View unterscheiden werde.

Dazu muss ich zwei Dinge tun:

  1. Zwei neue Widget Areas definieren.
  2. Die Position der neuen Widget Area definieren.

Widget Area definieren

Um eine Widget Area zu definieren, stellt WordPress die Funktion register_sidebar() zur Verfügung.

Die Bezeichnung sidebar in dieser Funktion ist etwas irreführend, lässt sich aber mit dem Zeitpunkt der Einführung dieser Funktion in WordPress erklären.

Bei der Einführung 2007 war die Idee hinter register_sidebar(), dass eine Webseite links oder rechts eine vertikale Spalte (sidebar) enthält.

Diese Seitenleiste enthält wiederum Widgets, um andere Informationen anzuzeigen als den Hauptinhalt dieser Webseite.

Mittlerweile nutzen WordPress-Themes und Plugins diese Funktion weiter über den Seitenleisten-Gedanken hinaus.

Beispielsweise nutzt das Genesis WordPress-Theme Foodie Pro von Feast Design, das ich auf meinem Foodblog JUST YUM YUM verwende, zahlreiche Widget Areas, um die Startseite des Blogs zu gestalten.

Code Snippet: Widget Areas erstellen

// Widget Area für Desktop Ad Banner
register_sidebar(array(
	'name'          => 'Sticky Ad Widget Desktop',
	'id'            => 'jyy_sticky_widget',
	'description'   => '',
	'before_widget' => '<div class="jyy-sticky-widget jyy-sticky-widget-desktop"><span class="jyy-adlabel">Anzeige</span>',
	'after_widget' => '</div>',
	'before_title' => '<h3>',
	'after_title' => '</h3>',
	));
// Widget Area für Mobile Ad Banner
register_sidebar(array(
	'name'          => 'Sticky Ad Widget Mobile',
	'id'            => 'jyy_sticky_widget_mobile',
	'description'   => '',
	'before_widget' => '<div class="jyy-sticky-widget jyy-sticky-widget-mobile"><span class="jyy-adlabel">Anzeige</span>',
	'after_widget' => '</div>',
	'before_title' => '<h3>',
	'after_title' => '</h3>',
	));
}

Mit diesen wenigen Zeilen PHP-Code habe ich jetzt zwei neue Widget Areas definiert.

Hier gibt es eigentlich nur zwei Dinge zu beachten:

  1. Die ID der Widget Areas muss eindeutig sein.
  2. Die Bezeichnung der ID sollte ausschließlich Kleinbuchstaben enthalten.

Um sie im WordPress-Backend anzeigen zu lassen, muss ich sie nun noch in eine Funktion packen und diese Funktion an einen action-Hook hängen.

Hierfür stellt WordPress den action-Hook widgets_init zur Verfügung, an den ich meine Funktion jyy_sticky_widget_init() hängen kann.

add_action('widgets_init','jyy_sticky_widget_init',1);

function jyy_sticky_widget_init() {
	register_sidebar(array(
	'name'          => 'Sticky Ad Widget Desktop',
	'id'            => 'jyy_sticky_widget',
	'description'   => '',
	'before_widget' => '<div class="jyy-sticky-widget jyy-sticky-widget-desktop"><span class="jyy-adlabel">Anzeige</span>',
	'after_widget' => '</div>',
	'before_title' => '<h3>',
	'after_title' => '</h3>',
	));
	
	register_sidebar(array(
	'name'          => 'Sticky Ad Widget Mobile',
	'id'            => 'jyy_sticky_widget_mobile',
	'description'   => '',
	'before_widget' => '<div class="jyy-sticky-widget jyy-sticky-widget-mobile"><span class="jyy-adlabel">Anzeige</span>',
	'after_widget' => '</div>',
	'before_title' => '<h3>',
	'after_title' => '</h3>',
	));
}

Wenn ich nun im Backend auf Design > Widgets wechsel, werden meine neuen Widget Areas dort angezeigt und können mit Widgets befüllt werden. Allerdings sehen meine Besucher diese Bereiche noch nicht, denn dafür ist noch zwei weitere Schritte erforderlich.

Widget Areas im Frontend anzeigen

Sichtbar werden die Widget Areas im Frontend mit einer weiteren Funktion, die ich in meinem Code -Beispiel mit add_sticky_widget() bezeichnet habe.

function add_sticky_widget(){
	if (is_active_sidebar('jyy_sticky_widget_mobile')){
			$jyy_sticky_widget_mobile = dynamic_sidebar('jyy_sticky_widget_mobile');
			$after_content .='<div class="jyy_sticky_widget_mobile_inner">';
			$after_content .= $jyy_sticky_widget_mobile;
			$after_content .= '</div>';
			} // close if
	
	if (is_active_sidebar('jyy_sticky_widget')){
			$jyy_sticky_widget = dynamic_sidebar('jyy_sticky_widget');
			$after_content .='<div class="jyy_sticky_widget_desktop_inner">';
			$after_content .= $jyy_sticky_widget;
			$after_content .= '</div>';
			} // close if
} // close function

Mit dem Conditional Tag is_active_sidebar($index) prüfe ich zunächst, ob dieser Widget Area bzw. Sidebar mindestens ein Widget zugeordnet wurde. Dann, und nur dann, wird der folgende Code ausgeführt und die Widget Area im Frontend angezeigt.

Die Funktion dynamic_sidebar() sorgt anschließend dafür, dass jedes aktive Widgets in der vorgegebenen Reihenfolge aufgerufen das Markup für ausgegeben wird.

Widget Areas positionieren

Zu guter Letzt muss ich den neuen Widgets Areas noch ihre Positionen innerhalb des Quellcodes zuordnen. Da diese Areas außerhalb des restlichen Seitenkontext stehen, positioniere ich sie ganz am Ende des Quellcodes von BLOGGERWISSEN.

Dazu verwende ich den action-Hook wp_footer() an den ich meine obige Funktion add_sticky_widget() hänge.

function jyy_initalize_sticky_widget(){
	add_action('wp_footer','add_sticky_widget',100);
	add_action('wp_head','add_sticky_widget_css',1);
} // close function

Dieser action-Hook ist der Funktion jyy_initalize_sticky_widget gekapselt, die mit dem action-Hook wp() ausgeführt wird.

add_action('wp','jyy_initalize_sticky_widget',1);

Sticky Ad Box erstellen für Affilinet Performance Ad Widget Plugin

Für die Aussteuerung der Banner-Anzeigen auf BLOGGERWISSEN verwende ich das Plugin Affilinet Performance Ad Widget.

Dieses Plugin stellt je nach Endgerät verschiedene Bannergrößen zur Verfügung. Um nicht jedes Mal die CSS-Anweisungen anpassen zu müssen, wenn ich die Bannergröße ändere, habe ich speziell für dieses Plugin eine Erweiterung implementiert, die auf diese Veränderung reagiert.

Auch wenn ich mich im nachfolgenden Beispiel auf dieses Plugin beziehe, kannst Du diese Erweiterung – mit den entsprechenden Anpassungen – grundsätzlich auch für andere Banner-Widgets verwendet werden.

Die Bannergrößen ermitteln

AWIN Affilinet stellen innerhalb ihres Plugins die jeweiligen Bannergrößen, zumindest indirekt, auch als abfragbare Informationen zur Verfügung. Diese Informationen mache ich mir zu Nutze und passe das CSS für die Höhe und die Breite meiner Sticky Ad Box an, passend zur jeweils ausgewählten Bannergröße.

Um aber an die Größeninformationen aus dem Plugin heranzukommen, muss ich zunächst aber sowohl den Widget-Namen als auch die Widget-ID in Erfahrung bringen.

Widget-Name herausfinden

Um den internen Namen Deines Widgets herauszufinden, ist etwas Detektivarbeit gefragt. Um den Namen herauszufinden, wirst Du Dich durch die Dateien Deines Plugins wühlen müssen. Ein guter Anfang sind dabei immer Dateien, die die Bezeichnung widget im Dateinamen haben.

Beim AWIN Affilinet Plugin bin ich unter ../plugins/affilinet-performance-module/classes/Widget.php fündig geworden. Der Name selbst steckt dann in dieser Zeile der Datei Widget.php: parent::__construct('Affilinet_Performance_Ad_Widget', 'Affilinet Performance Ads', $widget_ops);

Widget-ID herausfinden

Hier ist keine Detektivarbeit erforderlich. Stattdessen reichen mir ein paar Zeilen Code, mit denen ich mir im Backend von WordPress die eindeutigen IDs anzeigen lasse.

Die ausgegebenen IDs ist in diesem Fall etwas irreführend. Denn an dem Text, der mir hier ausgegeben wird, sind lediglich die Zahlen am Textende für meinen Code relevant. Im konkreten Fall also die 2 und die 3.

Code Snippet zur Anzeige der Widget-ID

add_action('in_widget_form', 'jyy_bw_get_widget_id');

function jyy_bw_get_widget_id($widget_instance) {
    if ($widget_instance->number=="__i__"){
        echo '<p class="widget-id-message">' . __('Zum Anzeigen der ID, das Widget speichern','just_yum_yum') . '</p>';
        }
    else {
        echo '<p class="widget-id-message">' . __('Die Widget ID lautet:','just_yum_yum') . ' ' . $widget_instance->id . '</p>';
        }
    } // close function

Sowohl den Widget-Namen als auch die Widget ID speichere ich nun in zwei eigenen Variablen, $jyy_bw_sticky_widget_desktop_name und $jyy_bw_sticky_widget_desktop_instance.

$jyy_bw_sticky_widget_desktop_name = 'Affilinet_Performance_Ad_Widget';
$jyy_bw_sticky_widget_desktop_instance = '2';

Anschließend hole ich mir mit Hilfe dieser beiden Variablen und der WordPress-Funktion get_option(), die Informationen, die diesem Widget zugeordnet sind.

$jyy_bw_sticky_widget_desktop_instances = get_option('widget_' . $jyy_bw_sticky_widget_desktop_name);
$jyy_bw_sticky_widget_desktop_instances_data = $jyy_bw_sticky_widget_desktop_instances[$jyy_bw_sticky_widget_desktop_instance];

In der Variablen $jyy_bw_sticky_widget_desktop_instances_data befinden sich nun die Informationen die speziell diesem Widget zu geordnet wurden.

In meinem Fall ist das lediglich eine einzige Information, nämlich die Größe des Banners mit dem key-value-Paar size.

Da das Plugin die Information zur Bannergröße im Format Breite x Höhe zur Verfügung stellt, kann ich nun die PHP-Funktion explode() verwenden, um die Werte für Breite und Höhe vor und nach dem Zeichen x als Array zu isolieren.

$jyy_bw_sticky_widget_instance_size_desktop	= explode('x',$jyy_bw_sticky_widget_desktop_instances_data['size']);

Diese Informationen verwende ich nun in meinen CSS-Anweisungen, um die Pixelangaben für Breite und Höhe dynamisch anzupassen.

width:' . $jyy_bw_sticky_widget_instance_size_desktop[0] . 'px;
height:' . ($jyy_bw_sticky_widget_instance_size_desktop[1]+18) . 'px;

Da ich dem Display-Banner noch einen span-tag mit dem Hinweis „Anzeige“ voransetze, addiere ich zum den Wert der Banner-Höhe noch die Höhe des span-tags hinzu. In meinem Fall 18 Pixel.

Provisionslinks und Artikel als Werbung kennzeichnen

Wie Du Provisionslinks und Deine Sponsored Posts ganz einfach als Werbung kennzeichnen kannst, erfährst Du in diesem Tutorial.

In der mobilen Ansicht soll mein Display-Banner immer zentriert angezeigt werden, daher sind die CSS-Anweisungen hier minimal umfangreicher:

width:' . $jyy_bw_sticky_widget_instance_size_mobile[0] . 'px;
height:' . ($jyy_bw_sticky_widget_instance_size_mobile[1]+18) . 'px;
left:50%;
margin-left:-' . ($jyy_bw_sticky_widget_instance_size_mobile[0]/2) . 'px;

Der Trick, um das Banner immer zentriert anzuzeigen, liegt in den Statements left und margin-left.

Der Wert für left steht immer auf festen 50%, während die Angabe für margin-left immer der Hälfte der Bannerbreite entspricht. Daher teile ich den ermittelten Wert für $jyy_bw_sticky_widget_instance_size_mobile[0] durch 2.

Und das war es auch schon: Fertig ist die Sticky Ad Box!

Code Snippet: Einfache Sticky Ad Box erstellen

add_action('widgets_init','jyy_sticky_widget_init',1);
add_action('wp','jyy_initalize_sticky_widget',1);

function jyy_initalize_sticky_widget(){
	add_action('wp_footer','add_sticky_widget',100);
	add_action('wp_head','add_sticky_widget_css',1);
} // close function

function jyy_sticky_widget_init() {
	register_sidebar(array(
	'name'          => 'Sticky Ad Widget Desktop',
	'id'            => 'jyy_sticky_widget',
	'description'   => '',
	'before_widget' => '<div class="jyy-sticky-widget jyy-sticky-widget-desktop"><span class="jyy-adlabel">Anzeige</span>',
	'after_widget' => '</div>',
	'before_title' => '<h3>',
	'after_title' => '</h3>',
	));
	
	register_sidebar(array(
	'name'          => 'Sticky Ad Widget Mobile',
	'id'            => 'jyy_sticky_widget_mobile',
	'description'   => '',
	'before_widget' => '<div class="jyy-sticky-widget jyy-sticky-widget-mobile"><span class="jyy-adlabel">Anzeige</span>',
	'after_widget' => '</div>',
	'before_title' => '<h3>',
	'after_title' => '</h3>',
	));
}

function add_sticky_widget(){
	if (is_active_sidebar('jyy_sticky_widget_mobile')){
			$jyy_sticky_widget_mobile = dynamic_sidebar('jyy_sticky_widget_mobile');
			$after_content .='<div class="jyy_sticky_widget_mobile_inner">';
			$after_content .= $jyy_sticky_widget_mobile;
			$after_content .= '</div>';
			} // close if
	
	if (is_active_sidebar('jyy_sticky_widget')){
			$jyy_sticky_widget = dynamic_sidebar('jyy_sticky_widget');
			$after_content .='<div class="jyy_sticky_widget_desktop_inner">';
			$after_content .= $jyy_sticky_widget;
			$after_content .= '</div>';
			} // close if
} // close function

function add_sticky_widget_css($instance){
	
	/** OPTIONAL: Affilinet Performance Ad Widget **/
	/** desktop banner **/
		$jyy_bw_sticky_widget_desktop_name = 'Affilinet_Performance_Ad_Widget';
		$jyy_bw_sticky_widget_desktop_instance = '2';
		$jyy_bw_sticky_widget_desktop_instances = get_option('widget_' . $jyy_bw_sticky_widget_desktop_name);
		$jyy_bw_sticky_widget_desktop_instances_data = $jyy_bw_sticky_widget_desktop_instances[$jyy_bw_sticky_widget_desktop_instance];
		$jyy_bw_sticky_widget_instance_size_desktop	= explode('x',$jyy_bw_sticky_widget_desktop_instances_data['size']);
	/** desktop banner **/
	
	/** mobile banner **/
		$jyy_bw_sticky_widget_mobile_name = 'Affilinet_Performance_Ad_Widget';
		$jyy_bw_sticky_widget_mobile_instance = '3';
		$jyy_bw_sticky_widget_mobile_instances = get_option('widget_' . $jyy_bw_sticky_widget_mobile_name);
		$jyy_bw_sticky_widget_mobile_instances_data = $jyy_bw_sticky_widget_mobile_instances[$jyy_bw_sticky_widget_mobile_instance];
		$jyy_bw_sticky_widget_instance_size_mobile	= explode('x',$jyy_bw_sticky_widget_mobile_instances_data['size']);
	/** mobile banner **/
	/** OPTIONAL: Affilinet Performance Ad Widget **/
	
	echo('<style id="jyy-sticky-widget">
			.jyy-sticky-widget{position:fixed}
			.jyy-sticky-widget.jyy-sticky-widget-mobile{display:none;}
			.jyy-sticky-widget span.jyy-adlabel{display:block;font-size:.7rem;font-family:sans-serif;color:#fff;text-align:center;background:#a4a4a4;}
			.jyy-sticky-widget.jyy-sticky-widget-desktop{	display:block;
															right:0;
															bottom:0;
															width:' . $jyy_bw_sticky_widget_instance_size_desktop[0] . 'px;
															height:' . ($jyy_bw_sticky_widget_instance_size_desktop[1]+18) . 'px;
															overflow:hidden
														}
			@media only screen and (max-width:414px){
				.site-footer{margin-bottom:60px;}
				.jyy-sticky-widget.jyy-sticky-widget-desktop{display:none;}
				.jyy-sticky-widget.jyy-sticky-widget-mobile{right:unset;
															border:none;
															display:block;
															width:' . $jyy_bw_sticky_widget_instance_size_mobile[0] . 'px;
															height:' . ($jyy_bw_sticky_widget_instance_size_mobile[1]+18) . 'px;
															left:50%;
															margin-left:-' . ($jyy_bw_sticky_widget_instance_size_mobile[0]/2) . 'px;
															bottom:0;
															border-top:1px solid #a4a4a4;
															box-shadow:unset;
															overflow:hidden}
															}
			</style>');
} // close function

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.