View as Markdown

Scroll Rail Ads

A scroll rail is a column of display ads that fills a tall sidebar container on desktop. Ads load as the reader scrolls, so the rail stays lightweight on long pages.

Pass the id of one of your own container elements to ezstandalone.showScrollRail and Ezoic mounts the rail inside it. The rail is added after any content already in the container and never overlays or repositions your content.

Usage

<div id="right-sidebar">
    <!-- your sidebar content -->
</div>

<script>
    window.ezstandalone = window.ezstandalone || {};
    ezstandalone.cmd = ezstandalone.cmd || [];
    ezstandalone.cmd.push(function () {
        ezstandalone.showScrollRail('right-sidebar');
    });
</script>

The argument is the element's id as a plain string — no # prefix. The element must be on the page when you call it.

Requirements

  • Desktop only.
  • At least 250px wide. Make it 300px or wider to allow larger ad sizes (300x600).
  • At least ~1500px tall. That's enough room for one ad; taller containers get more.

If the container is too narrow or too short, nothing is rendered.

How Many Ads Appear

One ad per ~1500px of container height:

Container height Ads
3,000px 2
7,500px 5
15,000px 10

Height is measured from below any existing content in your container down to the end of the page content — a container taller than the page itself won't yield more ads.

Multiple Rails on One Page

Call showScrollRail once per container:

ezstandalone.cmd.push(function () {
    ezstandalone.showScrollRail('left-sidebar');
    ezstandalone.showScrollRail('right-sidebar');
});

Each rail sizes itself to its own container. Rails are set up in the order they are created.

Single-Page Apps

The rail automatically re-initializes into the same container id on each new pageview. If a route uses a different container element, call showScrollRail again with the new id after the navigation.