Skip to main content

Network SDK

The SDK is the script that manages widgets on your page. It's in charge of getting content (whether editorial or sponsored) and place it correctly in your pages.

  • It initialises and identifies the page as yours
  • It calls our content server to check if there's content to display
  • It watches the page for changes, so that if a new slot is available, it can be filled

Installation#

Add this code right after the opening <body> tag, and replace YOUR_ACCOUNT_ID with your actual account id.

If you want your statistics to be groupable by your own website identifier, you can provide it using the networkPartnerID parameter.

<script>
window.beOpAsyncInit = function () {
BeOpSDK.init({
network: "YOUR_ACCOUNT_ID",
networkPartnerID: "OPTIONAL_WEBSITE_IDENTIFIER",
});
BeOpSDK.watch();
};
</script>
<script async src="https://widget.beop.io/sdk.js"></script>

the beOpAsyncInit is where you identify your page using the init() function, and the watch() tells the SDK to look for slots, the script below is the actual SDK, which is loaded asynchronously (meaning it doesn't block your page)

Installing on Wordpress#

It's possible that your Wordpress setup concatenates scripts, which prevents you from running an up-to-date BeOp SDK and creates unexpected bugs.

For that, you can use the following SDK:

<script>
(function (window, document, script) {
window.beOpAsyncInit = function () {
BeOpSDK.init({
network: "YOUR_ACCOUNT_ID",
networkPartnerID: "OPTIONAL_WEBSITE_IDENTIFIER",
});
BeOpSDK.watch();
};
var firstScript = document.querySelector(script);
var script = document.createElement(script);
script.async = true;
script.src = "https://widget.beop.io/sdk.js";
firstScript.parentNode.insertBefore(script, firstScript);
})(window, document, "script");
</script>

Declaring slots#

You can declare slots, or places where widgets should appear by simply putting the following tag where you want them on your pages:

<div class="BeOpWidget"></div>

In order to ensure your slots are correctly filled, we highly recommend naming them, this way if the slot order in your page is altered, the SDK will still be able to identify them.

Example:

<div class="BeOpWidget" data-name="below-article"></div>
<div class="BeOpWidget" data-name="sidebar"></div>
<div class="BeOpWidget" data-name="homepage"></div>

You can specify if a slot is strictly for your own editorial content or for sponsored content too:

<!-- only editorial content -->
<div class="BeOpWidget" data-my-content="1"></div>
<!-- default: accept both (if your account is configured to accept ads) -->
<div class="BeOpWidget"></div>

Need to check if you installed the SDK correctly?#

Come and check the Diagnostics script!

API Reference#

BeOpSDK.init(config)#

Initialises the SDK with your account.

BeOpSDK.init({
network: "abcdef1234567890abcdef12",
networkPartnerID: "12345",
});
  • config.network: your BeOp account ID
  • config.networkPartnerID (optional): the ID of the website on your network
  • config.refreshExistingSlots (default: true): set to false if your website loads new articles with an infinite scroll mechanism

BeOpSDK.watch()#

Parses and watches the page for available slots.

BeOpSDK.parse()#

Parses the page for tags

caution

Deprecated: use BeOpSDK.watch(), which is reliable even when pages aren't fully loaded or blocked by a longer loading

Sharing the page slots between the network and the publisher#

You can override the configuration on a per-slot basis. So that, say, slots belong to the network by default, and that the newsroom gets one slot solely for editorial content.

With the Network SDK#

<div class="BeOpWidget" data-account="YOUR_PUBLISHER_ID"></div>

With the Publisher SDK#

<div
class="BeOpWidget"
data-network="YOUR_NETWORK_ID"
data-network-partner-id="OPTIONAL_WEBSITE_IDENTIFIER"
></div>

Use BeOp Prebid.js adapter as a Network#

As mentionned in the that page, BeOp is having its own Prebid Adapter. Even as a Network, you can add BeOp in your Prebid flow.

info

You'll need to contact your account manager to activate the Prebid integration on your BeOp Network account.

First, pick BeOp on the Prebid.js download page.

Then, add BeOp in the relevant slot's bids array.

We recommend that you assign the BeOp bidder the sizes that your ad unit support. BeOp is managing for its own contents the sizes 1x1, 250x250, 300x250, 300x600, 320x480, 336x280 and 480x320. But for external buyers, other sizes can be applied, so feel free to customize the sizes array as you expect it.

var adUnits = [
{
code: "in-article",
mediaTypes: {
banner: {
sizes: [
[1, 1],
[250, 250],
[300, 250],
[300, 600],
[320, 480],
[336, 280],
[480, 320],
// YOUR OTHER SIZES
],
},
},
bids: [
{
bidder: "beop",
params: {
networkId: "YOUR_NETWORK_ID",
networkPartnerId: "YOUR_NETWORK_WEBSITE_ID",
currency: "EUR", // or "USD"
},
},
],
},
];

Bid Params#

NameValue
networkIdYour BeOp account ID
networkPartnerIdYour website id, as defined in YOUR system
currencyEUR or USD

Focus on the networkPartnerId parameter : This parameter is defining the ID of your partner and will be available as a dimension for revenues attribution in your reports. Thanks to that, with one networkId, you will be able to get the revenues website by website.

Bidder Params#

If you want to pass your first party data to BeOp, you can set BeOp bidder config.ortb2 object with

{
"site": {
"ext": {
"bpsegs": ["Your", 1, "ST", "party", "data"],
"data": {
"bpsegs": ["Your", 1, "ST", "party", "data"]
}
}
},
"user": {
"ext": {
"bpsegs": ["Your", 1, "ST", "party", "data"],
"data": {
"bpsegs": ["Your", 1, "ST", "party", "data"]
}
}
}
}

You can choose the location between:

  • site.ext
  • site.ext.data
  • user.ext
  • user.ext.data

and our BidAdapter will be able to find them. See the related documentation on how you can leverage the usage of your first party data in BeOp platform.