View as Markdown

Step 3: Ad Placements

Now that you've integrated Ezoic's scripts and set up your ads.txt file, it's time to add ad placements to your website. This final step will start displaying ads and generating revenue.

There are two ways to place ads:

  1. Simple setup (recommended) — paste a small script wherever you want an ad; the ad appears right there. No dashboard configuration and no placeholder IDs needed.
  2. Placement IDs — create placements in your dashboard for advanced control over sizing, styling, and per-location settings.

Simple Setup — No Placement IDs

Paste this snippet wherever you want an ad. The ad appears exactly where the script is — nothing to create in the dashboard:

<script>
    ezstandalone.cmd.push(function () {
        ezstandalone.showAds({ sizes: "300x250" });
    });
</script>

sizes is optional — leave it out (ezstandalone.showAds({})) and Ezoic picks the best-paying size configured for that position on the visitor's device type. Size selection doesn't measure your container, so if the spot is narrower than your main content column, pass sizes to keep ads that fit. You can pass a single size or an array like sizes: ["300x250", "336x280"].

Sizes must be fixed WIDTHxHEIGHT values. Fluid (native-style) ads are added automatically where the placement is eligible — you don't request them as a size (see the optional fluid attribute below to control them).

Different sizes per device

Use mobile_sizes and desktop_sizes to split sizes by device in one call. sizes stays the default for any device you don't override:

<script>
    ezstandalone.cmd.push(function () {
        ezstandalone.showAds({
            mobile_sizes: ["300x250", "336x280"],
            desktop_sizes: ["728x90", "970x250"],
        });
    });
</script>

Tablets use tablet_sizes if given, otherwise desktop_sizes, otherwise sizes. These attributes work on id-based calls too.

Place one snippet per ad spot: one above your content, one between paragraphs, one in your sidebar — each snippet places one ad at its own position.

<p>First paragraph of your article...</p>

<script>
    ezstandalone.cmd.push(function () {
        ezstandalone.showAds({ sizes: "300x250" });
    });
</script>

<p>Second paragraph of your article...</p>
Ads never stack: use one showAds snippet per spot. To show several ads, place several snippets at different positions in your page.

Placing ads from JavaScript

If your ad spots aren't marked by inline scripts — single-page apps, dynamically loaded content, infinite scroll — tell showAds where to place the ad:

  • anchor — an element or CSS selector; the ad is inserted right after it: ezstandalone.showAds({ sizes: "300x250", anchor: "#after-comments" })
  • location — a named position Ezoic resolves for you: ezstandalone.showAds({ location: "under_first_paragraph" }). Supported locations include top_of_page, under_page_title, under_first_paragraph, under_second_paragraph, mid_content, long_content, longest_content, bottom_of_page, and the sidebar family sidebar, sidebar_middle, sidebar_bottom.
  • Neither — the ad is appended at the end of your content, which suits feeds and infinite scroll where new content keeps arriving.

Marking ad spots in your HTML

Instead of one script per spot, you can mark ad spots with plain elements and make a single showAds call with a CSS selector. Each matched element hosts one ad, and per-ad settings come from data-* attributes on the element:

<div class="ezoicad" data-sizes="300x250,336x280"></div>
<div class="ezoicad" data-sizes="300x250" data-fluid="false"></div>
<div class="ezoicad" data-devices="desktop" data-sizes="728x90"></div>

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

The ad is placed inside the matched element, so you style and position the container however you like. Available data-* attributes: data-sizes, data-mobile_sizes, data-desktop_sizes, data-tablet_sizes (comma-separated size lists), data-devices (comma-separated device list), data-fluid, data-required, and data-location (a named location label for reporting — the ad still renders inside the element).

Elements are only used once: calling showAds(".ezoicad") again — after a route change in a single-page app, or after appending new content in an infinite scroll — skips the spots that already have ads and only fills newly added elements.

Optional attributes

You don't need any of these for a basic setup — they're per-ad controls for when you want them:

  • devices — only place the ad on the listed device types ("mobile", "tablet", "desktop"). On other devices the snippet does nothing — no ad, no request: ezstandalone.showAds({ devices: ["desktop"], sizes: "728x90" })
  • class / style — a CSS class and/or inline style applied to the ad's container div, so you can style the spot without owning the markup: ezstandalone.showAds({ sizes: "300x250", class: "my-ad-frame", style: "margin: 24px auto;" })
  • fluid — control fluid (native-style) ads for this spot. fluid: false prevents them even where they'd normally be eligible (useful when variable-height creatives break your layout); fluid: true allows them where your configuration would otherwise disable them. Safety limits (above-the-fold positions, fixed-size frames) always apply.
  • required — id-less ads default to required: true, meaning the ad serves even past the page's automatic ad-density cap. Pass required: false to let Ezoic skip the ad when the page already carries enough ads.
Working examples of every integration style — id-less, placement IDs, Angular, React, Vue, and Web Games — are live at examples.ezoic.com with copyable source. Using a JavaScript framework? See the official Framework SDKs for Angular, React, and Vue.

Using Placement IDs — Advanced Control

Placement IDs are useful when you want more control than the simple setup provides:

  • Responsive sizing — configure different size lists per placement and adjust them per device in the dashboard.
  • Styling and exact positioning — you own the placeholder div, so you decide exactly where it sits in your markup and layout.
  • Per-location settings — every placement gets its own entry in your dashboard for controlling behavior, running A/B tests, and reading per-placement reporting.
  • Programmatic control — target specific placements with refreshAds, destroyPlaceholders, and the required flag (advanced usage).

First, create ad placements in your Ezoic Dashboard, or work with your Ezoic Onboarding Specialist for optimized placement recommendations.

Once you have your ad placement IDs, add this code wherever you want ads to appear on your site:

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

Replace 101 with your actual placement ID from the dashboard. Insert this code for each ad location on your site.

Pages with multiple placements should pass all placement IDs into a single showAds() call. This reduces server requests and improves loading speed.

Example: ezstandalone.showAds(101, 102, 103, 104)

DO NOT add any styling to the actual placeholder div.

Adding styles or reserving space for the ad may result in empty white space if an ad doesn't load.

Calling ezstandalone.showAds() without any arguments will call the function for every placeholder div that exists on that page.
Important: To ensure Ezoic ads work properly on your site, don't forget to remove any leftover ad code from other ad networks.

Setup Complete

Once you have completed these steps, you have successfully implemented EzoicAds on your site. If you have any questions or need assistance, please reach out to Ezoic's support team.