Die AdCanvas ist ein neues, leichtgewichtiges und vollständig framework‑agnostisches Modul zur Anzeige von Werbe‑ und Content‑Blöcken. Sie wurde entwickelt, um sich nahtlos in statische Websites, Jekyll‑Projekte, CMS‑Systeme oder individuelle Web‑Apps einzufügen – ohne Abhängigkeiten, ohne Build‑Komplexität und mit klarer, modularer Architektur.
Warum eine eigene Ads Engine?
Viele bestehende Lösungen sind entweder zu schwergewichtig, zu unflexibel oder an bestimmte Frameworks gebunden. Die AdCanvas verfolgt einen anderen Ansatz:
- Kein Framework erforderlich – funktioniert mit reinem HTML.
- Modulare Layouts – List, Multiplex, In‑Feed, Sidebar, Hero, Carousel.
- Theme‑System – Light, Dark, Premium und eigene Themes.
- Fallback‑Mechanismen – robuste Datenverarbeitung auch bei Fehlern.
- Minimale Dateigröße – ideal für statische Seiten und GitHub Pages.
- Einfache Integration – ein
<div>reicht.
Ein einfaches Beispiel
So bindest du die Engine ein:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/chstorb/adcanvas@latest/dist/adcanvas.min.css">
<script src="https://cdn.jsdelivr.net/gh/chstorb/adcanvas@latest/dist/adcanvas.min.js" defer></script>
Und so platzierst du einen Anzeigenblock:
<div class="adcanvas-slot" data-layout="multiplex" data-count="4"></div>
Die AdCanvas rendert automatisch die passenden Elemente.
Die Demo-Seite
Vollständige, interaktive Demos findest du hier:
👉 AdCanvas direkt ausprobieren auf CODEPEN
👉 AdCanvas Demo auf dieser Seite
Architektur und Aufbau
Die AdCanvas folgt einer klaren Struktur:
- Load data (with fallback)
- Normalize & validate
- Layout renderer
- Initialization
Diese Struktur macht die Engine leicht verständlich, erweiterbar und robust.
Einsatzmöglichkeiten
- Produktlisten
- Affiliate‑Blöcke
- Content‑Empfehlungen
- Blog‑Sidebar‑Widgets
- Multiplex‑Ads
- Hero‑Banner
- Carousel‑Ads
Durch das Theme‑System lässt sich die Engine optisch perfekt an jede Website anpassen.
Open Source
Der gesamte Code ist Open Source und auf GitHub verfügbar:
https://github.com/chstorb/adcanvas
Pull Requests, Issues und Feedback sind ausdrücklich willkommen.
Die AdCanvas ist ein kompaktes, aber leistungsfähiges Werkzeug für moderne Webprojekte. Sie verbindet klare Architektur, einfache Integration und hohe Flexibilität – ideal für Entwickler, die eine schlanke, zuverlässige Lösung suchen.