Direct Integration

Direct integration loads js/apps/yaleo from CDN and calls window.yaleo.start() with the necessary parameters.

Setup

On Publisher’s Side

The publisher adds the Yaleo script and initialization directly in their page markup.

Include the script tag on the page:

<script async src="https://cdn.adnz.co/yaleo/index.js"></script>

Call window.yaleo.start() with the placement ID and target element:

window.yaleo.start({
  yaleoPlacementId: '00000000-0000-0000-0000-000000000000',
  element: document.getElementById('target-element-id'),
});

Headertag Raw JS

The integration script is deployed as a Raw JS entry in Headertag.

1. Assign the Yaleo Integration Script from AdConsole / Raw Scripts to the tag. The script defines the setupYaleo function:

window.setupYaleo = function setupYaleo(elementId, yaleoPlacementId) {
  function onload() {
    const checkElement = setInterval(
      () => {
        const element = document.getElementById(elementId);
        if (element) {
          if (element.dataset.hydrated === '0') {
            return;
          }
          if (window.htag.api) {
            window.htag.api('1').clearEffects({ tags: [`waiting-for-element:${elementId}`] });
          }
          element.dataset.adnzShown = '1';
          element.dataset.adnzLoaded = '1';
          window.yaleo.start({ element, yaleoPlacementId });
        }
      },
      250,
    );
    if (window.htag.api) {
      window.htag.api('1').saveEffect(
        () => {
          clearInterval(checkElement);
        },
        { tags: [`ad:${elementId}`, `waiting-for-element:${elementId}`] },
      );
    }
  }

  window.yaleo = window.yaleo || {};

  if (!window.yaleo.start) {
    const script = document.createElement('script');
    script.src = 'https://cdn.adnz.co/yaleo/index.js';
    script.async = true;
    script.defer = true;
    script.onload = onload;
    document.head.appendChild(script);
  } else {
    onload();
  }
};

2. Add a new Raw JS script that calls setupYaleo with the target element ID and placement ID:

setupYaleo('target-element-id', '00000000-0000-0000-0000-000000000000');

Helper Scripts

For publishers with complex or non-standard integration requirements, per-publisher scripts are maintained in js/scripts/yaleo/. Each script wraps the standard window.yaleo.start() call and extends it with publisher-specific logic — for example, resolving the target element dynamically, overriding the default ad index, or deferring initialization until a publisher-specific lifecycle event fires.

Parameters

window.yaleo.start() accepts the following options:

Options

Param	Type	Default	Description
yaleoPlacementId	string	—	Required. The placement ID.
element	HTMLElement	—	Target element. If not provided, created next to the script tag.
debug	boolean	—	Enables app-specific debug logging and test mode for ads.
forceMobile	boolean	—	Forces mobile placement configuration.
iframeMode	boolean	—	Indicates that the root element is an iframe child, overriding the default auto-detection. Reuses the existing iframe’s document for rendering instead of creating a new one.
iframeFullWidth	boolean	true	Applies 100% width to all parent iFrame elements.
shadowDomRemoved	boolean	—	If true, replaces Shadow DOM with an iframe for encapsulation.
shadowDomOpenMode	boolean	—	Renders ShadowRoot in open mode.
mockRecommendations	boolean	—	Uses mock recommendations instead of real data.
headerTagUndoEffectEnabled	boolean	false	Saves the cleanup effect to the Header Tag’s undo effect stack.
brandingTagLocation	BrandingTagLocation	PLACEMENT_CONTAINER	Where to display the branding tag.
url	string	—	Overrides the parent page URL used for targeting and analytics.
placement	PlacementResponse | null	—	Provide the placement directly, bypassing the fetch by yaleoPlacementId.
forceXandrCreativeId	number	—	Forces a specific Xandr creative ID.
gdprConsent	YaleoGdprConsent | null	—	GDPR consent data. Supports macros (e.g. ${GDPR_APPLIES}) for tag-in-tag integrations.

Formatters

Param	Description
formatArticleDate	Formats article dates.
formatItems	Formats, filters, or sorts placement items — for example, always displaying an ad as the first item.
formatReadingTime	Formats article reading time.
getArticleClassNames	Returns custom class names for article elements.
getArticleUrl	Overrides article URLs. Useful for mobile app deep links.
loadAds	Customizes the ad loading logic.

Events

Param	Description
onXandrResponseReceived	Fires when the Xandr response is received.
onElementsReady	Fires when ads are loaded and DOM elements inside Shadow DOM are accessible.
onError	Fires when an error occurs.