Erstellen von Bannern und dynamischen Bannern

Suchen
Experience Manager Mobile Benutzerhandbuch

Auf dieser Seite

Gilt für: Experience Manager Mobile

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

Banner und dynamische Banner für Durchsuchen-Seiten erstellen

Ein Banner ist ein Element, das auf der Durchsuchen-Seite einer Sammlung angezeigt wird. Es gibt zwei Arten von Bannern:

Einfache Banner – Ein einfaches Banner ist ein Bild, das auf der Durchsuchen-Seite angezeigt wird. Durch Tippen auf ein Banner kann bei Bedarf eine Aktion ausgelöst werden. Beim Tippen auf das Banner kann z. B. eine Webseite geöffnet, ein Link zu einem anderen Artikel oder einer anderen Sammlung aufgerufen, eine E-Mail bzw. Textnachricht gesendet oder eine Telefonnummer gewählt werden. Banner können auch verwendet werden, um das Branding auf einer Durchsuchen-Seite anzuzeigen oder ein visuelles Trennelement einzufügen.

Dynamische Banner – Ein dynamisches Banner zeigt HTML-Inhalte auf einer Durchsuchen-Seite an. Ein dynamisches Banner kann z. B. Aktienkurse, ein Diashow-Karussell oder einen Social Media-Feed enthalten. Wenn Sie Cordova-Zusatzmodule verwenden, können Sie AEM Mobile-spezifische Funktionen nutzen, mit denen Sie Benutzern z. B. ermöglichen, auf eine Folie in einem Banner zu tippen, um zu einem Artikel zu navigieren oder die Anmeldeaufforderung für berechtigte Benutzer aufzurufen.

Einfache Banner

Das Erscheinungsbild des Banners wird durch die Karte vorgegeben, der es zugeordnet ist. Das Bannerbild wird ggf. zentriert, skaliert und zugeschnitten, sodass es den Kartenbereich ausfüllt, in dem es dargestellt wird. Erstellen Sie ein Bannerbild, das groß genug ist, um korrekt in der Karte angezeigt zu werden. Siehe Optimieren von Inhalten in AEM Mobile-Apps.

  1. Klicken Sie in „Inhalt und Layouts“ auf Inhalt und dann auf Hinzufügen > Banner hinzufügen.

  2. Geben Sie einen Bannernamen ein, der für das Projekt eindeutig ist.

  3. Geben Sie die Metadaten für das Banner an.

    Es empfiehlt sich, Metadaten hinzuzufügen, um das Banner von anderen Inhalten abzusetzen, wenn Sie Inhalte mit Zuordnungsregeln zu Karten zuordnen.

  4. Legen Sie fest, was passieren soll, wenn auf das Banner getippt wird.

    Wählen Sie „Ohne“ aus, wenn beim Tippen auf das Banner nichts geschehen soll.

    Für Banneraktionen stehen die folgenden Optionen zur Verfügung:

    http:// – Die angegebene Webseite („http:“ oder „https:“) wird im App-internen Browser geöffnet, wenn der Benutzer auf das Banner tippt.

    Beispiel: http://www.adobe.com

    navto:// – Springt zum festgelegten Artikel bzw. zur angegebenen Sammlung. Beachten Sie, dass Links zu Seitenzahlen innerhalb eines Artikels nicht unterstützt werden. Weitere Informationen zu „navto“-Formaten finden Sie unter Hyperlinks in AEM Mobile-Artikeln.

    Beispiel: navto://collection/coffeeProducts

    mailto: – Verwendet die standardmäßige E-Mail-App des Gerätes, um eine E-Mail-Nachricht zu senden.

    Einfaches Beispiel: mailto:jane@example.com

    Komplexes Beispiel: mailto:jane@example.com?cc=maria@example.com&subject=Nochmals%20danke&body=Vielen%20Dank%20f%C3%BCr%20Ihre%20Unterst%C3%BCtzung.%0D%0A%0D%0Neue%20Zeile.

    sms: – Verwendet die Nachrichten-App des Geräts, um eine Textnachricht zu senden.

    Einfaches Beispiel: sms:1-206-555-2323

    Komplexes Beispiel (iOS): sms:+1206-555-2323&body=Ihre%20Nachricht

    Komplexes Beispiel (Android): sms:+1206555-2323?body=Ihre%20Nachricht

    tel: – Verwendet die Telefon-App des Geräts für einen Telefonanruf.

    Beispiel: tel:1-206-555-2323

    Zur Startsammlung wechseln – Kehrt zurück zum ersten Artikel bzw. zur ersten Sammlung in der Sammlung auf der obersten Navigationsebene.

    Zurück navigieren – Kehrt zur vorigen Durchsuchen-Seite bzw. zum vorigen Artikel zurück, von dem aus der Benutzer durch Tippen bzw. Klicken die aktuelle Durchsuchen-Seite aufgerufen hat. (Blättergesten sind auf Mobilgeräten von der Zurück-Navigation ausgeschlossen.)

    Die Aktionen „mailto“, „sms“ und „tel“ werden nur auf Mobilgeräten unterstützt. Im Web Viewer für den Desktop haben sie keine Auswirkungen.

  5. Laden Sie das Bannerbild auf der Registerkarte Bilder hoch.

    Wenn Sie kein Bild für das Banner verwenden möchten (um beispielsweise nur den Bannertitel oder eine Farbe anzuzeigen), können Sie eine beliebige Bilddatei hochladen und anschließend eine Karte erstellen, auf der das Bild nicht angezeigt wird.

  6. Fügen Sie das Banner einer Sammlung hinzu. Vergewissern Sie sich, dass es ordnungsgemäß in der Sammlung platziert ist (z. B. an oberster Stelle), sodass es auf der Durchsuchen-Seite an der gewünschten Position angezeigt wird.

  7. Fügen Sie ggf. über eine Layoutvorlage eine Karte hinzu, auf der das Banner angezeigt wird.

    Sie können beispielsweise eine Karte erstellen, die die Breite des Geräts einnimmt, und Sie können eine Regel erstellen, die die Karte einem Banner zuordnet. Siehe Karten und Layouts erstellen.

Dynamische Banner

Dynamische Banner zeigen HTML-Inhalte auf Durchsuchen-Seiten an.

  • Wenn Sie mehrere dynamische Banner auf einer Durchsuchen-Seite verwenden, stellen Sie durch einen entsprechenden Test auf dem Zielgerät sicher, dass zuverlässig eine gute Leistung erreicht wird. Wenn die Durchsuchen-Seite zu lange lädt oder wenn andere Probleme auftreten, reduzieren Sie ggf. die Anzahl der dynamischen Banner auf der Durchsuchen-Seite.
  • Die Verwendung von Miniaturbildern ist bei Bannern empfehlenswert. Bilder können hilfreich sein, wenn Benutzer offline sind, und als Hintergrund bei transparenten HTML-Inhalten.
  • Wenn Sie in einem dynamischen Banner Cordova-Zusatzmodule verwenden, wählen Sie in den Eigenschaften des dynamischen Banners Erweiterungsfunktionen aktivieren.
  • Wenn Sie in HTML-Dateien auf externe Inhalte verweisen, wird empfohlen, das HTTPS-Protokoll anstelle des HTTP-Protokolls zu verwenden. Für den Web Viewer für den Desktop ist das HTTPS-Protokoll obligatorisch.
  • Sie können mit dem Element <video playsinline autoplay> ein Video im dynamischen Banner automatisch abspielen. Wenn das Video automatisch abgespielt wird, bevor das Banner sichtbar ist, sollten Sie JavaScript-Code verwenden, mit dem das Video beim window.onAppear-Ereignis abgespielt und beim window.onDisappear-Ereignis angehalten wird.

 

Video zu dynamischen Bannern

Video zu dynamischen Bannern

Beispiel für ein Berechtigungsbanner

Verwenden Sie diesen HTML-Inhalt, um ein dynamisches Berechtigungsbanner zu erstellen. Falls der Benutzer nicht angemeldet ist, wird im Banner eine Aufforderung zur Anmeldung angezeigt. Wenn der Benutzer angemeldet ist, wird im Banner eine Schaltfläche „Abmelden“ angezeigt. Achten Sie beim Erstellen des dynamischen Banners darauf, die Option Erweiterungsfunktionen aktivieren auszuwählen, um Cordova-Zusatzmodule zu aktivieren.

Herunterladen

Datei abrufen
Beispiel für ein Berechtigungsbanner

Erstellen von dynamischen Bannern

  1. Erstellen Sie den HTML-Inhalt und generieren Sie eine Artikeldatei.

    (Siehe Erstellen von HTML-Artikeln für AEM Mobile.)

  2. Klicken Sie in „Inhalt und Layouts“ auf Inhalt und dann auf Hinzufügen > Dynamisches Banner hinzufügen.

  3. Geben Sie einen Bannernamen ein, der für das Projekt eindeutig ist.

  4. Geben Sie die Metadaten für das Banner an.

    Es empfiehlt sich, Metadaten hinzuzufügen, um das Banner von anderen Inhalten abzusetzen, wenn Sie Inhalte mit Zuordnungsregeln zu Karten zuordnen.

    Hinweis:

    Wenn Ihr HTML-Inhalt Verweise auf Cordova-Zusatzmodule enthält, wählen Sie Erweiterungsfunktionen aktivieren.

  5. Laden Sie das Bannerbild auf der Registerkarte Bilder hoch.

    Die Verwendung eines Bannerbilds ist optional. Bannerbilder können hilfreich sein, wenn Geräte offline sind, und als Hintergrund bei transparenten HTML-Inhalten.

  6. Über die Registerkarte Inhaltsdatei können Sie die Artikeldatei mit Ihrem HTML-Inhalt hochladen.

  7. Wenn das dynamische Banner eine Anzeige ist, können Sie auf der Registerkarte Werbung die Einstellungen für die Analysedaten festlegen.

  8. Fügen Sie das Banner einer Sammlung hinzu. Vergewissern Sie sich, dass es ordnungsgemäß in der Sammlung platziert ist (z. B. an oberster Stelle), sodass es auf der Durchsuchen-Seite an der gewünschten Position angezeigt wird.

  9. Fügen Sie ggf. über eine Layoutvorlage eine Karte hinzu, auf der das Banner angezeigt wird.

    Sie können beispielsweise eine Karte erstellen, die die Breite des Geräts einnimmt, und Sie können eine Regel erstellen, die die Karte einem Banner zuordnet. Siehe Karten und Layouts erstellen.