Directly from unpkg.com
<script
async
type="module"
src="https://unpkg.com/@topsort/banners@0.2.0/dist/banners.mjs"
></script>
<script async type="module" src="https://unpkg.com/@topsort/analytics.js"></script>
<script>
// Set API key for auctions and events
window.TS = {
token: "<your topsort api key>",
};
// Custom behavior can be configured for each site.
window.TS_BANNERS = {
// handle the destination link
getLink(banner) {
return `https://example.com/${banner.id}`;
},
// handle loading/fetching state
getLoadingElement() {
const el = document.createElement("div");
el.innerText = "Loading...";
return el;
},
// handle errors
getErrorElement() {
const el = document.createElement("div");
el.innerText = "Error loading banner";
return el;
},
};
</script>
<body>
<topsort-banner width="600" height="400" slot-id="<your slot id>"></topsort-banner>
</body>| Name | Type | Description |
|---|---|---|
| width | Number | Banner width |
| height | Number | Banner height |
| id | String | The slot ID for this banner |
| category-id | Optional String | The category ID of the current page |
| search-query | Optional String | The search query of the current page |
| location | Optional String | The location for geotargeting |
| Function Name | Arg type | Return Type | Description |
|---|---|---|---|
getLink |
Banner | string |
Generates a URL from a banner response |
getLoadingElement |
HTMLElement |
A custom element to be shown when the banner is loading. | |
getErrorElement |
Error | HTMLElement |
A custom element to be shown when the banner errors. |
getNoWinnersElement |
HTMLElement |
A custom element to be shown when the auction returns no banner. | |
getBannerElement |
Banner | HTMLElement |
A custom clement to be shown when a banner is loaded. |
| Name | Type | Description |
|---|---|---|
type |
"product" | "vendor" | "brand" | "url" |
The type of the winning entity, represented by the banner. |
slotId |
string |
The ID of the winning entity. If the entity is of type URL, this is the URL. |
resolvedBidId |
string |
The corresponding auction ID of the winning entity. |
asset |
[{ url: string }] |
An array of url linking to the assets of the banner. |
The banner component emits an event when the state changes. You can listen to this event to write custom logic.
The various states are loading, ready, error, and nowinners.
document.querySelector('#my-slot-id').addEventListener('statechange', (event) => {
console.log(event.detail); // { status: 'ready', banner: { ... } }
});You can play around with the provided index.html file. To run it, you'll need to install the dependencies and start a local server.
git clone https://github.com/Topsort/banners.js.git
cd banners.js
pnpm install
pnpm run devRemember to add window.TS.token and modify the slot-id attribute with your
own values that you can find at Topsort.