Verwendung des HTML-Blocks in Infoseiten

So fügen Sie einen HTML-Block hinzu

1. Öffnen Sie den Editor Ihrer Infoseite

2. Scrollen Sie zu den Spezialblöcken und wählen Sie „HTML“

3. Es stehen Ihnen zwei Optionen zur Verfügung: Nutzen Sie den integrierten KI-Assistenten oder wechseln Sie zur Registerkarte „HTML“, um den Code direkt einzufügen

✨ Zwei Möglichkeiten, Ihren Code zu generieren

Option A: Verwenden Sie den integrierten KI-Assistenten

Im HTML-Block gibt es einen integrierten KI-Assistenten. Beschreiben Sie einfach in einfacher Sprache, was Sie möchten:

„Erstelle ein gestaltetes Banner mit fettgedrucktem weißem Text auf orangefarbenem Hintergrund, auf dem steht: Begrenzte Plätze verfügbar, jetzt bewerben!“

Du siehst sofort eine Vorschau des Endergebnisses im Block darunter!

Nicht ganz richtig? Bitten Sie ihn einfach um eine Anpassung:

„Mach den Hintergrund dunkler“ oder „Füge abgerundete Ecken hinzu“

Wenn du mit dem Ergebnis zufrieden bist, klicke auf „Speichern“, und der Block wird deiner Seite hinzugefügt. 

Option B: ChatGPT extern nutzen

Gehen Sie auf ChatGPT und bitten Sie das Tool, den Code für Sie zu schreiben:

„Schreibe mir ein eigenständiges HTML- und CSS-Snippet (kein JavaScript) für [beschreibe, was du willst]. Es sollte übersichtlich und mobilfreundlich sein und als eigenständiger Block auf einer Seite funktionieren.“

Kopiere dann das Ergebnis und füge es direkt in den HTML-Tab ein.

💡 Sieht etwas seltsam aus? Fügen Sie den Code wieder in ChatGPT ein und sagen Sie: „Das wird nicht richtig angezeigt, können Sie das beheben?“ Es wird das Problem für Sie beheben.

🎨 Ideen: Was kannst du hinzufügen?

Dies sind Dinge, die du mit den Standardblöcken nicht erstellen kannst, die sich aber mit dem HTML-Block leicht umsetzen lassen.

1. ⚡ Dringlichkeitsbanner

Ein auffälliges Banner in voller Breite, um eine wichtige Botschaft hervorzuheben. Ideal für zeitlich begrenzte Angebote, Fristen oder wichtige Hinweise.

Eingabeaufforderung:

„Erstelle ein HTML- und CSS-Banner in voller Breite mit auffälligem weißem Text auf rotem/orangefarbenem Hintergrund, das lautet: ‚🔥 Begrenzte Plätze, bewerbe dich vor dem [Datum]‘. Zentriert, ohne JavaScript.“

2. 📊 Statistik-/Zahlenzeile

Eine übersichtliche Zeile mit 3–4 eindrucksvollen Zahlen (z. B. Mitglieder, Länder, Jahre Erfahrung). Viel wirkungsvoller, als sie in einem Absatz aufzulisten.

Anleitung zur Verwendung:

„Erstelle eine HTML- und CSS-Statistikzeile mit 3 Elementen: [500+ Mitglieder], [12 Länder], [5 Jahre]. Große, fette Zahlen, kleine Beschriftung darunter, gleichmäßiger Abstand, mobilfreundlich.“

3. 🏅 Vertrauens-/Garantie-Badge

Ein Element im Badge-Stil, das Glaubwürdigkeit schafft, wie „100 % kostenlose Mitgliedschaft“ oder „Keine Erfahrung erforderlich“.

Anleitung zur Verwendung:

„Erstelle ein HTML- und CSS-Vertrauensabzeichen mit einem Schild-Symbol, der fettgedruckten Überschrift ‚100 % kostenlose Mitgliedschaft‘ und einem kurzen Untertitel: ‚Keine Vorkenntnisse erforderlich, wir begleiten dich bei jedem Schritt‘. Zentriert, grün und weiß.“

4. 🎨 Abschnittsunterteilung mit Titel

Ein Farbverlaufsband, um Abschnitte Ihrer Seite optisch voneinander zu trennen und einen professionellen Eindruck zu vermitteln.

Eingabeaufforderung:

„Erstelle einen HTML- und CSS-Trennbalken in voller Breite mit einem Farbverlauf in Lila und Blau und zentriertem weißem Text mit der Aufschrift ‚Warum sich Menschen für uns entscheiden‘. Klar und modern.“

5. 🗺️ Eingebettete Karte

Wenn Sie einen physischen Standort oder Veranstaltungsort haben, betten Sie eine Google-Karte direkt in Ihre Seite ein.

So erhalten Sie den Einbettungscode:

1. Öffnen Sie Google Maps und suchen Sie nach Ihrem Standort

2. Klicken Sie auf „Teilen“, dann auf „Karte einbetten“ und kopieren Sie den HTML-Code

3. Fügen Sie ihn in den HTML-Tab Ihres Blocks ein

📊 Einbetten Ihres Facebook-Pixels

Was ist das Facebook-Pixel?

Das Facebook-Pixel ist ein kleiner Code, den Sie Ihrer Seite hinzufügen. Sobald es aktiv ist, verfolgt es, wer Ihre Infoseite besucht, und sendet diese Daten an Ihr Facebook-Werbeanzeigenkonto zurück. Damit können Sie:

• Besucher erneut ansprechen: Zeigen Sie Anzeigen gezielt Personen an, die Ihre Seite bereits angesehen haben

• Lookalike-Zielgruppen erstellen: Finden Sie neue Personen, die Ihren bestehenden Besuchern ähnlich sind

• Ihre Anzeigenleistung messen: Sehen Sie, ob Ihre Facebook-Anzeigen tatsächlich Traffic auf Ihre Seite lenken

Kurz gesagt: Wenn Sie Facebook-Anzeigen schalten, verwandelt das Pixel Ihre Infoseite in ein vollwertiges Marketing-Tool.

Schritt 1: Holen Sie sich Ihre Pixel-ID von Meta

1. Gehen Sie zu Meta Business Manager und melden Sie sich an

2. Klicken Sie im Menü auf der linken Seite auf „Alle Tools“

3. Scrolle im sich öffnenden Menü nach unten und klicke auf „Events Manager“

4. Suchen Sie im Events Manager im Menü auf der linken Seite nach „Datenquellen“, klicken Sie darauf und wählen Sie dann „Pixel“

5. Ihr Pixel wird aufgelistet – die Pixel-ID ist die 15- bis 16-stellige Nummer, die unter dem Namen des Pixels angezeigt wird

6. Wenn Sie noch kein Pixel haben, klicken Sie auf „Datenquellen verbinden“ → „Web“ und folgen Sie den Einrichtungsschritten

Schritt 2: Fügen Sie das Pixel zu Ihrer Infoseite hinzu

1. Fügen Sie auf Ihrer Infoseite einen HTML-Block hinzu

2. Wechseln Sie zur Registerkarte „HTML“.

3. Fügen Sie Folgendes ein und ersetzen Sie dabei YOUR_PIXEL_ID durch Ihre tatsächliche ID:

html

<!-- Meta Pixel Code --><script>!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window, document,'script','https://connect.facebook.net/en_US/fbevents.js');fbq('init', 'YOUR_PIXEL_ID');fbq('track', 'PageView');</script><noscript><img height="1" width="1" style="display:none"src="https://www.facebook.com/tr?id=YOUR_PIXEL_ID&ev=PageView&noscript=1"/></noscript><!-- End Meta Pixel Code -->

4. Speichern Sie den Block

Schritt 3: Überprüfen Sie, ob es funktioniert

1. Installieren Sie die Chrome-Erweiterung „Meta-Pixel-Helfer“ (kostenlos)

2. Rufen Sie Ihre veröffentlichte Infoseite auf

3. Klicken Sie auf das Erweiterungssymbol. Wenn Ihre Pixel-ID mit einem grünen ✅ angezeigt wird, ist alles bereit

⚠️ Ein Hinweis zum Datenschutz

Wenn du das Facebook-Pixel verwendest, stelle sicher, dass deine Seite einen kurzen Hinweis darauf enthält, etwa: „Diese Seite verwendet Tracking-Tools, um dein Erlebnis zu verbessern.“ So hältst du Datenschutzbestimmungen wie die DSGVO ein.

📊 Conversions mit dem Meta Pixel verfolgen (Custom Conversion Setup)

Nachdem du dein Meta Pixel in deinen HTML-Block eingefügt hast und sichergestellt hast, dass deine Seite Events korrekt auslöst, ist der letzte Schritt, eine Custom Conversion in Meta zu erstellen, um Ergebnisse zu messen und zu optimieren.

🔧 Schritt 1: Öffne den Events Manager

1. Öffne den Meta Events Manager

2. Wähle dein Pixel (z. B. Saga Pixel)

3. Klicke auf Erstellen → Custom Conversion

🧩 Schritt 2: Custom Conversion konfigurieren

Du siehst einen Bildschirm wie diesen:

• Name: Gib deiner Conversion einen klaren Namen(z. B. „Linkmate Besuch“ oder „Saga Outbound Klick“)

• Datenquelle: Wähle dein Pixel

• Aktionsquelle: Website auswählen

• Event: Alle URL-Aufrufe auswählen

📌 Schritt 3: Regel hinzufügen

Unter Regeln musst du definieren, wann die Conversion ausgelöst wird.

Setze es genau so:

• URL → enthält →

https://linkmate.one/ 

💡 Was das bewirkt

Diese Einstellung ermöglicht dir:

• Outbound-Klicks oder Weiterleitungen über Linkmate zu tracken

• Die Performance deiner HTML-Block-Links zu messen

• Anzeigen auf echte Aktionen statt nur Seitenaufrufe zu optimieren

✅ Schritt 4: (Optional) Conversion-Wert hinzufügen

Falls relevant, kannst du „Conversion-Wert eingeben“ aktivieren und einen Wert festlegen.

🚀 Schritt 5: Speichern & testen

1. Klicke auf Erstellen

2. Gehe zu Test Events im Events Manager

3. Besuche deine Seite und löse den Link aus

4. Prüfe, ob die Conversion erfasst wird

🧠 Pro-Tipp

Wenn du Ads schaltest, wähle diese Custom Conversion als Optimierungs-Event im Ads Manager aus.

💬 Benötigen Sie Hilfe?

Wenn du Hilfe benötigst oder Fragen hast:

• Support-Center: Benötigen Sie Hilfe? Starten Sie einen Chat mit dem Fibi-KI-Agenten in Ihrem SAGA. Falls dieser Ihnen nicht weiterhelfen kann, übernimmt ein menschliches Teammitglied.

• Anruf vereinbaren: Planen Sie eine Demo mit unserem Team