> ## Documentation Index
> Fetch the complete documentation index at: https://docs.topsort.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Gesponserte Banner
> Erfahren Sie, wie Sie die Auction API verwenden, um Auktionen für Listings und Banner zu erstellen.
Banner-Anzeigenintegration: 3 Schritte
1. **Banner-Konfigurationen**: Erstellen und teilen Sie Anzeigenplatzierungen.
2. **Banner-Auktionen**: Arbeiten Sie mit Auktionsvariablen, Anfragen und Antworten
3. **Banner-Rendering**: Zeigen und präsentieren Sie die Assets der gewinnenden Banner
Banner-Anzeigen können als Homepage-Slider, Featured Brands und Karussells verwendet werden.
# **Banner-Konfigurationen**
Stellen Sie eine Liste von Seiten mit eindeutigen Identifikatoren für jede Banner-Platzierung bereit.
## **Landing Pages**: Homepage oder benutzerdefinierte Seiten
Erstellen Sie Platzierungen für stark frequentierte Homepages oder andere Landing Pages.
Eine Platzierung umfasst:
* **SlotID**: Eine **eindeutige** Kennung, die alphanumerische Zeichen und die folgenden Symbole enthalten kann: `!"#$%&'()*+,-._/:;<>?@[]^{}~=`
* **Name**: Ein beschreibender Name (z.B. Homepage Slide 1, Above Trending Products).
* **URL or Deeplink**: Die URL, wo sich die Platzierung befindet.
* **Landing Page name**: Die Landing Page, die der Platzierung entspricht.
* **Breite** und **Höhe** des Bildes, wenn Sie unterschiedliche Größen auf mehreren Geräten benötigen, unterstützen wir 1 zusätzlichen Satz von Bildgrößen
| SlotID | Landing Page Name | URL or Deeplinks | Width | Height | Additional Width (optional) | Additional Height (optional) |
| :----------- | :----------------- | :------------------------------------------------- | :---- | :----- | :-------------------------- | :--------------------------- |
| top-slot-1 | Homepage Christmas | [http://example.com/home](http://example.com/home) | 100 | 50 | 40 | 40 |
| right-slot-2 | Homepage Christmas | [http://example.com/home](http://example.com/home) | 50 | 200 | | |
Verwenden Sie [diese Beispieldatei](https://docs.google.com/spreadsheets/d/1KMnGnYp6D3u4kwwofm3nZ97Jgwtvys5fqEfGRmO3aVQ/edit#gid=0)
zum Massenupload von Banner-Konfigurationen.
## **Kategorie und Suche**
Ermöglichen Sie Verkäufern, bestimmte Kategorien und Keywords anzusprechen. Definieren Sie Banner-Platzierungen und teilen Sie sie.
Beispiel:
| SlotID | Width | Height | Alternative Width (optional) | Alternative Height (optional) |
| :-------------- | :---- | :----- | :--------------------------- | :---------------------------- |
| category-bottom | 100 | 50 | 40 | 40 |
# **Banner-Auktionsanfragen**
Speichern der resolvedBidId.
Die **resolvedbidId** vereinfacht Attribution und Event-Protokollierung für Sie und Ihre Verkäufer, ähnlich wie die **auctionID** bei gesponserten Listings. Sie muss gespeichert werden, damit Events später gemeldet werden können, entweder als Cookie oder Session-Variable für Webanwendungen oder als interne Variable für mobile Apps.
### Anfragefelder
| Variable | Typ | Definition | Erforderlich/optional | Hinweise |
| :---------- | :------ | :------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------- |
| type | string | Auktionstyp | erforderlich | Muss auf "banners" gesetzt sein |
| slots | integer | Maximale Anzahl von Auktionsgewinnern | erforderlich | Anzahl der Gewinner, die die Auktion zurückgeben soll |
| slotId | string | Externe Slot-ID, die vom Marketplace bereitgestellt wird | erforderlich | Format: `^[\w!\"#$%&'()_+,\-._/:;<>?@\[\]^\{\}~=\\]\_$` |
| categoryId | string | Marketplace-Kategorie-ID für die Auktion | nur erforderlich bei Kategorie-Bannern | Standard ist Homepage-Auktion, wenn keine Kategorie-ID angegeben |
| searchQuery | string | | nur erforderlich bei Such-Bannern \*Sie können sowohl categoryID als auch searchQuery im gleichen Aufruf übergeben | Beispiel "blaue Laufschuhe" |
| device | string | Zielgerät: Desktop oder Mobil | optional | Enum: "desktop" oder "mobile". Standard "desktop". |
### Antwortfelder
| Variable | Typ | Definition |
| --------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| resultType | string | "banners" |
| winners.resolvedBidId | string | Eine Topsort-ID, die verwendet werden soll, wenn mit diesem Element interagiert wird (um Impressions oder Klicks zu melden) |
| winners.type | string | Typ des gewinnenden Gebots. Enum: "product", "vendor", "brand", "url". |
| winners.rank | integer | Der Auktionsrang des Produkts gibt seine Position an, wobei 1 der Gewinner ist. In der Auktionsantwort ist das Gewinner-Array sortiert, und der Rang entspricht dem Index des Eintrags. |
| winners.id | string | Die eindeutige Marketplace-ID für die gewinnende Entität. |
| winners.asset | array | |
| winners.asset.url | string | Quell-URL für ein Banner-Asset. Das Asset wird vom Topsort CDN bereitgestellt, enthalten im Asset-Array |
# **Banner-Rendering**
Konfigurieren Sie Banner-Konfigurationen im Topsort Admin-Dashboard. Fügen Sie das Banner in das DOM Ihrer Webanwendung ein oder fügen Sie eine Komponente zum Code Ihrer mobilen App hinzu.
### **Webanwendungen**
Verwenden Sie für Webanwendungen das [`picture`-Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture), mit dem Sie dem Client-Browser mehrere Quellen bereitstellen können. Wenn das Asset beispielsweise 2 Quellen hat:
```json theme={null}
"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,
}
}
]
```
Dann können Sie folgendes HTML generieren:
```html theme={null}
```
Der Browser des Clients wählt dann die am besten geeignete Größe basierend auf den Gerätefähigkeiten des Benutzers aus und lädt nur die Größe herunter, die am besten zum Gerät des Benutzers passt.
### Native iOS (Swift)
Wir empfehlen die Verwendung von **[AlamofireImage](https://github.com/Alamofire/AlamofireImage)** zur Handhabung von Download- und Rendering-Optionen. Sie können den Skalierungsfaktor des Geräts Ihres Clients abrufen, indem Sie aufrufen und die richtige Größe wählen.
```swift theme={null}
[UIScreen mainScreen].scale;
```
### In Android (Java)
Verwenden Sie die Glide-Bibliothek zum Anzeigen und Cachen von Bildern. Wie bei iOS müssen Sie den Skalierungsfaktor des Geräts überprüfen, um zu bestimmen, welches Bild heruntergeladen werden soll:
```java theme={null}
// Get the screen's density scale
final float scale = getResources().getDisplayMetrics().density;
```
