Placements and Asynchronous Content - ads-ep/EpJs GitHub Wiki

Asynchronously loaded placements

If placements are added to the DOM after the page has loaded, a helper method will need to be called to have them rendered. An example of this would be if Adobe Launch is used to inject placements with contextual attributes such as price, product name, category etc.

// Whenever the DOM should be re-scanned for new placements (outside of a page load), call:

EpJs.generatePlacements();

Asynchronously updated placements

Placements are generally rendered once after page load. If the placement attributes change without a page reload, EpJs.generatePlacements(); will need to be called. E.g. If a product price changes based on an asynchronous product option selection, EpJs.generatePlacements(); should be used to re-render the placement.

Example:

<div data-ep-placement="49989304-445d-4002-95db-f94z99885447"
       data-amount-type="product"
       data-amount="6500"
       data-location="product"
       data-product-category="shoes"
       data-brand="nike"
       data-sku="NIKE-PEG-BL-43">
       </div>
// Update price of product asynchronously to $149.00 (set in cents)
document.querySelector('[data-ep-placement="49989304-445d-4002-95db-f94z99885447"]')
    .dataset.amount = '14900';

// Re-render all placements on page
EpJs.generatePlacements();

/*
* - Updated placement price is sent to the generate placements service.
* - Placement content for updated price is returned and rendered on DOM
*/
⚠️ **GitHub.com Fallback** ⚠️