# Step 3: Ad Placements

Source: https://docs.ezoic.com/docs/ezoicads/implementation/


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:

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

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

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

```html
<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](https://examples.ezoic.com/) with copyable source. Using
a JavaScript framework? See the official
[Framework SDKs](/docs/ezoicadsadvanced/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](/docs/ezoicadsadvanced/advanced/)).

First, create ad placements in your [Ezoic Dashboard](https://pubdash.ezoic.com/ezoicads/adpositions/placeholders), 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:

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