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 needing complex configuration. Pages remain responsive and fast because the Ezoic library manages ad delivery and layout optimization entirely within the visitor's browser.
Faster option: Try the AI Setup Assistant. The Ezoic AI Setup Assistant can look at your site and give you the exact integration code for your setup, whether you're on plain HTML, React, Vue, Angular, Next.js, or another framework. If you already use an AI coding tool like Cursor, Claude Code, or ChatGPT, you can connect the Setup Assistant to it and let your agent add the code inside your editor. Open the Setup Assistant in your dashboard at EzoicAds > AI Setup Assistant, or continue with the manual steps below.
Framework SDKs (React, Vue, Angular). Ezoic has open-sourced official, MIT-licensed SDKs for React, Vue, and Angular. The SDKs make framework integration easier: install the package for your framework and wrap your app in an EzoicProvider to enable display, rewarded, and video ads plus built-in SPA routing support and CMP consent handling. See the developer docs for more details.
Instructions
Step 1: Add the Header Scripts
Place Ezoic's scripts near the top of your site's <head> so the engine is ready to serve ads as the page loads. Load your consent/privac y script first to keep the site compliant, then load the Ezoic header script and analytics snippet. Typical assets include the Gatekeeper consent library and Ezoic's sa.min.js and analytics.js files.
Step 2: Add Ad Placements
After the header scripts load, place ads. There are two approaches:
- Simple Setup (recommended) — paste a small script wherever you want an ad and the ad appears at that location with no placement IDs to create in the dashboard.
- Placement IDs — create placements in the dashboard when you need advanced sizing, styling, or per-location controls.
For Simple Setup you typically call the client API, for example: ezstandalone.cmd.push(function () { ezstandalone.showAds({ sizes: 300x250 }); }); The sizes parameter is optional; if you omit it, Ezoic will pick the best-paying size for the visitor's device. Pass a fixed WIDTHxHEIGHT size or an array of sizes when needed. Fluid (native-style) ads are added automatically where eligible; use the fluid attribute to override that behavior for a specific spot.
To provide different sizes per device, pass mobile_sizes, tablet_sizes, and desktop_sizes in the same call. You can also place ads by anchor (an element or CSS selector), by named location (for example under_first_paragraph or top_of_page), or append ads automatically at the end of content for feeds and infinite scroll.
If your ad spots aren't inline (single-page apps, dynamically loaded content, or infinite scroll), call ezstandalone.showAds() with an anchor, location, or selector so the engine knows where to insert ads. You can also mark ad spots in your HTML with plain elements and use a single showAds(selector) call to fill each matched element; per-spot settings can be supplied via data-* attributes on those elements.
Optional per-ad attributes include devices (limit to mobile/tablet/desktop), class or style (apply a CSS class or inline style to the ad container), fluid (control native-style ads for that spot), and required (let an id-less ad serve even when the page is near its ad-density cap).
Working examples of every integration style, including id-less, placement IDs, Angular, React, Vue, and Web Games, are available at examples.ezoic.com with copyable source. Ezoic has open-sourced official, MIT-licensed framework SDKs for React, Vue, and Angular. With the SDKs you install the package for your framework and wrap your app in an EzoicProvider to get display, rewarded, and video ads plus SPA routing support and CMP consent handling built in. See the Framework SDKs in the developer docs for usage details: Framework SDKs.
Using Placement IDs: Advanced Control
Placement IDs are useful when you want dashboard-controlled sizing, exact positioning, per-location settings, programmatic control (refreshAds, destroyPlaceholders), and per-placement reporting. Create placements in the Ezoic Dashboard and then insert a placeholder div and call the client API with the placement ID, for example: ezstandalone.showAds(101). Pass multiple placement IDs in one showAds call (for example ezstandalone.showAds(101, 102, 103)) to optimize network requests.
Do not pre-style the placeholder div with fixed spacing that reserves room for an ad; the AI needs flexibility to test sizes and find the highest-paying option. If you need to avoid layout shifts with placement-ID integration, wrap the placeholder in a container with an appropriate min-height sized for the most common creative at that location.
Step 3: Verification and the Ramp Up Period
Once your scripts are active and Google has approved your MCM status, ads go live automatically. Ezoic then enters a Ramp Up Period while the AI collects data to optimize long-term revenue.
To debug the integration, append ?ez_js_debugger=1 to a site URL to open a diagnostic modal that verifies script detection, placeholder count, and real-time ad status for each position.
Advanced Documentation
Ezoic's developer documentation, including the open-sourced MIT-licensed Framework SDKs for Angular, React, and Vue, advanced APIs, and dynamic content handling, is available at docs.ezoic.com. The framework SDKs and docs explain how to install the SDK, wrap your app in an EzoicProvider, and use the built-in features for display, rewarded, and video ads, SPA routing, and consent handling.
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 make sure your Ads.txt file includes the necessary Ezoic authorized seller entries.
Handling Layout Shifting (CLS). With placement-ID-based integration, Ezoic doesn't automatically reserve space for the ad unit before it loads. To prevent your content from jumping when an ad appears, wrap your placeholder div in a container with a defined min-height (e.g., min-height: 250px;) sized for the most common ad in that specific location. This gives a stable user experience and better Core Web Vitals scores. Id-less Simple Setup handles container sizing automatically and doesn't require this workaround.
Dynamic Content. If your site loads content via AJAX or uses infinite scroll, you need to re-call ezstandalone.showAds() whenever new content is injected so the engine knows about the new placements. Id-less calls that use anchor or a CSS selector are the cleanest fit for these scenarios. See Dynamic Content in the developer documentation for more.
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!
