Zum Hauptinhalt springen
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
SlotIDLanding Page NameURL or DeeplinksWidthHeightAdditional Width (optional)Additional Height (optional)
top-slot-1Homepage Christmashttp://example.com/home100504040
right-slot-2Homepage Christmashttp://example.com/home50200
Verwenden Sie diese Beispieldatei 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:
SlotIDWidthHeightAlternative Width (optional)Alternative Height (optional)
category-bottom100504040

​
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

VariableTypDefinitionErforderlich/optionalHinweise
typestringAuktionstyperforderlichMuss auf “banners” gesetzt sein
slotsintegerMaximale Anzahl von AuktionsgewinnernerforderlichAnzahl der Gewinner, die die Auktion zurückgeben soll
slotIdstringExterne Slot-ID, die vom Marketplace bereitgestellt wirderforderlichFormat: ^[\w!\"#$%&'()_+,\-._/:;<>?@\[\]^\{\}~=\\]\_$
categoryIdstringMarketplace-Kategorie-ID für die Auktionnur erforderlich bei Kategorie-BannernStandard ist Homepage-Auktion, wenn keine Kategorie-ID angegeben
searchQuerystringnur erforderlich bei Such-Bannern *Sie können sowohl categoryID als auch searchQuery im gleichen Aufruf übergebenBeispiel “blaue Laufschuhe”
devicestringZielgerät: Desktop oder MobiloptionalEnum: “desktop” oder “mobile”. Standard “desktop”.

​
Antwortfelder

VariableTypDefinition
resultTypestring”banners”
winners.resolvedBidIdstringEine Topsort-ID, die verwendet werden soll, wenn mit diesem Element interagiert wird (um Impressions oder Klicks zu melden)
winners.typestringTyp des gewinnenden Gebots. Enum: “product”, “vendor”, “brand”, “url”.
winners.rankintegerDer 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.idstringDie eindeutige Marketplace-ID für die gewinnende Entität.
winners.assetarray
winners.asset.urlstringQuell-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, mit dem Sie dem Client-Browser mehrere Quellen bereitstellen können. Wenn das Asset beispielsweise 2 Quellen hat: 
"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: 
<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>
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 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. 
[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: 
// Get the screen's density scale
final float scale = getResources().getDisplayMetrics().density;