Vue SDK

Incremental showAds for new content

Content appended within the same pageview — infinite scroll, a "load more" button, a modal — should request just the new ids, not re-scan the whole page or start a new pageview.

What this demonstrates

Mounting more <EzoicAd> components does this automatically — each one still batches into the SDK's per-tick queue, it just becomes a displayMore call (rather than the first pageview's showAds) once the ad bundle has already made its first request. To do it imperatively — for divs you render yourself — call displayMore from useEzoic() directly.

View source on GitHub →

SDK docs: README — Infinite scroll and dynamic content

Component usage — just mount more <EzoicAd>

<template>
  <button @click="addUnit">Load more</button>
  <EzoicAd v-for="u in units" :key="u.id" :id="u.id" :sizes="u.sizes" />
</template>

Imperative — divs you render yourself

const ezoic = useEzoic();
// After appending divs for placeholders 915 and 916:
ezoic.displayMore(
  { id: 915, required: true, sizes: ['300x250'] },
  { id: 916, required: true, sizes: ['300x250'] },
);

Live demo

The panel below embeds the SDK's own demo app (built from @ezoic/vue-sdk v1.0.0) — use its "Dynamic content — incremental showAds" panel and click Add ad unit repeatedly; each click mounts one more <EzoicAd location="bottom_of_page">. examples.ezoic.com's root domain is not lite-active, so ad requests will not fill here. Open the full demo in a new tab →