Dynamic Content

This section is for websites where content loads or changes dynamically. For example, a modal may appear when a user clicks a button, or the page may change without a full reload.

Changing Pages

When switching between pageviews dynamically, it is important to re-call ezstandalone.showAds() to force ads to refresh on the new URL.

<script>
    ezstandalone.cmd.push(function () {
        ezstandalone.showAds();
    });
</script>

Calling this function with no values will automatically call every existing placeholder on the new page. It will also refresh the anchor and video ad locations.

New Content

For additional placeholders within the same pageview, you can use the ezstandalone.showAds function.

If a user clicks a button, new content loads, and placeholders 104 and 105 are added, ezstandalone.showAds should be used to display them.

<script>
    ezstandalone.cmd.push(function () {
        // call new placeholders
        ezstandalone.showAds(104, 105);
    });
</script>

Changing content

If the content changes within the same pageview and a placeholder is no longer needed or visible, the placeholder needs to be properly cleaned up using ezstandalone.destroyPlaceholders.

<script>
    window.ezstandalone.cmd.push(function () {
        // destroy placeholders
        ezstandalone.destroyPlaceholders(104, 105);
    });
</script>

If this content becomes visible again, you can recall these locations using ezstandalone.showAds, such as in the "New Content" example above.

If your site needs to react after Ezoic has finished trying to fill an individual placeholder, listen for the ezSlotComplete event. When event.detail.filled is false, Ezoic is done trying to fill that slot for the current lifecycle, so you can hide your own surrounding layout if needed.

Infinite Scroll

For sites which implement an infinite scroll, it is recommended to use unique placeholder IDs on each subsequent article, which can be called using ezstandalone.showAds when the new article loads. For example, Article 1 may contain placeholders 102, 103 and 104, while Article 2 may contain placeholders 105 and 106.

When the first article loads:

<script>
    window.ezstandalone = window.ezstandalone || {};
    ezstandalone.cmd = ezstandalone.cmd || [];
    ezstandalone.cmd.push(function () {
        ezstandalone.showAds(102, 103, 104);
    });
</script>

When the user scrolls to the second article, the next set of ads will be loaded using:

<script>
    window.ezstandalone.cmd.push(function () {
        // call new placeholders
        ezstandalone.showAds(105, 106);
    });
</script>

If placeholder IDs are reused in the newly loaded articles, then ezstandalone.destroyPlaceholders must be used prior to ezstandalone.showAds. It is important - however - that the original placeholders are destroyed in the HTML, as having multiple instances of the same placeholder ID on a page will cause unpredictable ad behaviour.

Removing all placeholders

You can remove all placeholders on the page by using the destroyAll function.

<script>
    window.ezstandalone.cmd.push(function () {
        ezstandalone.destroyAll();
    });
</script>

As with destroyPlaceholders - these locations can later be recalled with the showAds function.

Suppressing additional formats

If dynamic content appears on the page and ads should not show next to it, use destroyAll() or destroyPlaceholders() to remove display ad placeholders. To also prevent floating outstream video and interstitial ads from returning later in the same page session, temporarily disallow these requests using ezstandalone.setOutstreamAllowed(false) and ezstandalone.setInterstitialAllowed(false) respectively.

<script>
    window.ezstandalone.cmd.push(function () {
        ezstandalone.destroyAll();
        ezstandalone.setOutstreamAllowed(false, { reason: "sensitive-content" });
        ezstandalone.setInterstitialAllowed(false, { reason: "sensitive-content" });
    });
</script>

The reason value is optional, but it can help identify why these formats were suppressed. When the page is ready for these formats again, you can set these variables to true, with the additional option of using the parameter requestAdOnAllow: true to immediately request this ad type.

An example for outstream below:

<script>
    window.ezstandalone.cmd.push(function () {
        ezstandalone.setOutstreamAllowed(true, {
            reason: "safe-content",
            requestAdOnAllow: true
        });
    });
</script>

Note that requestAdOnAllow for interstitial ads is dependent on frequency caps.

To check the current outstream state, use isOutstreamAllowed() and isInterstitialAllowed() respectively.

<script>
    window.ezstandalone.cmd.push(function () {
        var outstreamAllowed = ezstandalone.isOutstreamAllowed();
        var interstitialAllowed = ezstandalone.isInterstitialAllowed();
    });
</script>

These methods control outstream video and interstitial only. It does not replace placeholder cleanup with destroyAll() or destroyPlaceholders().

Show all placeholders

You can call ads in every placeholder on a given page by using the showAds function, without defining any value.

<script>
    window.ezstandalone.cmd.push(function () {
        ezstandalone.showAds();
    });
</script>