Einstiegsseiten landing-pages

Mit der Funktion für Einstiegsseiten können Sie schnell und einfach ein Design und Inhalte direkt in eine AEM-Seite importieren. Ein Web-Entwickler kann das HTML und zusätzliche Assets vorbereiten, die als komplette Seite oder nur als Teil einer Seite importiert werden können. Die Funktion ist nützlich, um Marketing-Landingpages zu erstellen, die nur für eine begrenzte Zeit aktiv sind und schnell erstellt werden müssen.

Auf dieser Seite wird Folgendes beschrieben:

Die Vorbereitung des Designpakets für den Import wird im Abschnitt Erweitern und Konfigurieren des Design Importers. Die Integration mit Adobe Analytics wird im Abschnitt Integrieren von Einstiegsseiten in Adobe Analytics.

Was sind Landingpages? what-are-landing-pages

Einstiegsseiten sind Websites mit einer oder mehreren Seiten, die den „Endpunkt“ einer Marketingkampagne darstellen – beispielsweise mit E-Mail, Adwords/Bannern oder sozialen Medien. Eine Landingpage kann verschiedenen Zwecken dienen, hat jedoch alle eine gemeinsame Sache - der Besucher sollte eine Aufgabe erfüllen und den Erfolg einer Landingpage definieren.

Die Landingpage-Funktion in AEM ermöglicht es Marketingexperten, mit Web-Designern in Agenturen oder internen Kreativteams zusammenzuarbeiten, um Seitenentwürfe zu erstellen, die einfach in AEM importiert und von Marketing-Experten bearbeitbar sind und unter der gleichen Verwaltung wie die anderen AEM veröffentlicht werden können.

Gehen Sie AEM wie folgt vor, um Landingpages zu erstellen:

Desktop-Einstiegsseiten desktop-landing-pages

Eine Einstiegsseite in AEM sieht wie folgt aus:

Mobile Einstiegsseiten mobile-landing-pages

Eine Einstiegsseite kann auch über eine mobile Version der Seite verfügen. Wenn Sie über eine separate mobile Version der Einstiegsseite verfügen möchten, muss das Importdesign zwei HTML-Dateien aufweisen: index.htm(l) und mobile.index.htm(l).

Der Importvorgang für die Einstiegsseite ist identisch mit jenem für eine normale Einstiegsseite, das Einstiegsseiten-Design verfügt über eine zusätzliche HTML-Datei, die der mobilen Einstiegsseite entspricht. Diese HTML-Datei muss genau wie die Desktop-Einstiegsseiten-HTML ebenfalls über ein Leinwand-div mit id=cqcanvas verfügen und sie unterstützt sämtliche bearbeitbaren Komponenten, die für die Desktop-Einstiegsseite beschrieben sind.

Die mobile Einstiegsseite wird als untergeordnetes Element der Desktop-Einstiegsseite erstellt. Um sie zu öffnen, navigieren Sie zur Landingpage in Websites und öffnen Sie die untergeordnete Seite.

Komponenten der Landingpage landing-page-components

Um Teile des HTML zu markieren, damit diese beim Import in AEM bearbeitbar bleiben, können Sie Inhalt im Einstiegsseiten-HTML direkt AEM-Komponenten zuweisen. Das Design Importer versteht standardmäßig die folgenden Komponenten:

Außerdem ist es möglich, dies zu erweitern und benutzerdefinierte Komponenten zu unterstützen. In diesem Abschnitt werden die Komponenten detailliert beschrieben.

Text text

Mit der Text-Komponente können Sie über einen WYSIWYG-Editor einen Textblock eingeben. Siehe Textkomponente für weitere Informationen.

Im Folgenden finden Sie ein Beispiel für eine Text-Komponente auf einer Einstiegsseite:

Titel title

In der title-Komponente können Sie einen Titel anzeigen und die Größe konfigurieren (h1-6). Siehe Titelkomponente für weitere Informationen.

Im Folgenden finden Sie ein Beispiel für eine Titel-Komponente auf einer Einstiegsseite:

Bild image

Die image-Komponente zeigt ein Bild an, das Sie entweder per Drag-and-Drop aus dem Content Finder ziehen oder per Klick hochladen können. Siehe Bildkomponente für weitere Informationen.

Im Folgenden finden Sie ein Beispiel für eine Bild-Komponenten auf einer Einstiegsseite:

Aktionsaufruf (CTA) call-to-action-cta

Ein Landingpage-Entwurf kann mehrere Links enthalten - einige davon können als "Aktionsaufrufe"gedacht sein.

Aktionsaufrufe (CTA) werden verwendet, um Besucher dazu zu bringen, sofort auf der Landingpage Maßnahmen zu ergreifen, z. B. "Jetzt anmelden", "Dieses Video anzeigen", "Nur für begrenzte Zeit"usw.

Beide CTA-Komponenten verfügen über ähnliche Optionen. Der Click Through-Link verfügt über zusätzliche Rich-Text-Optionen. Die Komponenten werden in den folgenden Absätzen ausführlich beschrieben.

Click Through-Link click-through-link

Diese CTA-Komponente kann dazu verwendet werden, der Einstiegsseite einen Textlink hinzuzufügen. Der Benutzer kann auf den Link klicken und wird dann zur in den Komponenteneigenschaften angegebenen URL weitergeleitet. Sie ist Teil der Gruppe "Aktionsaufruf".

Beschriftung: Der Text, den Benutzer sehen. Sie können die Formatierung mit dem Rich-Text-Editor anpassen.

Ziel-URL: Geben Sie den URI ein, zu dem Benutzer beim Klicken auf den Text weitergeleitet werden sollen.

Rendering-Optionen: Beschreibt Render-Optionen. Sie können aus folgenden Optionen auswählen:

CSS: Geben Sie auf der Registerkarte „Stil“ einen Pfad zu Ihrem CSS-Stylesheet ein.

ID: Geben Sie auf der Registerkarte „Stil“ eine eindeutige ID für die Komponente ein.

Im Folgenden finden Sie ein Beispiel für einen Clickthrough-Link:

Grafischer Link graphical-link

Diese CTA-Komponente kann dazu verwendet werden, ein beliebiges grafisches Bild mit Link auf der Einstiegsseite hinzuzufügen. Beim Bild kann es sich um eine einfache Schaltfläche oder um ein grafisches Bild als Hintergrund handeln. Wenn der Benutzer auf das Bild klickt, wird er zur in den Komponenteneigenschaften angegebenen Ziel-URL weitergeleitet. Es ist Teil der Aktionsaufruf hinzugefügt.

Beschriftung: Der Text, der Benutzern in der Grafik angezeigt wird. Sie können die Formatierung mit dem Rich-Text-Editor anpassen.

Ziel-URL: Geben Sie den URI ein, zu dem Benutzer beim Klicken auf das Bild weitergeleitet werden sollen.

Rendering-Optionen: Beschreibt Render-Optionen. Sie können aus folgenden Optionen auswählen:

CSS: Geben Sie auf der Registerkarte „Stil“ einen Pfad zu Ihrem CSS-Stylesheet ein.

ID: Geben Sie auf der Registerkarte „Stil“ eine eindeutige ID für die Komponente ein.

Im Folgenden finden Sie ein Beispiel für einen grafischen Link:

Lead-Formular für Aktionsaufrufe (CTA) call-to-action-cta-lead-form

Ein Lead-Formular ist ein Formular, das dazu verwendet wird, die Informationen eines Besuchers/Leads zu sammeln. Diese Informationen können gespeichert und später dazu verwendet werden, anhand dieser Informationen effizientes Marketing durchzuführen. Die Informationen enthalten im Allgemeinen Titel, Namen, E-Mail, Geburtsdatum, Adresse, Interessen usw. Es ist Teil der CTA-Lead-Formular hinzugefügt.

Ein Beispiel für ein CTA-Lead-Formular sieht wie folgt aus:

CTA-Lead-Formulare bestehen aus verschiedenen Komponenten:

Oben sehen Sie ein Beispielformular. Es besteht aus der Komponente Lead-Formular (Start und Ende) mit den Eingabefeldern Vorname und E-Mail-Adresse sowie einem Feld Senden.

Im Sidekick sind folgende Komponenten für das CTA-Lead-Formular verfügbar:

Allgemeine Einstellungen für viele Lead-Formular-Komponenten settings-common-to-many-lead-form-components

Obwohl jede der Lead-Formular-Komponenten einen anderen Zweck hat, bestehen viele aus ähnlichen Optionen und Parametern.

Wenn Sie eine der Formularkomponenten konfigurieren, stehen die folgenden Registerkarten im Dialogfeld zur Verfügung:

Lead-Formularkomponenten lead-form-components

Im folgenden Abschnitt werden die Komponenten beschrieben, die für Aktionsaufruf-Lead-Formulare verfügbar sind.

Über: Bietet Benutzern die Möglichkeit, Informationen hinzuzufügen.

Adressfeld: Ermöglicht Benutzern die Eingabe von Adressinformationen. Wenn Sie diese Komponente konfigurieren, müssen Sie im Dialogfeld den Elementnamen eingeben. Der Elementname ist der Name des Formularelements. Gibt an, wo im Repository die Daten gespeichert werden.

Geburtsdatum: Benutzer können das Geburtsdatum eingeben.

E-Mail: Bietet Benutzern die Möglichkeit, eine E-Mail-Adresse (zur Identifikation) einzugeben.

Vorname: Stellt ein Feld bereit, in dem Benutzer ihren Vornamen angeben können.

Geschlecht: Benutzer können ihr Geschlecht aus einer Dropdown-Liste auswählen.

Nachname: Benutzer können Informationen zum Nachnamen eingeben.

Formular: Fügen Sie diese Komponente hinzu, um Ihrer Einstiegsseite ein Lead-Formular hinzuzufügen. Ein Lead-Formular enthält automatisch die Felder „Beginn des Lead-Formulars“ und „Ende des Lead-Formulars“. Zwischen diesen Feldern fügen Sie die in diesem Abschnitt beschriebenen Lead-Formular-Komponenten hinzu.

Die Lead-Formular-Komponente definiert den Beginn und das Ende eines Formulars mithilfe der Elemente Formular-Start und Formular-Ende. Diese werden immer gepaart, um sicherzustellen, dass das Formular korrekt definiert ist.

Nachdem Sie das Lead-Formular hinzugefügt haben, können Sie den Beginn des Formulars oder das Ende des Formulars konfigurieren, indem Sie auf Bearbeiten in der entsprechenden Leiste.

Beginn des Lead-Formulars

Für die Konfiguration sind zwei Registerkarten verfügbar: Formular und Erweitert:

Dankeseite: Die Seite, auf die verwiesen wird, um Besuchern für ihre Eingabe zu danken. Wenn dies leer gelassen wird, wird das Formular nach der Übermittlung erneut angezeigt.

Workflow starten: Bestimmt, welcher Workflow ausgelöst wird, sobald ein Lead-Formular übermittelt wird.

Post-Optionen Die folgenden Post-Optionen sind verfügbar:

Formular-ID: Mit der Formular-ID wird das Formular eindeutig gekennzeichnet. Verwenden Sie die Formular-ID, wenn sich mehrere Formulare auf einer Seite befinden. Achten Sie darauf, dass die Formulare unterschiedliche IDs haben.

Ladepfad: Dies ist der Pfad zu den Knoteneigenschaften, mit denen vordefinierte Werte in die Formularfelder geladen werden.

Dies ist ein optionales Feld, das den Pfad zu einem Knoten im Repository angibt. Wenn dieser Knoten Eigenschaften hat, die den Feldnamen entsprechen, werden die jeweiligen Felder im Formular vorab mit den Werten dieser Eigenschaften ausgefüllt. Wenn keine Übereinstimmung besteht, steht im Feld der Standardwert.

Client-Überprüfung: Gibt an, ob für dieses Formular eine Client-Überprüfung erforderlich ist (eine Server-Überprüfung findet immer statt). Dies kann in Zusammenarbeit mit der Captcha-Formularkomponente geschehen.

Validierungsressource: Hiermit wird der Ressourcentyp für die Formularvalidierung definiert, wenn Sie das gesamte Lead-Formular (anstatt einzelne Felder) überprüfen möchten.

Wenn Sie das gesamte Formular überprüfen, führen Sie auch eine der folgenden Aufgaben aus:

Aktionskonfiguration: Je nach Auswahl unter Post-Optionen ändert sich die Aktionskonfiguration. Wenn Sie z. B. „Lead erstellen“ auswählen, können Sie konfigurieren, welcher Liste der Lead hinzugefügt werden soll.

Erstellen einer Landingpage creating-a-landing-page

Beim Erstellen einer Landingpage müssen Sie drei Schritte ausführen:

Erstellen einer Importtool-Seite creating-an-importer-page

Damit Sie Ihr Einstiegsseitendesign importieren können, müssen Sie eine Importtool-Seite erstellen. Dies ist z. B. unter einer Kampagne möglich. Mit der Vorlage „Importtool-Seite“ können Sie Ihre komplette HTML-Einstiegsseite importieren. Die Seite enthält ein Dropdown-Feld, in das das Designpaket der Landingpage per Drag & Drop importiert werden kann.

So erstellen Sie eine neue Landingpage:

Vorbereiten der HTML für den Import preparing-the-html-for-import

Vor dem Import des Designpakets muss das HTML vorbereitet werden. Siehe Erweitern und Konfigurieren des Design-Imports für weitere Informationen.

Importieren des Designpakets importing-the-design-package

Wenn Sie eine Importtool-Seite erstellt haben, können Sie ein Designpaket importieren. Details zum Erstellen des Designpakets und der empfohlenen Struktur werden im Abschnitt Erweitern und Konfigurieren des Design-Imports.

Wenn Sie das Designpaket fertig haben, beschreiben die folgenden Schritte, wie Sie das Designpaket auf eine Importtool-Seite importieren.

Arbeiten mit Landingpages working-with-landing-pages

Das Design und die Assets für eine Einstiegsseite werden im Allgemeinen von einem Designer, häufig in einer Agentur, in branchenüblichen Tools wie Adobe Photoshop oder Adobe Dreamweaver erstellt. Wenn das Design vollständig ist, sendet der Designer eine Zip-Datei mit sämtlichen Assets an die Marketing-Abteilung. Der Kontakt im Marketing ist dann dafür verantwortlich, die ZIP-Datei in AEM abzulegen und den Inhalt zu veröffentlichen.

Außerdem muss der Designer unter Umständen nach dem Import Veränderungen an der Einstiegsseite vornehmen, indem er Inhalte bearbeitet oder löscht und die Aktionsaufruf-Komponenten konfiguriert. Schließlich möchte der Marketing-Experte die Landingpage in der Vorschau ansehen und dann die Kampagne aktivieren, um sicherzustellen, dass die Landingpage veröffentlicht wird.

In diesem Abschnitt werden die folgenden Schritte beschrieben:

Wenn Sie das Designpaket importieren, steht oben auf der Landingpage die folgende Symbolleiste zur Verfügung:

Herunterladen des importierten Designpakets downloading-the-imported-design-package

Beim Herunterladen der Zip-Datei können Sie aufzeichnen, welche Zip-Datei mit einer bestimmten Einstiegsseite importiert wurde. Beachten Sie, dass auf einer Seite vorgenommene Änderungen nicht der ZIP-Datei hinzugefügt werden.

Um das importierte Designpaket herunterzuladen, klicken Sie auf Zip herunterladen in der Symbolleiste der Einstiegsseite.

Importinformationen anzeigen viewing-import-information

Sie können jederzeit Informationen zum letzten Import anzeigen, indem Sie auf das blaue Ausrufezeichen oben auf der Landingpage in der klassischen Benutzeroberfläche klicken.

Wenn im importierten Designpaket Probleme auftreten, weil es z. B. auf Bilder/Skripts verweist, die nicht im Paket enthalten sind, werden solche Probleme im Design Importer in Form einer Liste angezeigt. Um die Liste der Probleme anzuzeigen, klicken Sie in der klassischen Benutzeroberfläche in der Symbolleiste der Einstiegsseite auf den Link „Probleme“. Wenn Sie im folgenden Bild auf den Link Probleme klicken, wird das Fenster „Probleme beim Import“ geöffnet.

Zurücksetzen einer Einstiegsseite resetting-a-landing-page

Wenn Sie das Designpaket für Ihre Einstiegsseite erneut importieren möchten, nachdem Sie Änderungen daran vorgenommen haben, können Sie die Einstiegsseite löschen, indem Sie in der klassischen Benutzeroberfläche am oberen Rand der Einstiegsseite auf Entfernen klicken oder in der Touch-optimierten Benutzeroberfläche im Einstellungsmenü auf „Entfernen“ klicken. Dadurch wird die importierte Einstiegsseite gelöscht und stattdessen wird eine leere Import-Tool-Seite erstellt.

Wenn Sie die Einstiegsseite entfernen, können Sie die Inhaltsänderungen löschen. Wenn Sie auf Nein klicken, bleiben Inhaltsänderungen erhalten. Das heißt, dass die Struktur unter jcr:content/importer beibehalten wird und nur die Import-Tool-Seitenkomponente und die Ressourcen in etc/design entfernt werden. Wenn Sie dagegen auf Ja klicken, wird jcr:content/importer ebenfalls gelöscht.

Ändern und Hinzufügen von Komponenten auf einer Landingpage modifying-and-adding-components-on-a-landing-page

Um Komponenten auf der Landingpage zu ändern, doppelklicken Sie darauf, um sie zu öffnen und wie jede andere Komponente zu bearbeiten.

Um Komponenten zur Landingpage hinzuzufügen, ziehen Sie Komponenten per Drag-and-Drop auf die Landingpage - entweder aus dem Sidekick in der klassischen Benutzeroberfläche oder aus dem Bereich Komponenten in der Touch-optimierten Benutzeroberfläche - und bearbeiten Sie sie entsprechend.

Landingpage löschen deleting-a-landing-page

Das Löschen einer Landingpage entspricht dem Löschen einer normalen AEM.

Die einzige Ausnahme besteht darin, dass beim Löschen einer Desktop-Landingpage auch die entsprechende mobile Landingpage gelöscht wird (sofern vorhanden), nicht aber umgekehrt.

Landingpage veröffentlichen publishing-a-landing-page

Sie können die Einstiegsseite und sämtliche abhängigen Elemente genau wie eine normale Seite veröffentlichen.