Integration Guide
In unter 60 Sekunden Werbung auf deiner Website einbinden – SEO-konform und ohne Auswirkungen auf die Ladezeit.
Schnellstart: 2 Zeilen Code
Die Einbindung von AdServer PRO besteht aus nur zwei Schritten:
Schritt 1: JavaScript laden
Füge dieses Script einmal im <head> oder vor </body> deiner Website ein:
<script src="https://ads.seo-manager.info/kunde/assets/js/adserver.js" async></script>Das async-Attribut sorgt dafür, dass das Script den Seitenaufbau nicht blockiert – wichtig für Core Web Vitals.
Schritt 2: Ad-Zone platzieren
Platziere ein div mit dem Zonen-Slug dort, wo die Werbung erscheinen soll:
<div data-adserver-zone="sidebar-banner"></div>Den Zonen-Slug erhältst du beim Erstellen einer Ad-Zone im Dashboard.
Erweiterte Optionen
Über zusätzliche data- Attribute kannst du das Verhalten anpassen:
Kategorie-Targeting
Sende Kategorien mit, damit gezielt passende Werbung ausgespielt wird:
<div data-adserver-zone="sidebar-banner" data-adserver-category="seo,tools"></div>Lazy Loading deaktivieren
Standardmäßig werden Ads erst geladen, wenn sie 200px vor dem Viewport sind. Für Above-the-Fold Platzierungen kannst du das deaktivieren:
<div data-adserver-zone="header-banner" data-adserver-lazy="false"></div>Eigenes Styling
Verhindere das Default-CSS des Ad-Containers und style komplett selbst:
<div data-adserver-zone="sidebar-banner" data-adserver-style="custom"></div>Fallback-Inhalt
Zeige eigenen Inhalt wenn keine Kampagne aktiv ist (sonst wird die Zone unsichtbar):
<div data-adserver-zone="sidebar" data-adserver-fallback="<p>Werbeplatz verfügbar</p>"></div>JavaScript API
Für Single Page Applications oder dynamische Seiten gibt es eine JavaScript API:
// Alle Ads aktualisieren (z.B. nach Seitenwechsel)
AdServerPRO.refreshAll();
// Bestimmte Zone aktualisieren
AdServerPRO.refresh('sidebar-banner');Alle data-Attribute
| Attribut | Beschreibung | Standard |
|---|---|---|
data-adserver-zone | Zone-Slug (Pflicht) | – |
data-adserver-lazy | Lazy Loading | true |
data-adserver-style | "custom" = kein Default-CSS | Default |
data-adserver-category | Kategorie-Targeting (kommasep.) | – |
data-adserver-fallback | Fallback-HTML | Ausblenden |