In diesem Tutorial zeige ich euch, wie ihr eine effektive Landing Page erstellt, die dynamische Formulare verwendet, um Benutzerdaten zu verarbeiten und Downloads bereitzustellen – alles auf derselben Seite. Wir verwenden Mautic und Twig Templates, um dies zu erreichen.
Hintergrund
Ein Kunde fragte mich, wie man eine Landing Page erstellt, die ein Formular anzeigt und die Benutzer nach der Anmeldung nicht weiterleitet, sondern die Seite neu lädt und zur Bestätigung der E-Mail-Adresse auffordert. Nach der Bestätigung wird die Seite erneut geladen und der Download sichtbar gemacht. Dies alles funktioniert hervorragend mit Mautic und dynamischen Inhalten. Wenn jedoch komplexere Abfragen benötigt werden, stoßen die integrierten Funktionen an ihre Grenzen. Hier kommen Twig Templates ins Spiel.
Voraussetzungen
- Mautic-Installation
- Grundkenntnisse in HTML und PHP
- Das Twig Templates Plugin
Schritt 1: Die Landing Page
Wir beginnen mit der Erstellung der Landing Page. Die Seite soll ein Formular anzeigen, das Benutzer ausfüllen können. Wenn sie sich anmelden, lädt die Seite neu und zeigt eine Nachricht zur Bestätigung der E-Mail-Adresse an. Nach der Bestätigung wird der Download sichtbar.
Beispiel einer einfachen Landing Page:
<!DOCTYPE html>
<html>
<head>
<title>PDF Download</title>
</head>
<body>
<div id="content">
<h1>Willkommen auf der Download Seite</h2>
{twigtemplates=1}
</div>
</body>
</html>Wenn du Twigtemplates von Mautic verwendest, musst du die richtige ID (Zahl) bei dem Token {twigtemplates=..} eingeben. Die ID findest du ganz rechts in der Übersicht deiner Twigtemplates in Mautic.
Schritt 2: Das Formular
Wir erstellen ein Formular in Mautic, das die Benutzerdaten erfasst. Dieses Formular wird später in unsere Landing Page integriert.
Beispiel eines Formulars:
- Gehe zu Mautic und erstelle ein neues Formular mit den gewünschten Feldern (z.B. E-Mail-Adresse).
- Speichere das Formular und kopiere den Formular-Code.
Schritt 3: Die Kampagne
Erstelle eine Kampagne, die gestartet wird, sobald das Formular ausgefüllt ist. Die Kampagne soll überprüfen, ob der Benutzer berechtigt ist, den PDF-Download zu erhalten.
Kampagnenstruktur:
- Start: Formular wird ausgefüllt.
- Bedingung: Hat der Benutzer den Tag “pdf_download”?
- Aktion: Wenn ja, Kampagne endet. Wenn nein, sende eine Double-Opt-In-E-Mail.
- Double-Opt-In-E-Mail enthält einen Bestätigungslink mit dem Parameter
DOI=yes. - Nach Bestätigung wird der Tag “pdf_download” gesetzt und der Download-Link freigegeben.
Schritt 4: Twig Templates
Twig ist eine Templating-Engine für Symfony in PHP, die auch von Mautic verwendet wird. Mit Twig können wir dynamische Inhalte erstellen, die je nach Benutzerstatus angezeigt werden.
Beispiel Twig-Template:
{% set has_pdf_download = false %}
{% set has_email = contact.email is not empty %}
{% set doi_param = app.request.get('doi') == 'yes' %}
{% for tag in contact.tags %}
{% if tag == "pdf_download" %}
{% set has_pdf_download = true %}
{% endif %}
{% endfor %}
{% if not has_email %}
<script type="text/javascript" src="//deine-mautic-domain.com/form/generate.js?id=1"></script>
{% elseif has_email and not has_pdf_download and doi_param != 'yes' %}
<p>Wir haben dir gerade eine E-Mail gesendet. Bitte öffne dein Postfach, finde die E-Mail mit dem Titel "Noch ein Schritt zu deinen Downloads" und klicke darin auf den Bestätigungslink.</p>
{% elseif has_email and (has_pdf_download or doi_param == 'yes') %}
<h2>Hole dir hier Managed Mautic:</h2>
<a href="https://hartmut.io/>Zum besten Mautic Hosting</a>
{% endif %}
Schritt 5: Testen und Anpassen
Teste die Landing Page und das Formular, um sicherzustellen, dass alles wie gewünscht funktioniert. Öffne die Seite in einem Inkognito-Fenster und fülle das Formular aus. Überprüfe die erhaltene E-Mail und bestätige die Adresse, um sicherzustellen, dass der Download-Link korrekt angezeigt wird.
Wenn alles funktioniert, kannst du das Design und die Texte nach deinen Wünschen anpassen.
Fazit
Mit Mautic und Twig Templates kannst du effektive und benutzerfreundliche Landing Pages erstellen, die dynamische Inhalte basierend auf Benutzeraktionen anzeigen. Dies verbessert nicht nur die Benutzererfahrung, sondern hilft auch, die Konversionsraten zu steigern.
Wenn du weitere Fragen hast oder Unterstützung benötigst, hinterlasse einen Kommentar oder kontaktiere mich direkt. Viel Erfolg beim Erstellen deiner Landing Pages!