Intégration des bannières publicitaires : 3 étapes
- Configurations des bannières : Créez et partagez des emplacements publicitaires.
- Enchères pour les bannières : Travaillez avec les variables d’enchères, les requêtes et les réponses
- 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 | 100 | 50 | 40 | 40 |
| right-slot-2 | Homepage Christmas | http://example.com/home | 50 | 200 | | |
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, qui vous permettra de fournir plusieurs sources au navigateur client. Par exemple, si la ressource a 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,
}
}
]
<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>
Native iOS (Swift)
Nous recommandons d’utiliser 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.
[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 :
// Get the screen's density scale
final float scale = getResources().getDisplayMetrics().density;
