Google AdSense einbinden

Wenn Sie statt der Banner lieber Google AdSense™ auf Ihren Seiten einbinden möchten, brauchen Sie die Erweiterung macina_banners nicht. Benutzen Sie stattdessen die folgende Anleitung. Im Kopfbereich dieser Website sehen Sie, wie die Google AdSense™ Anzeigen aussehen.

Tutorial zu Google AdSense

1. Platz für die Banner schaffen
2. Google AdSense™ Konto eröffnen
3. AdSense-Code einbinden

1. Platz für die Banner schaffen

Der einzige sinnvolle Platz für Banner ist im YAML-Standardlayout im Kopfbereich. Desweiteren habe ich darauf geachtet, daß möglichst wenig, sowohl am TYPO3 Template wie auch an den CSS-Dateien, geändert werden muß. Nur an der Datei fileadmin/css/modifications/basemod.css und am Erweiterungs-Template +ext header sind Änderungen nötig.

Auszug aus basemod.css
  1. ...
  2. /* Formatierung der Kopfbereiches */
  3. #header { position:relative; height: 140px; color: #fff; background: #1f1e2e url(../../img/yaml_bg.gif) repeat-x top; }
  4. #header img { position:absolute; top: 23px; left: 40px; font-size:208%; }
  5. #banner { position:absolute; top:20px; right:0px; z-index:10; }
  6. #banner img { position:relative; top:0px; left:0px; font-size:100%; }
  7. #topnav { top:100px; }
  8. ...

Ergänzen Sie basemod.css um die rot markierten Zeilen 25 bis 27. Sie können selbstverständlich die Position des Banner-Containers nach Ihren Wünschen verändern. Zeile 25 und 26 sorgt für die Positionierung (20 Pixel Abstand von oben und immer rechtsbündig). Zeile 27 verschiebt den Link für das Impressum um 100 Pixel nach unten.

2. Google AdSense Konto

Um AdSense nutzen zu können, brauchen Sie ein persönliches Konto bei Google. Die Bearbeitung des Antrages und die Prüfung Ihrer Website dauert in der Regel zwei bis drei Werktage. Klicken Sie auf die untenstehende Grafik, um ein AdSense-Konto bei Google zu eröffnen.

Sie erhalten mehrere Emails von Google. Wenn Ihre Bewerbung akzeptiert wurde, folgen Sie den jeweiligen Anweisungen und erzeugen Sie Ihren persönlichen AdSense-Code. Diesen fügen Sie im nächsten Schritt in das TYPO3 Template ein, damit die Anzeigen automatisch auf jeder Seite erscheinen.

3. AdSense Code einbinden

Von Google haben Sie die Zugangsdaten für Ihr neues AdSense-Konto erhalten. Mit den verfügbaren Tools können Sie nun Ihren persönlichen Code erzeugen, den Sie wie folgt einbinden:

Auszug aus +ext header
  1. ...
  2. temp.header.30 = HTML
  3. temp.header.30.value = </div>
  4. temp.header.40 = HTML
  5. temp.header.40.value = <div id="banner">
  6. temp.header.41 = HTML
  7. temp.header.41.value (
  8. <script type="text/javascript"><!--
  9. google_ad_client = "xxx-xxxxxxxxxxxxxxxx";
  10. google_ad_width = 468;
  11. google_ad_height = 60;
  12. google_ad_format = "468x60_as";
  13. google_ad_type = "text_image";
  14. google_ad_channel = "xxxxxxxxxx";
  15. google_color_border = "454545";
  16. google_color_bg = "F0F0F0";
  17. google_color_link = "336699";
  18. google_color_text = "000000";
  19. google_color_url = "008000";
  20. //--></script>
  21. <script type="text/javascript"
  22. src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
  23. </script>
  24. )
  25. temp.header.42 = HTML
  26. temp.header.42.value (
  27. </div>
  28. <img src="fileadmin/img/yaml_title.gif" alt="YAML - Ready for TYPO3" title="YAML - Ready for TYPO3" />
  29. )

Ersetzen Sie den Inhalt des Erweiterungs Templates +ext header ab Zeile 30 durch den oben dargestellten Inhalt.
Zeile 37 google_ad_client enthält Ihre persönliche ID, die von Google einmalig an Sie vergeben wird.
Zeile 42 google_ad_channel enthält die Channel-ID in Form einer 10-stelligen Zahl, die Sie ebenfalls von Google erhalten, wenn Sie mit Channels arbeiten.
Die Zeilen 43 bis 47 legen die farbliche Gestaltung der Anzeigen fest. Wenn Sie möchten, daß die Anzeigen so aussehen, wie auf dieser Website, können Sie die angegebenen Werte übernehmen.