Creating banners and dynamic banners

Search
Experience Manager Mobile User Guide

On this page

Applies to: Experience Manager Mobile

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

Creating banners and dynamic banners for browse pages

A banner is an item that appears in a collection browse page. There are two types of banners:

Basic banners – A basic banner is an image that appears in the browse page. Tapping a banner can either do nothing or it can trigger an action. For example, tapping a banner can launch a web page, link to another article or collection, or send an email, text message, or phone call. Banners are also useful for displaying branding or providing a visual divider in a browse page.

Dynamic banners – A dynamic banner displays HTML content on a browse page. For example, dynamic banners can display stock quotes, slideshow carousels, or social media feeds. By leveraging Cordova plugins, you can take advantage of AEM Mobile specific features such as allowing users to tap a slide in a banner to navigate to an article or to display the entitlement sign-in prompt.  

Basic banners

The appearance of the banner is determined by the card to which it's assigned. The banner image is centered, scaled, and cropped as needed to fill the card area to which it's mapped. Create a banner image that is large enough to display properly within the card. See Optimizing content for AEM Mobile.

  1. In Content & Layouts, click Content, and then click Add > Add Banner.

  2. Specify a banner name that’s unique to the project.

  3. Specify the metadata for the banner.  

    You’ll might want to add metadata to distinguish the banner from other content when you use mapping rules to map content to cards.

  4. Indicate what happens when the banner is tapped.

    Select None if the banner should do nothing when the user taps it.

    If you want the banner to perform an action, choose one of the following options:

    http:// – Opens the specified webpage (http: or https:) in an in-app browser when the user taps the banner.

    Example: http://www.adobe.com

    navto:// – Jumps to the specified article or collection. Note that links to page numbers within an article are not supported. For information about navto formats, see Hyperlinks in AEM Mobile articles.

    Example: navto://collection/coffeeProducts

    mailto: – Uses the device's default email app to send an email message.

    Simple example: mailto:jane@example.com

    Detailed example: mailto:jane@example.com?cc=maria@example.com&subject=Thanks%20Again&body=Thank%20you%20for%20your%20support.%0D%0A%0D%0ANew%20line.

    sms: – Uses the device's messaging app to send a text message.

    Simple example: sms:1-206-555-2323

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

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

    tel: – Uses the device's phone app to make a phone call.

    Example: tel:1-206-555-2323

    Navigate to Home Collection – Returns to the first article or collection in the top-level collection.

    Navigate Back – Returns to the previous browser page or article from which the user tapped or clicked to navigate to the current browse page. (Swipe gestures on mobile devices are not included in back navigation.)

    The mailto, sms, and tel actions are supported only on mobile devices. They have no effect in the Desktop Web Viewer.

  5. Use the Images tab to upload the banner image.

    If you don't want to use an image for your banner—for example, if you want to display only the banner title or a color—you can upload any image file and then create a card that does not display the image.

  6. Add the banner to a collection. Make sure that it’s positioned properly within the collection (such as at the top) so that it appears in the appropriate location on the browse page.

  7. If necessary, edit a layout template to include a card that will display the banner.

    For example, you can create a card that covers the width of the device, and you can create a rule that maps the card to any banner. See Creating cards and layouts.

Dynamic banners

Dynamic banners display HTML content in browse pages.

  • If you use multiple dynamic banners on a browse page, test the experience on your target devices to make sure that the performance is reliable. If the browse page takes too long to load or if you experience other problems, consider using fewer dynamic banners on the browse page.
  • Using thumbnail images for banners is optional. Images can be useful if the user is offline or to appear behind transparent HTML content.
  • If you use Cordova plugins in your dynamic banner, make sure that you select the Enable extensibility features in dynamic banner properties.
  • When referencing external content in your HTML files, we recommend that you use HTTPS protocol instead of HTTP. The Desktop Web Viewer requires HTTPS protocols.
  • You can use the <video playsinline autoplay> element to autoplay a video in the dynamic banner. If the video autoplays before the banner comes into view, consider using JavaScript that plays the video on the window.onAppear event and pauses the video on the window.onDisappear event.

 

Dynamic Banners Video

Dynamic Banners Video

Example entitlement banner

Use this HTML content to create an entitlement dynamic banner. If the user is not signed in, a sign-in prompt appears in the banner. If the user is signed in, a Sign Out button appears in the banner. When you create the dynamic banner, make sure that you select the Enable extensibility features to enable Cordova plugins.

Download

Get file
Sample entitlement banner

Creating dynamic banners

  1. Create your HTML content and generate an article file.

    See Creating HTML article for AEM Mobile.

  2. In Content & Layouts, click Content, and then click Add > Add Dynamic Banner.

  3. Specify a banner name that’s unique to the project.

  4. Specify the metadata for the banner.  

    You’ll might want to add metadata to distinguish the banner from other content when you use mapping rules to map content to cards.

    Note:

    If your HTML content includes references to Cordova plugins, make sure that you select Enable extensibility features.

  5. Use the Images tab to upload the banner image.

    Using a banner image is optional. A banner image can be useful if the device if offline or as a background for transparent HTML content.

  6. Use the Content File tab to upload the article file containing your HTML content.

  7. If the dynamic banner is an ad, use the Advertisement tab to specify information for analytics data.

  8. Add the banner to a collection. Make sure that it’s positioned properly within the collection (such as at the top) so that it appears in the appropriate location on the browse page.

  9. If necessary, edit a layout template to include a card that will display the banner.

    For example, you can create a card that covers the width of the device, and you can create a rule that maps the card to any banner. See Creating cards and layouts.