jQuery Adsense Overlay
- by Patrice
In dem heutigen Artikel geht es um die kleinen Steine, die uns Google in den Weg wirft, wenn wir versuchen die Adsense-Werbung mit Hilfe von Javascript auf unserer Webseite zu verschieben. Im ersten Moment klingt dieser Wunsch vielleicht etwas abwegig, da man die Adsense Werbung im Quelltext ja schließlich direkt dort platzieren kann, wo diese auch angezeigt werden soll. Es gibt jedoch auch Gründe die dafür sprechen. So z.B. dieser den Javascript-Code im Footer zu platzieren, zum die Performance der Seite zu verbessern, oder aber Adsense-Code in dem jQuery Plugin SLIDO zu verwenden. Jedoch quittiert der Adsense-Code den einfachen Versuch der Verschiebung mit dem Javascript-Fehler
Error: google_protectAndRun is not defined
, der wohl auf einen Mechanismus schließen lässt, derartige Manipulationen zu verhindern. Bedenken wir dass der Adsense-Code den umgebenen Inhalt der Adsense-Werbung analysiert um relevante Werbung zu liefern, ist dieser kleine Schutzmechanismus gar nicht so unsinnig. Aus genau diesem Grund sollten wir versuchen, den versteckten Adsense-Code so zu platzieren, dass dieser weiterhin von relevanten Inhalt umgeben ist.
In unserem Beispiel verwenden wir zum Verschieben des Adsense-Blocks jQuery und injekten diesen in einem neuen Block (hier links zu sehen). Anschließend wir der Inhalt des ursprünglichen Adsense-Containers geleert (zu sehen in der rechten Sidebar). Der Trick Adsense-Code mit Javascript neu zu positionieren und zu steuern liegt darin, diesen einfach in einen unsichtbaren Container zu lagern, um ihn anschließend mit Javascript dort heraus an die gewünschte Stelle zu verschieben.
Adsense Code verschieben
Der relevante Block, wo die Werbung erscheinen soll könnte so aussehen.
<div id="adsense_ziel"></div>
Am Ende der HTML-Seite kommt dann der versteckte Adsense-Block hin, den wir auslesen und in den Container mit der ID “adsense_ziel” verschieben werden.
<div id="adsense" style="display:none;">Hier kommt der komplette Adsense-Code rein</div>
Abschließend verwenden wir diesen jQuery-Code, um den Iframe des Adsense-Blocks zu verschieben.
jQuery(function() {
$("#adsense").find("iframe").appendTo("#adsense_ziel");
$("#adsense").remove();
});
Versuchen wir allerdings den kompletten Adsense-Container zu verschieben, werden wir mit dem bekannten Javascript-Fehler
Error: google_protectAndRun is not defined
konfrontiert und im Firefox wird eine weisse Seite angezeigt.
Adsense Code in SLIDO verwenden
kommen wir zum nächsten Level, indem wir den Adsense-Code in dem jQuery Plugin SLIDO im Slider-Overlay verwenden. Im Prinzip wenden wir hier das bereits gesehene wiederum an und bedenken, dass wir im SLIDO-Aufruf nicht einfach unter “content” in den Settings einfach den Adsense-Code verwenden können. Auch hier würden wir wieder eine weisse Seite mit bekannter Fehlermeldung zu Gesicht bekommen.
Wir müssen also wieder einen kleinen Umweg über einen versteckten Adsense-Container gehen und das Plugin zweistufig abfackeln.
- Adsense-Code im versteckten Container normal laden
- Content-Variable der Slido-Settings mit gewünschter Struktur und Adsense Zielcontainer initialisieren
- onDocumentReady Adsense verschieben
- versteckten Adsense-Container löschen
Der folgende Javascript-Code veranschaulicht, wie ein funktionierender Aufbau umgesetzt werden kann.
jQuery(function(){
var settings = {
content : '<div id="adsense_ziel"></div>'
};
jQuery('#slido').slido(settings);
jQuery('#adsense iframe').appendTo('#adsense_ziel');
jQuery('#adsense).remove();
});
Wie immer in der Programmierung führen viele Wege nach Rom. Der Eine hier beschriebene hat sich für mich als praktikabel erwiesen. Über Fragen und Anregungen freue ich mich wie immer in den Kommentaren.