This is a simple guide on how to implement Ezoic monetization on your NextJS app. This guide covers only the technical aspect of the ads implementation. You have to get approved by Ezoic to show ads on your app.

Inserting Ezoic standalone Javascript code

First you must copy the below code and place in _app.js file.

<Script
        src="https://ezojs.com/ezoic/sa.min.js"
        async={true}
        strategy="beforeInteractive"
        crossOrigin="anonymous"
/>

Inserting Ezoic placeholders

The next step is defining placeholders to show ads on your app. Ezoic uses this places to push different types of ads.

You can generate placeholders from Ezoic dashboard.

https://pubdash.ezoic.com/ezoicads/adpositions/placeholders

Now place the generated ad codes where you want to appear in the web app.

<nav><h1>MyApp</h1></nav>
<div>Content</div>
<div id="ezoic-pub-ad-placeholder-101"> </div>
<div>Content</div>
<div id="ezoic-pub-ad-placeholder-102"> </div>
<div>Content</div>
<footer></footer>

Enabling Ezoic ads

Now you can use useEffect hook to push ads to the app when an page load occurs.

useEffect(() => {
    try {
      let ezoic = ezstandalone;
      ezoic.define(101, 102);
      if (!ezoic.enabled) {
        ezoic.enable();
        ezoic.display();
        ezoic.refresh();
      }
    } catch (ex) {
      // console.log("error: ", ex);
    }
  }, []);

• ezstandalone.define() - Defines the ad placeholders. Pass all the ad placeholder ids as parameters.
• ezstandalone.enable() - Enables the placeholders defined.
• ezstandalone.display() - Displays the ads in placeholders.
• ezstandalone.refresh() - Triggers when internal navigation occurs.