Affiliate Manager - Live Demo

Wie funktioniert diese Demo?
Alle Links auf dieser Seite werden automatisch aus affiliate-links.json geladen. Aendere sie im Dashboard und sie aendern sich hier sofort. Das Script affiliate.js erkennt Links im DOM, ersetzt URLs, trackt Klicks und beobachtet neue Inhalte — alles clientseitig, kein Server noetig.

Demo 1

Auto-Erkennung von Affiliate-Links

Diese Links sind hardcoded im HTML. Das Script erkennt die Domains automatisch und ersetzt sie durch die zentral verwalteten URLs aus der JSON-Datei.

Amazon 3D Drucker bei Amazon →

Ko-fi Unterstuetze uns auf Ko-fi →

PayPal Spende via PayPal →

BMC Buy Me a Coffee →

Diese Links werden automatisch erkannt und durch die zentral verwalteten URLs ersetzt. Du brauchst keinerlei Attribute oder IDs — die Domain-Erkennung reicht.

Demo 2

Das data-affiliate Attribut

Fuer praezise Kontrolle kannst du Links mit dem data-affiliate Attribut auszeichnen. Das Script findet den Link anhand der ID in der JSON und setzt die URL automatisch.

Ergebnis:

Dieser Link wird automatisch ersetzt

HTML-Code:

<a data-affiliate="beispiel-link">Dieser Link wird automatisch ersetzt</a>
      

Vorteile: Kein Hardcoded-URL noetig. Der Link wird zur Laufzeit aus der JSON geladen.
Die ID beispiel-link muss in affiliate-links.json existieren.

Demo 3

Dynamischer Content (MutationObserver)

Der Affiliate Manager beobachtet das DOM mit einem MutationObserver. Wenn per JavaScript neue Inhalte hinzugefuegt werden, werden die Links automatisch ersetzt — perfekt fuer SPAs, AJAX oder dynamisch geladene Generatoren.

0 Links hinzugefuegt

Klicke den Button und sieh wie der neue Amazon-Link sofort den Affiliate-Tag bekommt.

Demo 4

Click-Tracking (DSGVO-konform)

Jeder Klick auf einen Affiliate-Link wird lokal im Browser gezaehlt. Keine Cookies, keine externen Server, kein Cookie-Banner noetig. Die Daten bleiben in localStorage.

0 Klicks gesamt

0 Versch. Links

0 Diese Session

Klicke auf einen Link oben und sieh wie der Zaehler sofort steigt. ↑

Integration

In 30 Sekunden eingebaut

Kopiere diese eine Zeile vor </body> in jede HTML-Seite und alle Affiliate-Links werden automatisch verwaltet:

      
<!-- Affiliate Manager - Vor </body> einfuegen -->
<script src="affiliate.js"></script>

Fuer erweiterte Nutzung steht das globale AffiliateManager Objekt bereit:

      
// URL eines Links per ID abrufen
const url = AffiliateManager.getUrl('beispiel-link');

// Klick-Statistiken abrufen
const clicks = AffiliateManager.getClicks();

// Amazon-Tag global aendern
AffiliateManager.updateTag('neuer-tag-21');

// Links manuell neu ersetzen
AffiliateManager.replaceLinks();
    

Features

Alle Funktionen im Ueberblick

✓

Zentrale Verwaltung

Alle Links in einer JSON. Einmal aendern, ueberall aktualisiert.

✓

Admin-Dashboard

Visuelles Panel zum Hinzufuegen, Bearbeiten und Loeschen.

✓

Auto-Erkennung

Amazon, Ko-fi, PayPal, BMC Links automatisch im DOM erkannt.

✓

Click-Tracking

Lokale Statistiken ohne Cookies. DSGVO-konform.

✓

MutationObserver

Dynamisch geladene Inhalte werden automatisch erkannt.

✓

Bulk Tag-Aenderung

Amazon-Tag einmal aendern, alle Links aktualisiert.

✓

Export / Import

JSON-Backup fuer Migration zwischen Websites.

✓

Kein Server noetig

100% clientseitig. Statische Websites, kein Backend.

✓

data-affiliate Attribut

Praezise Link-Zuweisung per ID statt URL-Matching.

✓

Offline-Fallback

Cached Links in localStorage falls JSON nicht erreichbar.

✓

Kategorien & Provider

Links nach Kategorie und Provider organisiert.

✓

Deaktivierbare Links

Links per Toggle ein/ausschalten ohne sie zu loeschen.

Bereit loszulegen?

Verwalte alle Affiliate-Links deiner Website zentral an einem Ort.

Dashboard oeffnen Kaufen

Affiliate Manager — Live Demo