@buzzvil/buzz-flex-ad

@buzzvil/buzz-flex-ad

FlexAd를 웹에서 불러오는 로더입니다. 실제 SDK 번들은 Buzzvil CDN에서 런타임에 받아오고, 이 패키지에는 그 번들을 불러오는 얇은 로더와 타입만 들어 있습니다. @stripe/stripe-js의 loadStripe와 같은 방식이라, 패키지를 자주 올리지 않아도 늘 최신 SDK가 적용됩니다.

React·Vue·Nuxt·Next 등 번들러를 쓰는 프로젝트에서 씁니다.

설치

npm i @buzzvil/buzz-flex-ad

사용

loadBuzzFlexAd()로 SDK를 불러온 뒤 init → render 순으로 호출합니다. 서버(SSR)에서는 null을 돌려주니, 반환값이 있을 때만 인스턴스를 쓰면 됩니다.

import { loadBuzzFlexAd } from "@buzzvil/buzz-flex-ad";

const flexAd = await loadBuzzFlexAd();
if (flexAd) {
  await flexAd.init({ appId, publisherUserId, unitId });
  flexAd.render("#flex-ad-container");
}

Next·Nuxt처럼 SSR이 있는 환경에서는 useEffect·onMounted처럼 클라이언트에서만 도는 곳에서 호출하세요.

버전 고정

옵션 없이 부르면 늘 최신 SDK가 적용됩니다. 검증한 버전에 고정해 반영 시점을 직접 정하고 싶으면 version을 넘기면 됩니다.

await loadBuzzFlexAd({ version: "1.0.36" });

version은 이 npm 패키지 버전이 아니라 SDK 번들 버전입니다. 어떤 값을 넣을지는 Buzzvil에서 안내받으세요.

폐쇄망·엄격한 CSP

CDN에 접근할 수 없는 환경이면, 단독으로 동작하는 SDK 번들을 직접 호스팅하고 그 URL을 넘기면 됩니다.

await loadBuzzFlexAd({ scriptUrl: "https://your-host/buzzbenefit-flex-ad.js" });