Inline Banners enable customers to configure banners that scroll along between other components within screens, as opposed to traditional banners which are fixed to the bottom of a screen and behind which other content scrolls. We recommend using inline banners instead of fixed banners. Inline banners look more modern and are less resistant to “banner blindness.”
Inline Banners are configurable via the UI Builder in two ways. First as a component of its own, and second, as an element that can be injected within List and Grid components. For details, please reference the directions below:
Inline Banner as a Component:
One way to present inline banners is to create a banner component within the UI Builder screen.
- In Zapp, go to the UI Builder section of your app:
- In a screen to which you want to add an inline banner, click on the “+ Add a component” button
- Select the “Banner” Component:
4. Click the + add component button:
5. Click and drag the row titled “Banner” from the panel on the left. Where it is located there will be reflected in the visual representation in the center panel:
We recommend putting the banner between other components, rather than at the top or bottom of the screen.
6. On the panel on the right, fill in the related fields. Each have a tooltip providing more detail.
- Ad Unit ID is the only data field and is required. It directs the app which ad to request
- Banner Type is required. It determines the sizing of the banner that will be rendered.
- If you leave Background toggled off, the inline banner will presented as is, without any additional styling. For example:
- If Background is toggled on, a variety of styling fields will be needed in order to determine what the UI for the background of the inline banner ad will look like. There are default values based on generic styling and operating system standards, but they can all be changed to match your app’s unique style. For example:
Inline Banners within List & Grid Components:
Another way to provide inline banners is to insert them within other components. This is currently supported for List and Grid components. For example, you can set up a List component so that an banner is presented after every 4 items of content.
This is also set up via the UI Builder.
1. In the UI Builder, click on a List or Grid component for which you want to include inline banners:
2. In the panel on the right side of the screen, scroll down to the “Advertising” section at the bottom and click on the toggle for “Insert Banner Ads”:
3. Three required fields will appear below:
- Ad Unit ID
- Banner Type
- Display Frequency
"Banner Type" Make sure Banner Type matches what was set up in the console for the associated Ad Unit ID:
a) Smart Banner - Smart Banners is a feature supported by Google DFP through which an ad unit can contain multiple creatives and a device requesting the banner will receive the widest creative possible which fits within the container making the request without distorting the image.
b) Standard Banner - 320x50 for smartphone and 728x90 for tablet
c) Box Banner - 300x250, often referred to as 'medium rectangles'
Please select the size banner you'd like to use.
“Display Frequency” determines the frequency with which an banner will appear. For example, if you enter 6, then after every 6 items in the list, the banner in the ad unit field will be rendered below the 6th item, 12th item, 18th item, and so forth.”
For grids, which have more than one item per row, we will not break the UI pattern to display a banner but rather use the first available space after the specified interval. For the best user experience, please select a number which is a multiple of the number of columns in your grid.
For example, if your grid has 2 columns in smartphones and 3 in tablets, than a value of 6 would lead to a smooth user experience on all devices.
“Background” opens the additional styling options.