Monetization Framework

Framework Integration

These requirements apply to any single-page application framework—React, Vue, Svelte, Angular, or vanilla JavaScript with client-side routing.

Requirements

Load script once — monetization.js must load at the app level, before any ad component renders
Initialize on mount — Call _bsa.init() when the ad container first appears
Reload on navigation — Call _bsa.reload() when the route changes
Guard against duplicates — Check if already initialized before calling init again

Logic

// On component mount
if (!document.querySelector(container_selector)) {
  _bsa.init(template, zone_key, placement, options)
}

// On route change
if (document.querySelector(container_selector)) {
  _bsa.reload(container_selector)
}

The pattern is the same across frameworks—only the lifecycle hooks differ.

Example: Next.js

1. Load script globally

In pages/_document.tsx, load the script with beforeInteractive strategy:

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>
  )
}

2. Create ad component

Use useEffect to handle mount and route changes:

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

export function FlexBar() {
  const router = useRouter()

  useEffect(() => {
    const container = document.querySelector('#_flexbar_')

    if (typeof _bsa !== 'undefined' && !container) {
      // Initialize on first mount
      _bsa.init('flexbar', 'CVADC53U', 'placement:yoursite')
    } else if (container) {
      // Reload on route change
      _bsa.reload('#_flexbar_')
    }
  }, [router.asPath])

  return <div id="flexBarContainer" />
}

Adapting to Other Frameworks

Framework	Mount hook	Route change
React	`useEffect`	Router state or `useLocation`
Vue	`onMounted`	`watch` on `$route`
Svelte	`onMount`	`$page` store
Angular	`ngOnInit`	Router events

The integration logic is identical—translate the lifecycle hooks to your framework.

Router APIs evolve. If the example doesn't match your setup, check your framework's docs for the current way to detect route changes.