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

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>