Content-Varianten

Das Prinzip: füllen, nie umbauen

Das hochgeladene Bundle ist die Default-Variante. Eine Content-Variante ist nur eine Liste Slot-Id → Wert; beim Ausliefern setzt der Edge-Worker diese Werte in die passenden Elemente ein. Kein Liquid, keine Bedingungen, keine Schleifen: Varianten können füllen, nie umbauen.

Daraus folgen drei Zusagen, auf die du dich verlassen kannst:

• Fehlender oder leerer Wert → der eingebaute Default bleibt stehen. Eine unvollständige Variante kann konstruktiv keine kaputte Seite ausliefern. Auch ein Wert, der nur aus Leerraum besteht, zählt als „nicht gesetzt“.
• Unbekannter Varianten-Schlüssel → die Default-Seite, ohne Fehler und ohne Umleitung. Ein Tippfehler in einer Anzeigen-URL schaltet keine Kampagne ab.
• Ohne Variante ist die Antwort byte-identisch zu dem, was du hochgeladen hast.

Wer die Struktur ändern will — anderer Aufbau, andere Reihenfolge, andere Bausteine —, braucht keine Content-Variante, sondern eine zweite Seite und einen Split.

Stellen markieren: data-slot

Eine austauschbare Stelle markierst du mit dem Attribut data-slot und einer stabilen Id. Das Attribut steht an dem Element, dessen Inhalt beziehungsweise Adresse ersetzt werden soll.

<section class="hero">
  <h1 data-slot="headline">Beikost, die dein Baby liebt</h1>
  <p data-slot="subline">Vier Sorten, ohne Zusatzstoffe.</p>
  <img data-slot="hero_image" src="/img/hero.jpg" alt="Vier Gläschen Beikost" />
  <a data-slot="cta_link" href="/bestellen">Jetzt bestellen</a>
</section>

Den Typ eines Slots bestimmt das Element, an dem er hängt — du deklarierst ihn nirgends:

Regeln für die Slot-Id

• Klein, a–z und 0–9, - oder _ als Trenner: headline, hero_image, cta-primary. Formal ^[a-z0-9]+(?:[_-][a-z0-9]+)*$. Eine Id mit Großbuchstaben, Umlaut, Punkt oder Leerzeichen im Namen lässt das Veröffentlichen scheitern.
• Die Id benennt die Stelle, nicht den Bausteintyp. hero, section2 oder text1 rächen sich, sobald es zwei Heros gibt.
• Dieselbe Id darf mehrfach vorkommen — ein Wert füllt dann alle Fundstellen (praktisch für eine Headline, die oben und im Sticky-Balken steht).
• Mehrfach, aber nur mit einem Typ. Dieselbe Id einmal an <a> und einmal an <p> ist ein Widerspruch und blockt das Veröffentlichen.

Was ein Text-Slot mit verschachteltem Markup macht

Ein Text-Slot ersetzt den kompletten Inhalt — auch verschachteltes Default-Markup. Aus

<h1 data-slot="headline">Beikost, <em>die dein Baby liebt</em></h1>

wird mit dem Wert Endlich satt genau <h1 data-slot="headline">Endlich satt</h1>; das <em> ist weg. Der Wert wird außerdem als Text eingesetzt, nicht als Markup: Steht <b>fett</b> im Wert, sieht der Besucher die spitzen Klammern. Ein Text-Slot ist eine Copy-Stelle, kein Baukasten.

Wenn die Auszeichnung erhalten bleiben soll, markiere den inneren Teil:

<h1>Beikost, <em data-slot="headline_accent">die dein Baby liebt</em></h1>

Bilder: das srcset-Detail

Beim Ersetzen von src entfernt die Edge ein srcset am selben Element — sonst gewänne es gegen den neuen src und die Variante bliebe unsichtbar. Ein <picture>-Wrapper mit eigenen <source srcset> steht dagegen nicht unter dem Slot (der sitzt am <img>) und bleibt unangetastet; dort schlägt die Variante nicht durch. Markiere austauschbare Bilder deshalb entweder ohne <picture> oder verzichte dort auf <source>.

Ebenfalls wichtig: Ein image-Slot tauscht nur src. Das alt-Attribut bleibt, wie es im Bundle steht — schreib es also so, dass es zu jedem Motiv passt, das du dort erwartest.

Was beim Veröffentlichen passiert

Ein Page-Bundle ist eine .zip-Datei mit index.html im Wurzelverzeichnis. Beim Veröffentlichen eines Stands liest das Backend alle HTML-Dateien des Bundles und zieht daraus das Slot-Schema: je Slot-Id der Typ, der eingebaute Default-Wert und die Fundstellen. Das Schema hängt damit am veröffentlichten Stand, nicht an der Variante.

Zwei Konsequenzen für die Arbeit:

• Kaputtes Slot-Markup geht nicht live. Eine ungültige Id oder widersprüchliche Typen lassen das Veröffentlichen mit einer benannten Fehlermeldung scheitern, statt still eine halbe Seite auszuliefern.
• Die Fläche baut ihr Formular aus dem Schema. Ein Bundle ohne data-slot ergibt eine Variante ohne Felder — die Fläche sagt dann: „Der veröffentlichte Stand dieser Page hat keine markierten Stellen (‚data-slot‘ im Bundle). Ohne sie gibt es nichts zu ersetzen.“ Wer neu markiert hat, muss den Stand also erst veröffentlichen, bevor die Felder erscheinen.

Ein Werte-Set darf nur Slots nennen, die im veröffentlichten Schema stehen. Ein fremder Slot wird abgelehnt (Unknown slot "…" — the value set must be a subset of the published slot schema.) — tote Werte entstehen so gar nicht erst.

Eine Variante anlegen

In der Funnels-Fläche (funnels.trybe.so) unter Pages → deine Page → Content-Varianten → Variante anlegen:

1. Name — nur für die Liste und den Canvas.
2. Schlüssel — die Adresse der Variante, ?v=<Schlüssel>. Klein, Ziffern und Bindestriche, zum Beispiel omega-3-baby. Nach dem Anlegen fest: Anzeigen und Funnel-Arme zeigen darauf.
3. Pfad-Alias (optional) — ein eigener Pfad für dieselbe Seite: mit lisa-baby ist sie zusätzlich unter /lisa-baby erreichbar. Der Alias muss auf der Pages-Domain der Brand eindeutig sein und darf weder einen Page-Pfad noch eine Funnel-Adresse f/<slug> verdecken.
4. Inhalte — je markierter Stelle ein Feld; der eingebaute Wert steht als Platzhalter daneben. Leer heißt „Standard bleibt stehen“.

Danach veröffentlichen: Ausgeliefert wird nur, was veröffentlicht ist. Zum Prüfen gibt es „Ansehen“ — der Besuch hängt ?tf_preview=1 an und zählt nicht in den Zahlen.

Wer welche Variante sieht

Beim Ausliefern entscheidet die Edge in dieser Reihenfolge; die erste bekannte Variante gewinnt:

1. ?v=<Schlüssel> — die explizite Adresse, gedacht für Anzeigen-URLs. Explizit schlägt zugewiesen.
2. Pfad-Alias — /lisa-baby liefert die Hauptseite unter der Alias-URL aus, ohne Weiterleitung. Der Alias-Request bekommt zusätzlich einen <link rel="canonical"> auf den Haupt-Pfad; einen eigenen canonical aus dem Bundle entfernt die Edge dabei, weil zwei widersprüchliche schlimmer wären als keiner.
3. Der Funnel-Kontext — die Variante, die die Stufe für diesen Pfad vorsieht; bei einem Split die des zugewiesenen Arms.

Der Schlüssel, der wirklich eingesetzt wurde, geht als content_variant in den Kontext, den die Edge in die Seite injiziert: gerendert und gemessen sind dieselbe Variante.

Das Tracking musst du übrigens nicht einbauen: Sobald für die Brand ein Pixel-Key und ein Ingest-Endpunkt hinterlegt sind, hängt die Edge den Pixel samt Funnel-Kontext selbst ans Ende des <head>. Seiteneigenes Tracking (GTM, Meta-Pixel) bleibt dabei unangetastet — es wird nur angehängt, nie etwas ersetzt.

Regel-Splits: derselbe Test, andere Verteilung

Ein Split verteilt den Traffic einer Stufe auf mehrere Arme. Zeigen zwei Arme auf dieselbe Page und unterscheiden sich nur in ihrer Content-Variante, ist das der reine Copy-Test — eine Seite, zwei Ansprachen, saubere Zahlen. Zeigen sie auf verschiedene Pages, testest du Aufbauten gegeneinander.

Die URL bleibt dabei unverändert, es gibt keine Weiterleitung auf einen Varianten-Pfad. Gerechnet wird lokal an der Edge, ohne Netz-Aufruf, und die Zuweisung ist sticky: zwei technische First-Party-Cookies (tf_aid für den Besuch, tf_ab_<split_id> für den zugewiesenen Arm) halten sie 90 Tage. Ein Gewichts- oder Versionswechsel trifft damit nur neue Besucher.

Statt nach Zufall kann ein Split auch nach Regel verteilen. Regeln werden vor dem gewichteten Zufall ausgewertet, die erste treffende gewinnt, die Reihenfolge in der Liste ist die Auswertungs-Reihenfolge. Sechs Dimensionen stehen zur Wahl — alle sechs stehen der Edge ohne Nachfrage im Request zur Verfügung:

Verglichen wird mit equals oder contains, ohne Rand-Leerzeichen und ohne Rücksicht auf Groß- und Kleinschreibung (utm_source=Facebook ist dieselbe Quelle wie facebook). Bei referrer_domain ist equals ein Suffix-Treffer auf Label-Grenze: facebook.com trifft auch m.facebook.com, aber nicht notfacebook.com.

Drei Dinge, die im Betrieb regelmäßig überraschen:

• Die vollständige Kette lautet: explizite Varianten-URL → Regel → Cookie → Rest-Ziel (der Arm, den jeder Besucher ohne Kennung bekommt) → gewichteter Zufall. Ein Rückkehrer ohne Kampagnen-Parameter trifft keine Regel und bleibt über sein Cookie auf seinem Arm.
• Ein Regel-Treffer überschreibt eine bestehende Zuweisung und setzt dasselbe Cookie — das ausdrückliche Signal des Requests schlägt die frühere Zuweisung.
• Eine geänderte Regel würfelt niemanden neu. Regeln gehen nicht in die Split-Version ein; eine Korrektur mischt den laufenden Gewichts-Test nicht durch.

Ein Ziel-Arm, den der Split nicht mehr führt, eine unbekannte Dimension, ein leerer Vergleichswert: solche Regeln treffen einfach nie, die folgenden werden weiter ausgewertet. Nichts davon ist ein Fehler, der die Seite kostet.

CTA-Konventionen

Zwei weitere Marker gehören ins Bundle, und beide funktionieren nach demselben Muster wie ein Slot: Du markierst die Stelle, die Adresse kommt beim Ausliefern.

<a class="btn" data-funnel-next href="/beikost">Weiter</a>
<a class="btn btn-buy" data-funnel-offer href="https://happyhug.de/beikost">Jetzt kaufen</a>

• data-funnel-next — die Seite sagt „weiter“, der Canvas sagt wohin. Das Element bekommt das href der Kante, die von dieser Stufe wegführt: entweder den Pfad der Folge-Stufe (/beikost) oder die Shop-Domain der Brand. Die Kante gehört der Stufe, also tragen alle Arme einer Stufe dasselbe Ziel.
• data-funnel-offer — die Seite sagt „kaufen“, der Arm sagt was. Das Element bekommt die fertige Checkout-Adresse des Angebots, das am ausgelieferten Arm hängt. Anders als die Kante gehört das Angebot dem Arm: zwei Arme derselben Stufe können verschiedene Angebote tragen.

Vier Konventionen dazu:

• Setz immer ein sinnvolles href ins Markup. Gibt es kein Ziel — terminale Stufe, Page in keinem Funnel, Arm ohne Angebot —, bleibt genau dieses href stehen. Eine Seite muss auch solo funktionieren.
• Die Marker gehören an <a>. Gesetzt wird href, an jedem markierten Element. Steht der Marker an einem <button>, bekommt es das Attribut trotzdem und tut nichts damit — die Edge rät nicht, was gemeint war.
• Die Attribute bleiben stehen. Sie sind der Marker, nicht der Wert: Bei jeder Auslieferung wird neu gefüllt, und die Publish-Hinweise der Fläche suchen genau danach. Eine Stufe mit Kante, deren Bundle nirgends data-funnel-next trägt, erzeugt beim Veröffentlichen einen Hinweis („die Kante wird nie gelaufen“) — einen Hinweis, keinen Blocker.
• Die Rangfolge an einem Element ist: Angebot vor Kanten-Ziel vor link-Slot vor eingebautem href. Ein Werte-Set kann eine Kante nicht umbiegen; ein data-slot ohne Marker bleibt der Content-Variante überlassen.

Kein ?tf_preview=1 und keine tf_*-Parameter musst du an diese Links hängen: Der Vorschau-Modus klebt am Cookie, und die Shop-Parameter setzt der Pixel beim Klick selbst.

Ein vollständiges Gerüst

Das Minimum, das alle Marker zusammen zeigt — markierte Copy, markiertes Bild, markierter Link und beide CTA-Marker:

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Beikost</title>
  </head>
  <body>
    <main>
      <h1 data-slot="headline">Beikost, die dein Baby liebt</h1>
      <p data-slot="subline">Vier Sorten, ohne Zusatzstoffe.</p>

      <img data-slot="hero_image" src="/img/hero.jpg" alt="Vier Gläschen Beikost" />

      <p>
        <a data-funnel-next href="/beikost-details">Mehr erfahren</a>
      </p>
      <p>
        <a data-funnel-offer href="https://happyhug.de/beikost">Jetzt kaufen</a>
      </p>

      <p>
        <a data-slot="footer_link" href="/datenschutz">Datenschutz</a>
      </p>
    </main>
  </body>
</html>

Als ZIP mit dieser index.html im Wurzelverzeichnis hochladen, Stand veröffentlichen — danach stehen headline, subline, hero_image und footer_link als Felder im Varianten-Formular.

Checkliste vor dem Veröffentlichen

• Jede austauschbare Stelle trägt eine stabile, sprechende data-slot-Id — klein, mit - oder _ getrennt.
• Keine Id kommt an zwei verschiedenen Element-Arten vor.
• Bild-Slots sitzen am <img>, nicht am <picture>; austauschbare Bilder haben kein konkurrierendes <source srcset>.
• Text-Slots sitzen an dem Element, dessen Inhalt wirklich komplett ersetzt werden soll.
• Jeder CTA mit data-funnel-next oder data-funnel-offer ist ein <a> und hat ein brauchbares eingebautes href.
• Der Stand ist veröffentlicht — sonst gibt es weder Felder in der Fläche noch eine Auslieferung an der Edge.