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> , and replace YOUR_ACCOUNT_ID with your actual account id</span>.

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", // Replace YOUR_ACCOUNT_ID with your account ID from Audience Desk™ → Settings
      networkPartnerID: "OPTIONAL_WEBSITE_IDENTIFIER",
    });
    BeOpSDK.watch();
  };
</script>
<script async src="https://widget.collectiveaudience.co/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 Collective Audience™ 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", // Replace YOUR_ACCOUNT_ID with your account ID from Audience Desk™ → Settings
        networkPartnerID: "OPTIONAL_WEBSITE_IDENTIFIER",
      });
      BeOpSDK.watch();
    };
    var firstScript = document.querySelector(script);
    var script = document.createElement(script);
    script.async = true;
    script.src = "https://widget.collectiveaudience.co/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 (→ running-diagnostics)!

API Reference

BeOpSDK.init(config)

Initialises the SDK with your account.

BeOpSDK.init({
  network: "abcdef1234567890abcdef12",
  networkPartnerID: "12345",
});

• config.network: your Collective Audience™ 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 (→ sdk (#installation))

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

Use Collective Audience™ Prebid.js adapter as a Network

As mentionned in the that page (→ prebid), Collective Audience™ is having its own Prebid Adapter. Even as a Network, you can add Collective Audience™ in your Prebid flow.

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

Then, add Collective Audience™ in the relevant slot's bids array.

We recommend that you assign the Collective Audience™ bidder the sizes that your ad unit support. Collective Audience™ 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

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 Collective Audience™, you can set Collective Audience™ 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 Collective Audience™ platform.