If you're concerned about using Ezoic with dynamically loading or changing content, don't worry! This article will provide guidance on how to account for this with JavaScript (Standalone) Integration, allowing your site to benefit from Ezoic's powerful features.

JavaScript (Standalone) Integration accounts for content that loads or changes dynamically. All site builds are able to benefit from this method integration, however additional configuration is required for those sites that utilize dynamic content versus those that do not. This article details some of the additional set-up steps needed to get ads to show for sites that do contain this type of content. However, please note that it is required that you first follow the steps found at https://support.ezoic.com/kb/article/javascript-standalone-integration, otherwise the below steps will not work (please note that sites that have a mix of static and dynamic content, and want to make use of all of Ezoic's features (e.g. Site Speed, SEO), while using the client-side code snippet to call for ads, may prefer to use Hybrid Integration instead. See https://support.ezoic.com/kb/article/hybrid-integration for further instructions).

Changing Pages

When switching between pageviews dynamically, it is important to re-call:

ezstandalone.showAds()

Calling this function following a change to the URL will force ads to refresh on the new page.

New Content

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

If a user scrolls down the page, 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. This allows the placeholder to be loaded again via ezstandalone.showAds if necessary.

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

For sites which implement an infinite scroll, a combination of calling ezstandalone.destroyPlaceholders followed by ezstandalone.showAds may be necessary to reuse placeholders if within the same pageview.

Example

The example below shows the flow of an infinite scroll would look like on a site with multiple articles.

Start off by calling the placeholder for the first article on page load.

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

User then scrolls to the next article, so the next set of ads are loaded.

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

<script>
    window.ezstandalone.cmd.push(function() {
        // destroy initial placeholders
        ezstandalone.destroyPlaceholders(102, 103, 104);
        // call new placeholders
        ezstandalone.showAds(102, 103, 104);
    });
</script>

Removing all placeholders

Remove all placeholders on the page by using the destroyAll function

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

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>

When setting up EzoicAds on your site, it's important to ensure that everything is functioning properly. We provide a built-in JavaScript Integration Debugger that allows you to quickly diagnose issues with your ad setup. Below is a step-by-step guide on how to use this debugger and interpret its outputs.

Step 1: Trigger the Debugger

To activate the debugger, simply append the following query parameter to the URL of the page where your EzoicAds are integrated:

ez_js_debugger=1

For example:

https://www.yourwebsite.com?ez_js_debugger=1

Once the query parameter is added and the page loads, a green modal dialog will appear at the bottom center of the screen. This is the JavaScript Integration Debugger.

Step 2: Understanding the Debugger Output

The debugger modal contains several key pieces of information that will help you troubleshoot your setup. Here’s a breakdown of the information provided:

• Script Detection: The debugger will check if the Ezoic script is correctly included on your page. If the script isn't found, you'll see an error message. Ensure that the Ezoic script tag is placed in the right location on your page.

• Placeholder Detection: The number of defined placeholders on your page will be displayed. This helps verify whether the placeholders have been successfully recognized by the Ezoic system.

• Ad Status: For each placeholder, the debugger will indicate whether an ad has been successfully rendered. It shows:

  • Whether an ad is assigned to a specific placeholder.
  • If a request was sent to Ezoic to retrieve an ad for that placeholder.

• Request Success: The debugger also monitors whether the ad request was sent successfully. If there’s an issue, the modal will display error details to help identify the root cause (e.g., network problems, misconfiguration).

Step 3: Using the Debugger for Troubleshooting

The information provided in the debugger modal is invaluable for diagnosing common issues such as:

• Ads Not Displaying: Check the placeholder detection and ad status to ensure placeholders are defined and ads are assigned.

• Ad Requests Failing: If ad requests aren't being sent or are failing, the debugger will provide error messages that point to potential misconfigurations.

• Script Loading Issues: If the script isn’t properly loaded, verify that the script tag is present in your source code and correctly configured.

If you need further assistance with JavaScript (Standalone) Integration when trying to account for content that loads or changes dynamically, please log in via https://support.ezoic.com/ to make use of our dedicated resources for support. We're here to help!