Legacy Features

Prerequisites

Make sure placeholders are created via the Ezoic dashboard. See our support article to learn more about placeholders and how to create them.

Load Standalone library

Load the standalone library by adding this script to the <head> of the page.

1<script async src="//www.ezojs.com/ezoic/sa.min.js"></script>

This will load the ezstandalone global object and run any queued functions.

Adding Placeholders

To add a placeholder to the page, create a div element where the ad should be. The element's id attribute should be the ID of the placeholder with prefix ezoic-pub-ad-placeholder-.

DO NOT add any styling to the actual placeholder div.

Adding styles or reserving space for the ad may end with undesired results (e.g. if a placeholder is not chosen by our system, there may be empty space on the page).

For example, to add a placeholder with the id 103, the HTML would look similar to this.

1<body>
2    <div id="ezoic-pub-ad-placeholder-103">
3    </div>
4</body>

Defining Placeholders

Defined placeholders must exist in the HTML.

Defining placeholders tells ezstandalone which placeholders are available to determine the optimal setup.

Pass all the placeholders that exist on the page to the ezstandalone.define function with the following code.

1<script>
2    window.ezstandalone = window.ezstandalone || {};
3    ezstandalone.cmd = ezstandalone.cmd || [];
4    ezstandalone.cmd.push(function() {
5        ezstandalone.define(102,103,104);
6    });
7</script>

Note: example is assuming placeholders 102, 103, and 104 were created through the dashboard and exist on the page.

Be wary for the correct scoping of ezstandalone.

Calling For Ads

After defining the placeholders, enable standalone by calling ezstandalone.enable(). This will fetch optimizations from our servers.

The following is what the code should look like after defining and enabling the placeholders.

1<script>
2    window.ezstandalone = window.ezstandalone || {};
3    ezstandalone.cmd = ezstandalone.cmd || [];
4    ezstandalone.cmd.push(function() {
5        ezstandalone.define(102,103,104);
6        ezstandalone.enable();
7    });
8</script>

Note: this will call for the ad code of the potential placeholders 102, 103, and 104. In order to have the ads show, display must be called.

Displaying ads

In order to display ads, call ezstandalone.display() after defining and enabling the placeholders.

1<script>
2    window.ezstandalone = window.ezstandalone || {};
3    ezstandalone.cmd = ezstandalone.cmd || [];
4    ezstandalone.cmd.push(function() {
5        ezstandalone.define(102,103,104);
6        ezstandalone.enable();
7        ezstandalone.display();
8    });
9</script>

Setup Complete

Once all steps are done, a basic version of standalone is setup, and pages are ready to show ads!

This section is for websites whose content loads or changes dynamically

Dynamically Changing Pages

When switching between pages dynamically, it is important to call

1ezstandalone.refresh()

Calling ezstandalone.refresh() tells standalone that it is a new pageview and calls for new ad code on the already defined placeholders.

If the new page contains different set of placeholders from the previous page, you must call ezstandalone.define() on the set of placeholders prior to calling refresh

1<script>
2    window.ezstandalone.cmd.push(function() {
3        // define new placeholders and call refresh
4        ezstandalone.define(104, 105, 106);
5        ezstandalone.refresh();
6    });
7</script>

Caution: calling define will overwrite the previous set of placeholders, so make sure to add any placeholders that persist from the previous set

eg. If placeholder 103 and 104 exist on page example.com/page1 and the user dynamically changes to page example.com/page2 where placeholder 104 and 105 exist. Placeholder 104 must be included in the define call

New Content

For content that loads after the initial content has loaded, and new placeholders are added, you'll want to call for those placeholders using the ezstandalone.displayMore function

eg. If a user scrolls down your page and new placeholders 104 and 105 are added to the page you would call the function like so

1<script>
2    window.ezstandalone.cmd.push(function() {
3        // call new placeholders
4        ezstandalone.displayMore(104, 105);
5    });
6</script>

Changing content

If the content changes within the same pageview and a placeholder is no longer needed or visible, you need to properly clean up that placeholder using ezstandalone.destroyPlaceholders

1<script>
2    window.ezstandalone.cmd.push(function() {
3        // destroy placeholders
4        ezstandalone.destroyPlaceholders(104, 105);
5    });
6</script>

Infinite Scroll

For sites which implement an infinite scroll, you'll have to use a combination of calling ezstandalone.destroyPlaceholders followed by ezstandalone.displayMore to reuse placeholders

For infinite scroll it is recommended create a set of in-content placeholders to use specifically for it

Example

The example below shows the flow of an infinite scroll would look like on a site with multiple articles

Start off by calling the placeholder for the first article on page load

1<script>
2    window.ezstandalone = ezstandalone || {};
3    ezstandalone.cmd = ezstandalone.cmd || [];
4    ezstandalone.cmd.push(function() {
5        ezstandalone.define(102,103,104);
6    });
7</script>

User then scrolls to next article so you load the next set of ads

1<script>
2    window.ezstandalone.cmd.push(function() {
3        // call new placeholders
4        ezstandalone.displayMore(104, 105, 106);
5    });
6</script>

User then scrolls to third article and you need to reuse the placeholders from the first article

1<script>
2    window.ezstandalone.cmd.push(function() {
3        // destroy initial place
4        ezstandalone.destroyPlaceholders(102,103,104);
5        // call new placeholders
6        ezstandalone.displayMore(102,103,104);
7    });
8</script>