Monetize Your Next.js Website with Journey by Mediavine | Complete Guide

How to Monetize Your Next.js Website with Journey by Mediavine?

Journey by Mediavine (formerly known as Grow) is a premium ad management platform that offers significantly higher RPMs than traditional networks like Google AdSense. Unlike AdSense, Journey uses advanced header bidding technology, allowing multiple ad exchanges to compete for your inventory in real-time.

However, integrating it into a Single Page Application (SPA) like Next.js requires specific configurations to ensure ads load correctly without hurting your Core Web Vitals.

This guide covers the complete developer implementation process, from script injection to fixing the complex “sticky sidebar” issue in React.

Prerequisites

Before integrating, ensure your project meets these requirements:

• Framework: Next.js 13+ (App Router or Pages Router)
• Traffic: At least 10,000 monthly sessions (approx.)
• Content: Original, high-quality content
• Technical: A valid sitemap.xml and HTTPS enabled

Phase 1: Applying to Journey

1. Visit the Journey by Mediavine website and click “Apply Now.”
2. Submit your Google Analytics data and website URL.
3. Wait for the email. The approval process typically takes 3–7 business days.

💡 Pro Tip: While the stated requirement is 10,000 sessions, Journey often accepts sites with slightly lower traffic if the quality is high and the audience is primarily from Tier 1 countries (USA, UK, Canada, Australia).

Phase 2: Adding Journey Scripts to Next.js

There are two scripts involved: the Verification Script (used initially) and the Ad Script (used after approval).

Step 1: The Verification Script (Pre-Approval)

To verify ownership, you must add the Grow.me script to your global layout.

In your app/layout.tsx (or _document.js for older versions), add this code. Replace YOUR_SITE_ID_HERE with the ID found in your Journey dashboard.

TypeScript:

{/* Journey by Mediavine (Grow.me) - Site Verification */}
<script
  data-grow-initializer=""
  dangerouslySetInnerHTML={{
    __html: `
      !(function() {
        window.growMe || (window.growMe = function(e) {
          window.growMe._.push(e);
        }, window.growMe._ = []);
        var e = document.createElement("script");
        e.type = "text/javascript";
        e.src = "https://faves.grow.me/main.js";
        e.defer = true;
        e.setAttribute("data-grow-faves-site-id", "YOUR_SITE_ID_HERE");        
        var t = document.getElementsByTagName("script")[0];
        t.parentNode.insertBefore(e, t);
      })();
    `,
  }}
/>

Step 2: The Ad Script (Post-Approval)

Once you receive the “Congratulations” email, you need to add the actual ad script. Use the Next.js Script component for better performance.

TypeScript

import Script from "next/script";

// ... inside your RootLayout return
<Script
  id="mediavine-journey"
  src="https://scripts.scriptwrapper.com/tags/YOUR_TAG_ID_HERE.js" 
  data-noptimize="1"
  data-cfasync="false"
  strategy="afterInteractive"
/>

Note: Replace YOUR_TAG_ID_HERE with the ID provided in your approval email.

Phase 3: Sidebar Implementation (Crucial)

This is where most Next.js developers fail. Journey tries to inject a “sticky” ad into your sidebar. For this to work, your HTML/CSS structure must be perfect.

The 3 Golden Rules of Sidebar Ads

1. NO Sticky Positioning: The sidebar container itself must NOT have position: sticky or position: fixed.
2. Visible Overflow: The container must have overflow: visible.
3. Correct Selector: You must use a specific class name that you will tell Mediavine to target.

Example Component: SidebarAds.tsx

Here is a copy-paste component for your sidebar wrapper:

TypeScript

"use client";

export default function SidebarAds({ children, className = "" }) {
  return (
    <aside
      className={`sidebar-main mv-sidebar ${className}`}
      // IMPORTANT: Ensure overflow is visible and position is relative
      style={{
        position: "relative", 
        overflow: "visible", 
        minHeight: "100vh" 
      }}
    >
      {/* 1. Above The Fold (ATF) Ad Placeholder */}
      <div
        id="sidebar_atf_target"
        className="mv-ad-target"
        style={{ minHeight: "250px", marginBottom: "20px" }}
      />

      {/* 2. Your Actual Sidebar Content (Recent posts, etc.) */}
      <div className="sidebar-content">
        {children}
      </div>

      {/* 3. Below The Fold (BTF) Sticky Ad Placeholder */}
      <div
        id="sidebar_btf_target"
        className="mv-ad-target mv-sticky-target"
        style={{ minHeight: "250px", marginTop: "20px" }}
      />
    </aside>
  );
}

⚠️ Warning: Do not use position: sticky on the aside element. Journey’s script handles the stickiness of the ad automatically. If you force the sidebar to stick, the ad script will break.

Phase 4: Dashboard Configuration

Once your code is deployed, log in to your Journey Dashboard to connect the dots.

1. Go to Settings > Ad Placements.
2. Locate Sidebar Selector.
3. Enter the class name you used in your component: .mv-sidebar
4. Enable the following Ad Units:
   • Sticky Sidebar: ON
   • Universal Player (Video): ON (This pays very well!)
   • Anchor Ads: ON

Phase 5: Troubleshooting & Verification

How do you know if it’s working?

1. Check the Console

Open Chrome DevTools (F12), go to the Console, and type:

JavaScript:

window.growMe

If it returns a function, the base script is loaded.

2. Check the Sidebar

If you see a “Recommended Content” widget appear in your sidebar, congratulations! This means Journey has successfully identified your sidebar container. The sticky ads usually take 24 to 72 hours to start appearing after the recommended widget shows up.

Common Issues

• Ads causing layout shift: Ensure you added minHeight to your ad target divs.
• Sidebar ads not showing: Double-check that your sidebar parent does NOT have overflow: hidden. This is a common default in some Tailwind classes.

Conclusion

Implementing Journey on Next.js is a great way to maximize your revenue. While the setup is more manual than on WordPress, the performance benefits of Next.js combined with the high RPMs of Mediavine make it a powerful combination for publishers.

Have you implemented Journey on your React app? Let me know in the comments if you’re facing any specific issues!