Banners en dynamische banners voor bladerpagina's maken

Een banner is een item dat wordt weergegeven op een bladerpagina van een collectie. Er zijn twee typen banners:

Basisbanners: een basisbanner is een afbeelding die wordt weergegeven op de bladerpagina. Bij het tikken op een banner gebeurt er niets of wordt er een actie uitgevoerd. Zo kan het tikken op een banner een webpagina starten, een koppeling naar een ander artikel of andere collectie openen, of een e-mail, tekstbericht of telefoongesprek verzenden. Banners zijn ook handig om merknamen te tonen of visuele scheiding in een bladerpagina aan te brengen.

Dynamische banners: een dynamische banner toont HTML-inhoud op een bladerpagina. Met dynamische banners kunnen bijvoorbeeld aandelenkoersen, presentatiecarrousels of feeds van sociale media worden weergeven. U kunt Cordova-plug-ins gebruiken om te profiteren van specifieke functies van AEM Mobile, zoals gebruikers de mogelijkheid bieden om op een dia in een banner te tikken om naar een ander artikel te navigeren of om de aanmeldingsprompt voor machtiging weer te geven. 

Basisbanners

Het uiterlijk van de banner wordt bepaald door de kaart waaraan de banner wordt toegewezen. De bannerafbeelding wordt zo nodig gecentreerd, geschaald en bijgesneden om het kaartgebied te vullen waaraan de afbeelding is toegewezen. Maak een bannerafbeelding die groot genoeg is voor een goede weergave op de kaart. Zie Inhoud optimaliseren voor AEM Mobile.

  1. Klik bij Inhoud en lay-outs op Inhoud en klik vervolgens op Toevoegen > Banner toevoegen.

  2. Geef een bannernaam op die uniek is voor het project.

  3. Geef de metagegevens voor de banner op. 

    Als u wilt, kunt u metagegevens toevoegen om de banner te onderscheiden van andere inhoud wanneer u toewijzingsregels gebruikt om inhoud aan kaarten toe te wijzen.

  4. Geef aan wat er gebeurt als er op de banner wordt getikt.

    Selecteer Geen als er niets moet gebeuren als de gebruiker op de banner tikt.

    Als u wilt dat er een actie wordt uitgevoerd als er op de banner wordt getikt, kiest u een van de volgende opties:

    http:// - hiermee wordt de opgegeven webpagina (http: of https:) in een browser in de app geopend als de gebruiker op de banner tikt.

    Bijvoorbeeld: http://www.adobe.com/nl.

    navto:// – hiermee gaat u direct naar het opgegeven artikel of de opgegeven collectie. Let op: koppelingen naar paginanummers binnen een artikel worden niet ondersteund. Zie Hyperlinks in AEM Mobile-artikelen voor informatie over navto-notaties.

    Voorbeeld: navto://collectie/koffieproducten

    mailto: - gebruikt de standaardapp voor e-mail van het apparaat om een e-mailbericht te verzenden.

    Eenvoudig voorbeeld: mailto:jane@voorbeeld.com

    Uitgebreid voorbeeld: mailto:jane@voorbeeld.com?cc=maria@voorbeeld.com&subject=Nogmaals%20Bedankt&body=Bedankt%20voor%20al%20je%20hulp.%0D%0A%0D%0ANieuwe%20regel.

    sms: - gebruikt de berichtenapp van het apparaat om een tekstbericht te verzenden.

    Eenvoudig voorbeeld: sms:1-206-555-2323

    Uitgebreid voorbeeld (iOS): sms:+1206-555-2323&body=Text%20message

    Uitgebreid voorbeeld (Android): sms:+1206555-2323?body=Text%20message

    tel: – gebruikt de telefoonapp van het apparaat om een telefoonoproep te plaatsen.

    Voorbeeld: tel:1-206-555-2323

    Navigeren naar startcollectie: hiermee keert de gebruiker terug naar het eerste artikel of de eerste collectie in de collectie op het hoogste niveau.

    Teruggaan: hiermee keert de gebruiker terug naar de vorige bladerpagina of het vorige artikel van waaruit de gebruiker heeft getikt of geklikt om naar de huidige bladerpagina te navigeren. (Teruggaan is niet van toepassing op veeggebaren voor mobiele apparaten.)

    De acties mailto, sms en tel worden alleen ondersteund op mobiele apparaten. De acties hebben geen effect in de bureaubladwebviewer.

  5. Gebruik het tabblad Afbeeldingen om de bannerafbeelding te uploaden.

    Als u geen afbeelding voor uw banner wilt gebruiken, omdat u bijvoorbeeld alleen de bannertitel of een kleur wilt weergeven, kunt u een afbeeldingsbestand uploaden en vervolgens een kaart maken waarop de afbeelding niet wordt weergegeven.

  6. Voeg de banner toe aan een collectie. Zorg ervoor dat de banner correct binnen de collectie (bijvoorbeeld bovenaan) wordt gepositioneerd, zodat de banner op de juiste locatie op de bladerpagina wordt weergegeven.

  7. Bewerk zo nodig een lay-outsjabloon om een kaart op te nemen waarop de banner wordt weergegeven.

    U kunt bijvoorbeeld een kaart voor de breedte van het apparaat maken en vervolgens een regel maken waarmee de kaart wordt toegewezen aan elke banner. Zie Kaarten en lay-outs maken.

Dynamische banners

Dynamische banners geven HTML-inhoud op bladerpagina's weer.

  • Als u meerdere dynamische banners gebruikt op een bladerpagina, moet u de werking op de doelapparaten testen om er zeker van te zijn dat deze betrouwbaar is. Als het laden van de bladerpagina te lang duurt of als er andere problemen optreden, is het wellicht verstandig om minder dynamische banners te gebruiken op de bladerpagina.
  • Het gebruik van miniatuurafbeeldingen voor banners is optioneel. Afbeeldingen kunnen nuttig zijn als de gebruiker offline is of voor weergave achter transparante HTML-inhoud.
  • Als u Cordova-plug-ins gebruikt in uw dynamische banner, zorg er dan voor dat u Uitbreidingsmogelijkheden inschakelen selecteert in de eigenschappen van de dynamische banner.
  • Als u in uw HTML-bestanden naar externe inhoud verwijst, kunt u het beste het HTTPS-protocol gebruiken in plaats van HTTP. De bureaubladwebviewer vereist HTTPS-protocollen.
  • U kunt het element <video playsinline autoplay> gebruiken om een video in de dynamische banner automatisch af te spelen. Als de video automatisch wordt afgespeeld voordat de banner verschijnt, kunt u overwegen een JavaScript te gebruiken dat de video afspeelt bij de gebeurtenis window.onAppear en de video pauzeert bij de gebeurtenis window.onDisappear.

 

Dynamische banners (video)

Dynamische banners (video)

Voorbeeld van machtigingsbanner

Gebruik deze HTML-inhoud om een dynamische banner voor machtiging te maken. Als de gebruiker niet is aangemeld, wordt er een aanmeldingsprompt weergegeven in de banner. Als de gebruiker is aangemeld, wordt er een afmeldknop weergegeven in de banner. Wanneer u de dynamische banner maakt, zorg er dan voor dat u Uitbreidingsmogelijkheden inschakelen selecteert om Cordova-plug-ins in te schakelen.

Downloaden

Dynamische banners maken

  1. Maak uw HTML-inhoud en genereer een artikelbestand.

  2. Klik bij Inhoud en lay-outs op Inhoud en klik vervolgens op Toevoegen > Dynamische banner toevoegen.

  3. Geef een bannernaam op die uniek is voor het project.

  4. Geef de metagegevens voor de banner op. 

    Als u wilt, kunt u metagegevens toevoegen om de banner te onderscheiden van andere inhoud wanneer u toewijzingsregels gebruikt om inhoud aan kaarten toe te wijzen.

    Opmerking:

    Als uw HTML-inhoud verwijzingen naar Cordova-plug-ins bevat, moet u ervoor zorgen dat u Uitbreidingsmogelijkheden inschakelen selecteert.

  5. Gebruik het tabblad Afbeeldingen om de bannerafbeelding te uploaden.

    Het gebruik van een bannerafbeelding is optioneel. Een bannerafbeelding kan nuttig zijn als het apparaat offline is of als achtergrond voor transparante HTML-inhoud.

  6. Gebruik het tabblad Inhoudsbestand om het artikelbestand met uw HTML-inhoud te uploaden.

  7. Als de dynamische banner een advertentie is, gebruikt u het tabblad Advertentie om informatie voor analytische gegevens op te geven.

  8. Voeg de banner toe aan een collectie. Zorg ervoor dat de banner correct binnen de collectie (bijvoorbeeld bovenaan) wordt gepositioneerd, zodat de banner op de juiste locatie op de bladerpagina wordt weergegeven.

  9. Bewerk zo nodig een lay-outsjabloon om een kaart op te nemen waarop de banner wordt weergegeven.

    U kunt bijvoorbeeld een kaart voor de breedte van het apparaat maken en vervolgens een regel maken waarmee de kaart wordt toegewezen aan elke banner. Zie Kaarten en lay-outs maken.

Dit werk is gelicentieerd onder de Creative Commons Naamsvermelding/Niet-commercieel/Gelijk delen 3.0 Unported-licentie  De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.

Juridische kennisgevingen   |   Online privacybeleid