# Dynamic Content

Source: https://docs.ezoic.com/docs/ezoicads/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.

```html
<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.

```html
<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`.

```html
<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](/docs/ezoicadsadvanced/slot-complete-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:

```html
<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:

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


It is recommended to create a set of `in-content` placeholders specifically for infinite scroll.


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.


When using `ezstandalone.destroyPlaceholders`, make sure you don't call it too early. This could cause the ads on the page the user is currently viewing to disappear!


## Removing all placeholders

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

```html
<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.

```html
<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:

```html
<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.

```html
<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.

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