Banner-Anzeigenintegration: 3 Schritte

Banner-Konfigurationen: Erstellen und teilen Sie Anzeigenplatzierungen.
Banner-Auktionen: Arbeiten Sie mit Auktionsvariablen, Anfragen und Antworten
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	100	50	40	40
right-slot-2	Homepage Christmas	http://example.com/home	50	200

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:

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

Kombination von Gewinnern und organischen Ergebnissen Karussells und Swimlanes

⌘I

​Banner-Konfigurationen

​Landing Pages: Homepage oder benutzerdefinierte Seiten

​Kategorie und Suche

​Banner-Auktionsanfragen

​Anfragefelder

​Antwortfelder

​Banner-Rendering

​Webanwendungen

​Native iOS (Swift)

​In Android (Java)

Banner-Konfigurationen

Landing Pages: Homepage oder benutzerdefinierte Seiten

Kategorie und Suche

Banner-Auktionsanfragen

Anfragefelder

Antwortfelder

Banner-Rendering

Webanwendungen

Native iOS (Swift)

In Android (Java)