Der Popup, Banner & HTML Builder ist die Arbeitspferd-Aktion zum Anzeigen von Inhalten: Aktionen, Ankündigungen, Gutschein-Pop-ups, Glücksrad-Spiele, Hero-Slider, schwebende Chat-Buttons, Fortschrittsanzeigen — alles, was aus einer Vorlage oder Ihrem eigenen HTML gebaut ist, angezeigt als Pop-up, Leiste, bildschirmfüllende Einblendung oder inline in der Seite.
Eine hinzufügen
- Öffnen Sie in einer Kampagne „Targeting & Personalisierung“ den Schritt Inhalte und klicken Sie auf Aktion hinzufügen.
- Wählen Sie Popup, Banner & HTML Builder. Die Vorlagengalerie öffnet sich. Sie können auch Leer beginnen und Ihr eigenes HTML einfügen oder von einer bereits gebauten Aktion kopieren.
Die Familien in der Galerie (jede verlinkt auf ihren eigenen ausführlichen Artikel):
- Coupon Popup — Aktionscode mit Klick zum Kopieren / verschwommener Enthüllung.
- Spin Wheel (gestapelt und Side-by-Side/Vollbild) — spielerisches Glücksrad.
- Hero Slider — bis zu vier wechselnde Folien.
- Announcement Bar und Rotating Announcement Bar — Streifen oben/unten.
- Status Tracker und gestufte Fortschrittsbalken — Live-Fortschritt zu Zielen / Treueprogrammen aus Profilwerten.
- Hover Bubble CTA — schwebender Eck-Button, der eine Nachrichtenblase öffnet (Chat starten, Gespräch buchen).
- Center Modal, Full-Screen Overlay, Corner Toast, System Message, vertikale Schubladen und Banner.
- Multi-Step Quiz — Fragebogen für Guided Selling.
Der Editor
Schritt 1 — Design Your Banner or Popup. Klicken Sie ein Element direkt in der Live-Vorschau an oder klappen Sie seine Gruppe in der Seitenleiste auf. Jede Einstellung hat einen Button ⚡ Variations — zielgruppenbasierte Fälle (Sprache, Land, wiederkehrender Besucher, CRM-Feld…) mit einem Standard als Fallback, genau wie im Countdown-Leitfaden beschrieben.
Was die Gruppen enthalten (am Beispiel Coupon Popup; andere Vorlagen unterscheiden sich):
- Style — Farb-Preset, Bildlayout, Ecken, Einblendanimation (pop…), Kartenschatten, erweitertes Karten-CSS.
- Coupon Code — der Code selbst und sein Reveal Style: copy (Klick kopiert in die Zwischenablage), reveal (verschwommen bis zum Klick), display (immer sichtbar).
- Text — Dachzeile, Titel, Fließtext, Kleingedrucktes; jeweils mit Ein-/Aus-Schalter, eigenem CSS-Hook und Variations.
- Button — Text, dann Open link (gleiches/neues Fenster) oder Run JavaScript; Count clicks here (click target) markiert ihn als Klickziel für die CTR; optionale Animation.
- Close — das eingebaute × behalten oder aus der Symbolbibliothek (24 Symbole) bzw. ein eigenes Bild wählen. Don’t show again for N sessions: Nachdem ein Besucher es geschlossen hat, bleibt es so viele Sitzungen verborgen — 0 lässt es beim nächsten Besuch wiederkommen, 999 zeigt es praktisch nie wieder.
- HTML-Quelltext (erweitert) — das vollständige Markup, für Entwickler.
Werkzeugleiste: Preview as on Handy / Tablet / Desktop, Vorlage ändern, Add to your templates (speichert Ihre angepasste Version zur Wiederverwendung) und Edit action with AI — beschreiben Sie die Änderung in Alltagssprache, und die KI gestaltet die Aktion um oder schreibt sie neu.
Anzeigeregeln & Platzierung
Schritt 2 — Set Display Rules & Placement:
- Inline-Element — wird in einem oder mehreren Platzhaltern gerendert; reiht sich in Ihre Seiteninhalte ein.
- Schwebendes Popup — wählen Sie eine Bildschirmposition; dann Einblendanimation, optionaler abgedunkelter modaler Hintergrund, Scrollverhalten, Schließen-Button, automatisches Schließen. Einstellungen, die nur für Pop-ups gelten, sind bei inline deaktiviert — der Bildschirm behält seine Form.
- Solange Sie keine Platzierung wählen, hat die Aktion keinen Ort zum Rendern — der Schritt sagt das ausdrücklich, damit eine unsichtbare Aktion nie ein Rätsel ist.
- Trigger — wann sich die Aktion öffnet. Es gibt elf, gruppiert danach, was der Besucher gerade tut — siehe Trigger unten.
- Frequency caps — Stopp nach Schließen / Klicken / N Impressionen, Burst-Modus, Abstand zu anderen Pop-ups — jede Regel wird mit Ihren Zahlen in Alltagssprache wiedergegeben.
Trigger — wann sich das Pop-up öffnet
Ein Trigger bestimmt den Moment, in dem eine Aktion erscheint, nachdem die Zielgruppenregeln der Kampagne bereits entschieden haben, wer sie sieht. Haken Sie so viele an, wie Sie möchten: Was zuerst eintritt, öffnet sie.
Beim Eintreffen
- Beim Seitenaufruf — sobald die Seite geladen ist. Das ist auch der Fallback: Ist sonst nichts angehakt, öffnet sich die Aktion beim Laden.
- Nach Verzögerung anzeigen — eine Anzahl Sekunden, gezählt ab dem Laden der Seite, egal was der Besucher tut.
- Bei Inaktivität von — keine Mausbewegung, kein Klick, kein Tastendruck. Jedes der drei startet die Zählung neu; der Trigger löst also nach einer echten Pause aus statt zu einer festen Zeit.
Bei Interaktion
- Nach Scrollen zu — ein Prozentsatz der gesamten Seitenhöhe.
- Bei erneutem Scrollen nach oben — er ist nach unten gegangen und wieder nach oben gekommen.
- Wenn Text kopiert wird — er hat Cmd/Strg+C benutzt.
- Wenn Text markiert wird — eine Passage wird hervorgehoben, bevor er sie kopiert. Der Trigger wartet etwa eine halbe Sekunde, nachdem sich die Markierung nicht mehr ändert, damit ein Ziehen erst abgeschlossen ist, und braucht mindestens zehn Zeichen — ein versehentliches Doppeltippen auf ein Wort zählt nicht.
- Wenn er aufhört zu scrollen für — mitten auf der Seite geparkt, lesend statt überfliegend. Nur ein echtes Scrollen startet die Uhr; eine Seite, die niemand scrollt, löst das also nie aus, und jedes weitere Scrollen startet sie neu.
Bei Absprungabsicht — jetzt auch auf Handys
Die Absprungabsicht besteht aus zwei unabhängigen Detektoren, denn Verlassen sieht mit einer Maus völlig anders aus als auf einem Touchscreen. Haken Sie einen oder beide an.
- Desktop — Cursor verlässt die Seite. Löst aus, wenn der Mauszeiger den oberen Rand des Fensters überquert, wo Schließen-Button, Tabs und Adresszeile liegen. Das Verlassen über die Seiten oder unten zählt nicht, denn das sind keine Ausgänge.
- Mobil — Tippen auf Zurück. Er tippt auf einem Touchgerät auf „Zurück“. Der Detektor wird erst scharf, wenn der Besucher interagiert — ein Scrollen, ein Tippen oder ein Tastendruck —, nie beim bloßen Laden der Seite; wer sofort wieder abspringt, behält also seinen Zurück-Button. Einmal scharf, öffnet ein Druck auf „Zurück“ die Aktion, statt die Seite zu verlassen, und die Seite bleibt stehen; der nächste Druck verlässt sie normal. Neu laden macht ihn wieder scharf.
Aus Ihrem eigenen Code
- Bei einem Ereignis von Ihrer Website — rufen Sie
_S_T.trigger("add_to_cart")von einer beliebigen Stelle Ihrer Seite in dem Moment auf, in dem es passiert, oder pushen Sie{event: "add_to_cart"}in Ihren Data Layer und nutzen Sie den Namen, den Sie in Ihrem Tag-Manager bereits haben. Namen werden exakt verglichen, einschließlich Groß- und Kleinschreibung. Es auszulösen, bevor die Aktion geladen ist, ist unbedenklich — die Aktion öffnet sich, sobald sie eintrifft.
Aus einem Element der Seite öffnen
Unabhängig von den Triggern oben kann eine Aktion vom Besucher gestartet werden: per Klick oder Hover auf ein Element, auf das Sie zeigen, auf ein Element, das Personyze für Sie hinzufügt, oder als minimierbares Pop-up, das eingeklappt als Reiter wartet, bis es geöffnet wird.
Messen
Der als click target markierte Button speist die CTR der Aktion; Impressionen, Klicks und Schließen werden an den Schritt Leistung der Kampagne gemeldet und, falls aktiviert, an Google Analytics. Um Designs gegeneinander zu testen, aktivieren Sie A/B-Tests im Schritt „Inhalte“.
