Banner Ad Integration: 3 stages

1. Banner Configurations: Create and share ad slots.
2. Auctions for Banners: Work with auction variables, requests and responses
3. Rendering Banners: render and display the winning banner assets

Banner ads can be used as homepage sliders, featured brands, and carousels.

​

Banner Configurations

Provide a list of pages with unique identifiers for each banner slot.

​

Landing Pages: Homepage or Custom Pages

Create slots for high-traffic homepages or other landing pages.

A slot includes:

• SlotID: A unique identifier that can contain alphanumeric characters and the following symbols: !"#$%&'()*+,-._/:;<>?@[]^{}~=
• Name: A descriptive name (e.g. Homepage Slide 1, Above Trending Products ).
• URL or Deeplink: The URL where the slot is located.
• Landing Page name: The slot’s corresponding landing page.
• Image Width and Height, if you require different sizes across devices we support 1 more set of image sizes

​

Category and Search

Allow vendors to target specific categories and keywords. Define banner slots and share them.

Example:

​

Auction Requests for Banners

​

Requests Fields

​

Response Fields

​

Rendering Banners

Set the banner configurations inside the Topsort admin dashboard. Insert the banner in your web app’s DOM or add a component to your mobile app code.

​

Web Apps

For web apps, use the picture element, which will let you provide multiple sources to the client browser. For example, if the asset has 2 sources:

"asset": [
  {
    "url": "https://topsort.cdnprovider.com/lhs-banner-image-for-p_PJbnN-1x.png",
    "mimeType": "image/png",
    "dimensions": {
      "width": 400,
      "height": 100,
    }
  },
  {
    "url": "https://topsort.cdnprovider.com/lhs-banner-image-for-p_PJbnN-2x.png",
    "mimeType": "image/png",
    "dimensions": {
      "width": 800,
      "height": 200,
    }
  }
]

Then you may generate the following HTML:

<picture>
  <source
    width="400"
    srcset="https://topsort.cdnprovider.com/lhs-banner-image-for-p_PJbnN-1x.png 400w, https://topsort.cdnprovider.com/lhs-banner-image-for-p_PJbnN-2x.png 800w"
  >
  <img src="https://topsort.cdnprovider.com/lhs-banner-image-for-p_PJbnN-1x.png" alt="banner">
</picture>

The client’s browser will then choose the most adequate size depending on the user’s device capabilities and only fetch the size that best fits the user’s device.

​

Native iOS (Swift)

We recommend using AlamofireImage to handle download and render options. You may get your client’s device scaling factor by calling and pick the right size.

[UIScreen mainScreen].scale;

​

In Android (Java)

Use Glide library to render and cache images. As with iOS, you will need to check the device’s scaling factor to determine which image to download:

// Get the screen's density scale
final float scale = getResources().getDisplayMetrics().density;