# 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.

```markup
<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:

```markup
<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:

```markup
<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:

```markup
<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:

```markup
<!-- 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.

```javascript
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](#installation)

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

### With the Publisher SDK *(→ sdk (#installation))*

```markup
<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.


:::info
You'll need to contact your account manager to activate the Prebid integration on your Collective Audience™ Network account.

:::

First, pick **BeOp** on the [Prebid.js download page](https://docs.prebid.org/download.html).

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.

```javascript
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

| Name | Value |
|------|-------|
| `networkId` | Your Collective Audience™ account ID |
| `networkPartnerId` | Your website id, as defined in **YOUR** system |
| `currency` | `EUR` 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 Collective Audience™, you can set Collective Audience™ bidder `config.ortb2` object with

```json
{
  "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](/publisher-data-description) on how you can leverage the usage of your first party data in Collective Audience™ platform.