Monetization Framework

Components

Next.js is a React based frontend framework built by Vercel. You can use the useRouter hook to refresh the ad when page routing happens.

If you're using Next.js 13 or above, you will need to use usePathname as the dependency for the client side component. Learn more in the official documentation.

Loading Monetization.js as a global script

Find the _document.tsx or _document.jsx file in /pages. Load monetization.js on every page layout by importing next/script as shown below. Learn more in Next.js documentation. Here is an example.

_document.tsx

import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <Main />
        <Script
          src="https://m.servedby-buysellads.com/monetization.js"
          strategy="beforeInteractive"
        />
        <NextScript />
      </body>
    </Html>
  )
}

Example of a component that uses the Flex Bar template

The monetization.js is ready for every page, but we still need to create a component for each ad unit so we can initialize and refresh when routing happens. Here is an example using the useRouter path value to refresh the ad when the page URL changes.

FlexBar.tsx

import React, { useEffect } from 'react'
import { useRouter } from 'next/router'

const FlexBar = () => {
  const router = useRouter()

  useEffect(() => {
    const isFlexBarAvailable = document.querySelectorAll('#_flexbar_')[0]
    if (typeof _bsa !== 'undefined' && _bsa && !!!isFlexBarAvailable) {
      _bsa.init('flexbar', 'CVADC53U', 'placement:demo')
    }

    if (isFlexBarAvailable) {
      _bsa.reload('#_flexbar_')
    }
  }, [router.asPath])

  return <div id="flexBarContainer"></div>
}

export default FlexBar

Example of a component that uses a custom template

Here is an example with a custom template. When passing a custom template, the container will create an empty div element with #_custom_ as the ID attribute value. You will want to check whether the value exists before running the function to reload the ad.

BadgeBanner.tsx

import React, { useEffect } from 'react'
import { useRouter } from 'next/router'

const BadgeBanner = () => {
  const router = useRouter()

  useEffect(() => {
    const isBadgeBannerAvailable = document.querySelectorAll(
      '#badge-js #_custom_'
    )[0]
    if (typeof _bsa !== 'undefined' && _bsa && !!!isBadgeBannerAvailable) {
      _bsa.init('custom', 'CWYDC2QE', 'placement:badgeBannerDemo', {
        target: '#badge-js',
        template: `
<style>
.bsa__##external_id## {
  background-image: linear-gradient(145deg, ##backgroundColor##, 90%, ##backgroundColor##80),
    linear-gradient(##textColor## 1px, transparent 0),
    linear-gradient(90deg, ##textColor## 1px, transparent 0);
  background-color: ##backgroundColor##;
}
</style>

<a class="badge-container bsa__##external_id##" style="background-color: ##backgroundColor##; color: ##textColor##; border-color: ##textColor##" href="##link##" rel="sponsored noopener" target="_blank" title="##company## — ##tagline##">
<img class="badge-icon" style="background-color: ##backgroundColor##" src="##image##">
<div class="badge-flex">
  <div class="badge-title">##company## — ##tagline##</div>
  <div class="badge-description">##description##</div>
  <img class="badge-logo" src="##logo##">
  <div class="badge-cta" style="background-color: ##ctaBackgroundColor##; color: ##ctaTextColor##">##callToAction##</div>
</div>
</a>
<a class="badge-ad-via" title="ad via BuySellAds" style="background-color: ##textColor##; color: ##backgroundColor##" href="##ad_via_link##">Ads via BuySellAds</a>
`,
      })

      return
    }

    if (isBadgeBannerAvailable) {
      _bsa.reload('#badge-js')
    }
  }, [router.asPath])

  return <div id="badge-js" className="not-prose"></div>
}

export default BadgeBanner