Monetizing Your Next.js Website with Journey by Mediavine

Prerequisites

Before you begin, ensure you have:

• ✅ A Next.js 13+ application (App Router or Pages Router)
• ✅ At least 10,000 monthly sessions (Journey's minimum requirement)
• ✅ Quality, original content
• ✅ A properly configured sitemap.xml
• ✅ Mobile-responsive design
• ✅ HTTPS enabled on your domain

Phase 1: Applying to Journey by Mediavine

Step 1.1: Create Your Account & Check Eligibility

1. Visit Journey by Mediavine
2. Click "Apply Now"
3. Submit your website URL and traffic analytics

Step 1.2: The Approval Process

• Verification: You must install the Grow.me verification script (see Phase 2) to prove ownership.
• Review: Mediavine checks your content quality and traffic sources.
• Timeline: Approval typically takes 3-7 business days.

Phase 2: Adding Journey Scripts to Next.js

There are two distinct scripts involved in the process: one for verification (before approval) and one for ads (after approval).

Step 2.1: Site Verification Script (Pre-Approval)

Immediately after applying, you need to add this script to your layout.tsx to verify site ownership. Use the exact code below, helping Journey verify your site:

{/* 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"); // <-- REPLACE THIS ID
        
        var t = document.getElementsByTagName("script")[0];
        t.parentNode.insertBefore(e, t);
      })();
    `,
  }}
/>

Action: Replace YOUR_SITE_ID_HERE with the ID provided in your Journey dashboard during setup.

Step 2.2: Ad Script (Post-Approval)

Once you receive the "Congratulations!" email, you'll need to add the ad script. This is what actually displays the ads.

Add this Script component to your app/layout.tsx, preferably below the verification script:

{/* Journey by Mediavine Code - to show Ads */}
<Script
  id="mediavine-journey"
  src="https://scripts.scriptwrapper.com/tags/YOUR_TAG_ID_HERE.js" // <-- REPLACE THIS ID
  data-noptimize="1"
  data-cfasync="false"
/>

Action: Replace YOUR_TAG_ID_HERE with the unique ID from your approval email or dashboard (the part after tags/).

Phase 3: Sitemap Configuration

A well-structured sitemap helps Journey understand your content. Create a dynamic sitemap in Next.js:

// app/sitemap.ts
import { MetadataRoute } from "next";

export default function sitemap(): MetadataRoute.Sitemap {
  const baseUrl = "https://gpacalculators.net";
  
  const pages = [
    "",
    "/about",
    "/calculator-1",
    "/calculator-2",
  ];
  
  return pages.map((route) => ({
    url: `${baseUrl}${route}`,
    lastModified: new Date().toISOString(),
    changeFrequency: route === "" ? "daily" : "weekly",
    priority: route === "" ? 1.0 : 0.8,
  }));
}

Phase 4: Sidebar Implementation for Desktop Ads

Sidebar ads are highly valuable on desktop. Journey can inject "sticky" ads that follow the user—but only if properly configured.

Critical Requirements

Sidebar Component Example

// components/layout/sidebar-ads.tsx
"use client";

export default function SidebarAds({ className = "" }) {
  return (
    <div
      className={`sidebar-main mv-sidebar ${className}`}
      style={{
        position: "relative",  // NOT sticky
        overflow: "visible",   // CRITICAL
      }}
    >
      {/* ATF Target */}
      <div
        id="sidebar_atf_target"
        className="mv-ad-target hidden md:block"
        style={{ minHeight: "250px", marginBottom: "1rem" }}
      />

      {/* Your sidebar content */}
      <div className="sidebar-content">
        {/* Content here */}
      </div>

      {/* BTF Sticky Target */}
      <div
        id="sidebar_btf_target"
        className="mv-ad-target mv-sticky-target hidden md:block"
        style={{ minHeight: "250px", marginTop: "1rem" }}
      />
    </div>
  );
}

Phase 5: Configuring Journey Dashboard

Configuring the Sidebar Selector

This is the most critical step for sidebar ads:

1. Log in to your Journey Dashboard
2. Navigate to Settings → Ad Placements
3. Find "Sidebar Selector"
4. Enter your CSS selector:

.sidebar-main, .mv-sidebar, aside[role="complementary"]

Enabling Ad Types

Phase 6: Verification and Troubleshooting

Verifying Script Installation

Open your browser's Developer Tools (F12) and check:

// In Console tab
console.log(window.growMe);  // Should return a function

// Check sidebar elements
document.querySelectorAll('.sidebar-main, .mv-sidebar').length;
// Should return 1 or more

Timeline for Ad Appearance

• Anchor Ads: Immediate (within hours)
• In-Content Ads: 24-48 hours
• Sidebar Ads: 24-72 hours
• Video Ads: 24-48 hours
• Recommended Widget: Immediate

Best Practices

Performance Optimization

• Use afterInteractive loading strategy to prevent blocking page render
• Lazy load below-fold content to improve Core Web Vitals
• Reserve space for ads with minHeight to minimize layout shifts

Revenue Optimization

• Content length matters - Longer pages = more ad slots
• Regular content updates - Fresh content attracts more traffic
• Mobile optimization - Growing share of ad revenue
• Multiple pages - More pageviews = more impressions

Common Issues and Solutions

Summary Checklist