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

Utilisez ce fichier d’exemple 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, 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,
    }
  }
]

Ensuite, vous pouvez générer le HTML suivant :

<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>

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 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;

Combinaison des gagnants et des résultats organiques Carrousels et Swimlanes

⌘I

​Configurations des bannières

​Pages de destination : page d’accueil ou pages personnalisées

​Catégorie et recherche

​Requêtes d’enchères pour les bannières

​Champs de requête

​Champs de réponse

​Rendu des bannières

​Applications Web

​Native iOS (Swift)

​In Android (Java)

Configurations des bannières

Pages de destination : page d’accueil ou pages personnalisées

Catégorie et recherche

Requêtes d’enchères pour les bannières

Champs de requête

Champs de réponse

Rendu des bannières

Applications Web

Native iOS (Swift)

In Android (Java)