Implementation process

All the Web mediation implementation requires consultation with your Account Manager and QA process before going live.


Code Snippet

Regular HTML

<div class="OUTBRAIN" 
data-ob-contentUrl="DROP_PERMALINK_HERE"
data-widget-id="DROP_WIDGET_ID_HERE" 
data-ob-installation-key="DROP_PARTNER_KEY_HERE"
></div>
<script type="text/javascript" async="async" 
src="https://widgets.outbrain.com/outbrain.js"></script>

AMP HTML version details

<amp-embed
width="100"
height="100"
type="outbrain"
layout="responsive"
data-contentUrl
data-widgetIds="DROP_WIDGET_ID_HERE"
data-installation-key="DROP_PARTNER_KEY_HERE"
data-block-on-consent
></amp-embed>

The data-contentUrl attribute will automatically fetch canonical URL of the AMP page.


Google Ad Manager format with macros

Please consult with your Sales Engineer or Partner Manager before using

GAM SafeFrame

<div class="OUTBRAIN" 
data-ob-contentUrl="%%PATTERN:url%%"
data-widget-id="DROP_WIDGET_ID_HERE" 
data-ob-installation-key="DROP_PARTNER_KEY_HERE"
data-consent-string="${GDPR_CONSENT_164}"
data-consent-version="2"
></div>
<script type="text/javascript" async="async" 
src="https://widgets.outbrain.com/outbrain.js"></script>
GAM expandable Friendly iFrame

The fixed height/width on the container element must be removed. It will not load widgets if it’s served under SafeFrame.

<div class="OUTBRAIN"
data-ob-contentUrl="%%PATTERN:url%%"
data-widget-id="DROP_WIDGET_ID_HERE" 
data-ob-installation-key="DROP_PARTNER_KEY_HERE"
data-consent-string="${GDPR_CONSENT_164}"
data-consent-version="2"></div>
<script type="text/javascript">
(function() {
  var obs = document.createElement('script');
  obs.type = 'text/javascript';
  obs.async = true;
  obs.src = '//widgets.outbrain.com/outbrain.js';
  if (top == self) {
    //Code served directly on the page
    if (typeof OBR !== 'undefined') {
      OBR.extern.researchWidget();
    } else {
      var ss = document.getElementsByTagName('script')[0];
      ss.parentNode.insertBefore(obs, ss);
    }
  } else {
    //try to move elements to parent window (Friendly iFrame)
    try {
      window.frameElement.style.display = 'none';
      window.frameElement.parentNode.insertBefore(document.getElementsByClassName('OUTBRAIN')[0], window.frameElement);
      if (typeof parent.OBR !== 'undefined') {
        parent.OBR.extern.researchWidget();
      } else {
        var ts = parent.document.getElementsByTagName('script')[0];
        ts.parentNode.insertBefore(obs, ts);
      }
    } catch (e) {
      //Safe Frames May Be Preventing Widget to Expand
      console.log('Served in Safe Frames');
    }
  }
})();
</script>

Parameters

Attribute Name Requirement Description Example value
data-ob-contentUrl Required for Web Mediation The permalink of placement to identify the currently displayed content “https://www.outbrain.com/blog/123.html”
data-widget-id Required The widget id that you received from your Account Manager “AR_1”
data-ob-installation-key Required The partner key that you received from your Account Manager “DEMOP1MN24J3E1MGLQ92067LH”
data-ob-portalUrl Only if instructed by SE, Required for Native Environment A URL representing the context where the ad placement is presented to users. Does not need to be a reachable/crawlable URL. “http://www.chatPortal.com”
data-ob-language Only if instructed by SE, Required for Native Environment The 2-letter ISO 639-1 language code “en”
data-ob-psub Only if instructed by SE, Optional for Native Environment String value for additional section-level reporting breakdowns. Allowed characters: alphanumeric and underscore ‘_’. Requires permission from your Sales Engineer or Partner Manager. “minus1”
data-external-id Optional A unique key for report breakdowns. See Engage External Id Report API for details “123abcXYZ”
data-external-secondary-id Optional A secondary key for Engage External Id Report breakdowns as same as external-id. “456defABC”
data-click-url Optional An image pixel URL for tracking clicks on paid recommendations “https://yourdomain.com/click?123”
data-consent-string Optional:Only if TCF API is not available Base64-encoded consent string, as defined by IAB for TCF v2.0 “CO4SiGQO4SiGQAGABBENAzCgAP…(omitted)…YAAAAAAAAAAA”
data-consent-version Optional Version of consent string “2”

Parameters in detail

Consent String

Our JS Widget is fully compliant to TCF v2.0 and it will automatically fetch consent string from CMPs, so there’s no need to pass consent string manually. However, if the WebView does not support TCF API, it’s possible to pass consent string directly to widgets by using the data-consent-string attribute.


Widget Callback Events

Custom callback scripts can be supported by Widget External Event Handler For example, the Ad fill status of the widget can be checked by scanning the value of recsNumber at widgetDataReturned event. *Widgets must be shown to users even the Ad slots are not fully filled.