Help Center
chevron_right
Knowledgebase
chevron_right
Integration & Speed
chevron_right
JavaScript Integration for non-WordPress Sites
In This Article
Introduction Instructions Troubleshooting Contact Information for Further Assistance
How-To/Instructional

JavaScript Integration for non-WordPress Sites

Last updated over a month ago

Introduction

JavaScript integration is a high-performance, browser-based solution that connects your site to Ezoic’s AI engine. By placing a lightweight script directly into your site's HTML, you enable real-time ad personalization and competitive bidding without the need for complex configurations. This method ensures your pages remain responsive and fast, as the Ezoic library manages ad delivery and layout optimization entirely within the visitor's browser.

Instructions

Why Use Manual JavaScript Integration?

While WordPress users benefit from the automation of the Ezoic WordPress Plugin, manual JavaScript integration is the best choice for:

  • Non-WordPress CMS: Sites built on custom-coded frameworks.

  • Precision Control: Publishers who want to define exact ad locations within their unique HTML structure.

  • Minimalist Footprint: Users who prefer to keep their site backend "clean" by inserting code directly rather than managing additional plugins.

Prerequisites

Before you begin, ensure:

  1. You have an active Ezoic account.

  2. You have completed the Google MCM application in your dashboard.

  3. Your Ads.txt is configured and shows a "Healthy" status.

Step 1: Add the Header Scripts

To initialize the connection, place these two lightweight scripts at the very top of your <head> tag. This ensures the engine is ready to serve ads as soon as the page begins to load.

1. Privacy Script

This script manages Consent Management and must load first to ensure your site remains compliant with global privacy regulations.

<script data-cfasync="false" src="https://cmp.gatekeeperconsent.com/min.js"></script>
<script data-cfasync="false" src="https://the.gatekeeperconsent.com/cmp.min.js"></script>

2. Ezoic Header Script

This snippet loads the core Ezoic library asynchronously to ensure zero impact on your page load speed.

<script async src="//www.ezojs.com/ezoic/sa.min.js"></script>
<script>
    window.ezstandalone = window.ezstandalone || {};
    ezstandalone.cmd = ezstandalone.cmd || [];
</script>
<script src="//ezoicanalytics.com/analytics.js"></script>

Step 2: Insert Ad Placeholders

Placeholders are simple HTML containers that tell the AI exactly where it is permitted to consider showing an ad. You generate these unique IDs (e.g., 101, 102) in your EzoicAds Dashboard.

For every location you want to monetize, insert the following code:

<div id="ezoic-pub-ad-placeholder-101"></div>
<script>
    ezstandalone.cmd.push(function () {
        ezstandalone.showAds(101);
    });
</script>

  • Developer Tip: Avoid applying fixed CSS heights or widths to the placeholder div. The AI needs the flexibility to test different ad sizes in real-time to find the highest-paying option for that specific visitor.

Step 3: Verification & The Ramp Up Period

Once the scripts are active and Google has approved your MCM status, your ads will go live automatically. Ezoic will then begin the Ramp Up Period, where the AI collects data to maximize your long-term EPMV.

Using the JavaScript Debugger

To confirm your setup is optimal, append ?ez_js_debugger=1 to any URL on your site. A diagnostic modal will appear to confirm:

  • Script Detection: Verifies the Ezoic library is loading correctly in the browser.

  • Placeholder Count: Ensures the system sees all the locations you've created.

  • Ad Status: Shows real-time request and fill data for each position.

Advanced Documentation

Advanced documentation regarding javascript integration can be found in our Developers Documents. 

Troubleshooting

Ads aren't showing yet

Verify your MCM status in the dashboard. If Google is still reviewing your domain, the Ezoic script will remain idle. Also, ensure your Ads.txt file includes the necessary Ezoic authorized seller entries.

Handling Layout Shifting (CLS)

With JavaScript integration, Ezoic does not automatically reserve space for the ad unit before it loads. To prevent your content from jumping when an ad appears:

  • Manual Aspect Ratio Boxes: You should wrap your placeholder div in a container with a defined minimum height (e.g., min-height: 250px;).

  • CSS Implementation: Use CSS to "hold" the space for the most common ad sizes in that specific location. This ensures a stable user experience and better Core Web Vitals scores.

Dynamic Content

If your site loads content via AJAX or uses "Infinite Scroll," you will need to re-call the ezp.showAds() function whenever new content is injected to notify the engine of the new placeholders.

Contact Information for Further Assistance

If you need further assistance with JavaScript (Standalone) Integration, please log in via support.ezoic.com to make use of our dedicated resources for support. We're here to help!

Was this article helpful?

close Enlarged Image