How to integrate Journey by Mediavine (Grow.me) on a NextJS website

Key Takeaways:

Don't use NextJS's Script component as it causes issues with the Grow dashboard
Use dangerouslySetInnerHTML to initialize the script properly
Minimal configuration required for full integration

Recently, I integrated Journey by Mediavine on my NextJS website. While the process seems straightforward at first, there are some specific considerations when implementing it with NextJS. This guide will help you avoid common pitfalls and get your ads running smoothly.

Common Pitfall to Avoid

The most common mistake when integrating Journey with NextJS is using the built-in Script component. While this might seem like the logical choice, it actually causes issues when accessing the Grow dashboard. Here's why we need a different approach.

Correct Implementation

The solution is to implement the script initialization directly in your root layout file. Here's how to do it properly:

<div
  dangerouslySetInnerHTML={{
    __html: `
      <script data-grow-initializer>
        !(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=!0),
          e.setAttribute("data-grow-faves-site-id","YOUR_SITE_ID_HERE");
          var t=document.getElementsByTagName("script")[0];
          t.parentNode.insertBefore(e,t);
        })();
      </script>
    `,
  }}
/>

Remember to replace YOUR_SITE_ID_HERE with your actual site ID from the Mediavine dashboard.

Why This Approach Works

This implementation method works better because:

It ensures the script loads properly without interference from NextJS's script optimization
It maintains compatibility with the Grow dashboard
It allows the Journey ads to initialize correctly across all pages

Troubleshooting

If you're not seeing ads appear:

Verify your site ID is correct
Check the browser console for any error messages

Conclusion

While integrating Journey by Mediavine with NextJS requires a slightly different approach than traditional integrations, it's actually quite straightforward once you know the correct method. The key is avoiding the NextJS Script component and using the direct initialization approach instead.

Have questions? Feel free to reach out to me on Twitter/X, or consult the Mediavine support team for specific implementation issues.