> ## 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.
# Bannières sponsorisées
> Apprenez à utiliser l'API d'enchères pour créer des enchères pour les listings et les bannières.
Intégration des bannières publicitaires : 3 étapes
1. **Configurations des bannières** : Créez et partagez des emplacements publicitaires.
2. **Enchères pour les bannières** : Travaillez avec les variables d'enchères, les requêtes et les réponses
3. **Rendu des bannières** : affichez et présentez les ressources de bannières gagnantes
Les bannières publicitaires peuvent être utilisées comme curseurs de page d'accueil, marques en vedette et carrousels.
# **Configurations des bannières**
Fournissez une liste de pages avec des identifiants uniques pour chaque emplacement de bannière.
## **Pages de destination** : page d'accueil ou pages personnalisées
Créez des emplacements pour les pages d'accueil à fort trafic ou d'autres pages de destination.
Un emplacement comprend :
* **SlotID** : un identifiant **unique** qui peut contenir des caractères alphanumériques et les symboles suivants : `!"#$%&'()*+,-._/:;<>?@[]^{}~=`
* **Name** : un nom descriptif (par exemple, Diapositive 1 de la page d'accueil, Au-dessus des produits tendances).
* **URL or Deeplink** : l'URL où se trouve l'emplacement.
* **Landing Page name** : la page de destination correspondant à l'emplacement.
* **Largeur** et **hauteur** de l'image, si vous avez besoin de différentes tailles sur plusieurs appareils, nous prenons en charge 1 ensemble supplémentaire de tailles d'image
| 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 | | |
Utilisez [ce fichier d'exemple](https://docs.google.com/spreadsheets/d/1KMnGnYp6D3u4kwwofm3nZ97Jgwtvys5fqEfGRmO3aVQ/edit#gid=0)
pour charger en masse les configurations de bannières.
## **Catégorie et recherche**
Permettez aux vendeurs de cibler des catégories et des mots-clés spécifiques. Définissez des emplacements de bannières et partagez-les.
Exemple :
| SlotID | Width | Height | Alternative Width (optional) | Alternative Height (optional) |
| :-------------- | :---- | :----- | :--------------------------- | :---------------------------- |
| category-bottom | 100 | 50 | 40 | 40 |
# **Requêtes d'enchères pour les bannières**
Stockage du resolvedBidId.
Le **resolvedbidId** simplifie l'attribution et l'enregistrement des événements pour vous et vos vendeurs, similaire au **auctionID** dans les listings sponsorisés. Il doit être stocké afin que les événements puissent être signalés ultérieurement, soit en tant que cookie ou variable de session pour les applications Web, soit stocké en tant que variable interne pour les applications mobiles.
### Champs de requête
| Variable | Type | Definition | Required/optional | Notes |
| :---------- | :------ | :-------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------- |
| type | string | Type d'enchère | requis | Doit être défini comme "banners" |
| slots | integer | Nombre maximum de gagnants d'enchères | requis | nombre de gagnants que vous souhaitez que l'enchère renvoie |
| slotId | string | ID d'emplacement externe fourni par la marketplace. | requis | Format : `^[\w!\"#$%&'()_+,\-._/:;<>?@\[\]^\{\}~=\\]\_$` |
| categoryId | string | ID de catégorie de la marketplace pour l'enchère. | requis uniquement si bannières de catégorie | Par défaut, enchère de page d'accueil si aucun ID de catégorie fourni. |
| searchQuery | string | | requis uniquement si bannières de recherche \*vous pouvez passer à la fois categoryID et searchQuery dans le même appel | Exemple "chaussures de course bleues" |
| device | string | Appareil cible : ordinateur de bureau ou mobile. | optionnel | Enum : "desktop" ou "mobile". Par défaut "desktop". |
### Champs de réponse
| Variable | Type | Definition |
| --------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| resultType | string | "banners" |
| winners.resolvedBidId | string | Un ID Topsort à utiliser lorsque cet élément fait l'objet d'une interaction (pour signaler les impressions ou les clics) |
| winners.type | string | Type de l'enchère gagnante. Enum : "product", "vendor", "brand", "url". |
| winners.rank | integer | Le classement d'enchère du produit indique sa position, 1 étant le gagnant. Dans la réponse d'enchère, le tableau des gagnants est trié et le rang correspond à l'index de l'entrée. |
| winners.id | string | L'ID unique de la marketplace pour l'entité gagnante. |
| winners.asset | array | |
| winners.asset.url | string | URL source pour une ressource de bannière. La ressource est servie par le CDN de Topsort, contenue dans le tableau asset |
# **Rendu des bannières**
Configurez les configurations de bannières dans le tableau de bord d'administration de Topsort. Insérez la bannière dans le DOM de votre application Web ou ajoutez un composant au code de votre application mobile.
### **Applications Web**
Pour les applications Web, utilisez l'[élément `picture`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture), qui vous permettra de fournir plusieurs sources au navigateur client. Par exemple, si la ressource a 2 sources :
```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,
}
}
]
```
Ensuite, vous pouvez générer le HTML suivant :
```html theme={null}
```
Le navigateur du client choisira alors la taille la plus appropriée en fonction des capacités de l'appareil de l'utilisateur et ne récupérera que la taille qui convient le mieux à l'appareil de l'utilisateur.
### Native iOS (Swift)
Nous recommandons d'utiliser **[AlamofireImage](https://github.com/Alamofire/AlamofireImage)** pour gérer les options de téléchargement et de rendu. Vous pouvez obtenir le facteur d'échelle de l'appareil de votre client en appelant et en choisissant la bonne taille.
```swift theme={null}
[UIScreen mainScreen].scale;
```
### In Android (Java)
Utilisez la bibliothèque Glide pour afficher et mettre en cache les images. Comme pour iOS, vous devrez vérifier le facteur d'échelle de l'appareil pour déterminer quelle image télécharger :
```java theme={null}
// Get the screen's density scale
final float scale = getResources().getDisplayMetrics().density;
```
