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.

Need help with your integration? Contact supportView source