Glücksrad-Block
Ein spielerisches Promo-Rad: ein Titel, eine Dreh-Geste und eine einzelne konfigurierte Belohnung. Es ist die leichtgewichtige Antwort des Studios auf „diese Aktion gamifizieren“ — kein Preispool, keine Gewinnchancen, keine serverseitige Auslosung, nur eine befriedigende Enthüllung rund um einen Link, den du ohnehin schon kontrollierst.
Wie es funktioniert
Das Glücksrad ist einer der Blöcke, die auf demselben :checked-Checkbox-und-Label-CSS-Trick wie das Akkordeon aufbauen. Eine versteckte Checkbox, gepaart mit einem <label>, dient als Tippziel, und eine an :checked gebundene CSS-Regel tauscht aus, was sichtbar ist — ganz ohne JavaScript. Wird kinetisches CSS beachtet, hakt ein Tippen auf die Rad-Grafik (🎡) die versteckte Checkbox an, was eine 0,9-sekündige Dreh-Animation auslöst (eine @keyframes-Rotation auf 720 Grad) und gleichzeitig ein Preisfeld offenlegt: einen buttonartig gestylten Link, der auf deine konfigurierte Preis-URL verweist, mit einem „🎉“ für den Enthüllungsmoment versehen.
Unterhalb dieser kinetischen Ebene rendert das gemailte HTML immer auch ein zweites Steuerelement: einen einfachen, buttonartig gestylten Link mit demselben Label und Ziel. Anders als bei den Fallback-Chips von Abstimmung oder Bewertung ist dieser Button nicht hinter der kinetischen Ebene per CSS verborgen — er ist immer sichtbar. Ein Client, der :checked beachtet, zeigt sowohl das Rad als auch diesen Button gleichzeitig; Outlook und jeder andere Client, der die Regel nicht beachten kann, zeigt einfach nur den Button. Empfänger müssen nie „drehen“, um zum Preis zu gelangen — beides führt zum Ziel.
Es gibt in diesem Block keinerlei Zufall. Jeder Empfänger, der dreht — oder jeder Empfänger in einem Client, der den einfachen Fallback-Button zeigt — landet auf genau demselben konfigurierten Link. Der „Gewinn“ ist by design garantiert: Das Rad ist ein Präsentationsmittel für eine einzelne Belohnung, die du bereits für alle festgelegt hast, kein Preisauswahlmechanismus. Wenn du möchtest, dass unterschiedliche Empfänger unterschiedliche Angebote sehen, ist das eine Frage separater E-Mail-Versionen für separate Zielgruppensegmente (oder der Verwendung von Merge-Tags im Preislink selbst), keine Funktion des Blocks.
Das Glücksrad sendet beim Antippen nichts an MailInApp zurück — es wird nirgendwo eine Stimme, Einreichung oder ein Freilegungsereignis erfasst. Das bedeutet, es erscheint nie im Antworten-Dashboard, im CSV-Export oder in der Klick-Heatmap (die nur einfache button-/image-/social-/generische element-Links erfasst, und der Button des Glücksrads ist nicht über diesen Mechanismus angebunden). Wenn du wissen musst, wie viele Personen tatsächlich mit dem Rad interagiert haben, platziere den Preislink auf einer Landing Page, die du selbst kontrollierst, und miss ihn dort. Alternativ nutze die Klick-Heatmap an einem button-Block, wenn du die Rad-Animation nicht brauchst.
Konfigurierbare Felder:
- Titel — die Überschrift über dem Rad, plus eigene Farbe und Schriftgröße.
- Button-Label — der Text sowohl auf dem immer sichtbaren Fallback-Button als auch auf dem enthüllten Preis-Button (Standard „Versuch dein Glück“).
- Preislink — wohin der Button/die Enthüllung verweist. Leer gelassen, greift das gemailte HTML auf die eigene gehostete Live-Ansicht-URL des Blocks zurück statt auf einen toten Link; die Live-Ansicht selbst rendert überhaupt nur dann einen Button, wenn dieser gesetzt ist (sie hat kein eigenes Fallback-Ziel, auf das sie zurückfallen könnte).
- Hintergrundfarbe, Innenabstand, Rahmen und Rahmenradius der Karte.
- Button-Textfarbe und Button-Hintergrundfarbe — standardmäßig die
$accent- und$brand-Theme-Tokens des Projekts, sodass es von Haus aus zu deiner Marke passt.
Die Rad-Grafik selbst (der Kegelgradient-Kreis und das 🎡-Emoji) ist nicht konfigurierbar — nur der umgebende Text, Link und das Karten-Styling sind es.
Beispiele
Subject
You've got a spin waiting
Ein Händler mit einem Flash-Sale kann einen Glücksrad-Block in eine Werbe-Sendung einfügen, wobei der Preislink direkt auf eine Rabattcode-Landingpage oder einen vorausgefüllten Warenkorb verweist. Siehe Engagement & Loyalität für das übergreifende Muster, leichte Gamification zur Steigerung der Klickrate einer ansonsten gewöhnlichen Werbe-E-Mail einzusetzen. Die „Danke, dass du Mitglied bist“-Sendung eines Treueprogramms kann es als Ein-Klick-„Belohnung einlösen“-Moment statt eines einfachen Buttons nutzen, da die Dreh-Animation eher wie ein Ereignis wirkt als ein statischer Link. Da es keine echte Randomisierung gibt, funktioniert es auch überall gut, wo du den gefühlten Spaß eines gamifizierten Mechanismus möchtest, ohne tatsächlich zu variieren, was unterschiedliche Empfänger erhalten — z. B. ein einziger seitenweiter Rabattcode, den alle einlösen sollen.
So sieht der statische Fallback aus
<div id="em-spin-1" style="margin:12px 0;text-align:center;background-color:transparent">
<p style="margin:0 0 10px;font-weight:700;font-size:18px;color:#111827">
Spin to win!
</p>
<a href="https://acme.example.com/spin-reward"
style="display:inline-block;padding:10px 20px;background-color:#4f46e5;
color:#ffffff;border-radius:6px;text-decoration:none;
font-size:14px;font-weight:600">
Try your luck
</a>
<!-- kinetic wheel + reveal markup omitted — hidden from Outlook,
CSS-hidden everywhere else once this fallback link is visible -->
</div>
Der immer vorhandene Button ist ein einfacher <a href> direkt zum konfigurierten Preislink (oder zur Live-Ansicht-URL, falls keiner gesetzt wurde) — kein /act-Bestätigungsschritt, da nichts erfasst wird.