메인 콘텐츠로 건너뛰기

​
오디언스 타겟팅

사용자 속성을 기반으로 광고를 타겟팅할 수 있습니다.

​
1. 타겟팅 생성

먼저 애드컨트롤 콘솔에서 오디언스 타겟팅을 생성하세요.

타겟팅 생성하기

콘솔에서 오디언스 타겟팅 생성 방법 확인

​
2. 사용자 ID 설정

광고 렌더링 전에 appKey와 uid를 설정해야 합니다. 
import { Adrop } from '@adrop/ads-web-sdk';

// 로그인 후 사용자 ID 설정
Adrop.instance().setConfig({
  appKey: 'YOUR_APP_KEY',
  uid: 'USER_ID'
});
타겟팅 광고가 정상 동작하려면 광고 지면 진입 전에 설정을 완료하세요.

​
3. 사용자 프로퍼티 설정

사용자 속성을 설정하면 더 정교한 타겟팅이 가능합니다. 
const adrop = Adrop.instance();

await adrop.metrics
  .setUserProperties({
    // 기본 제공 속성
    adid: 'ADVERTISING_ID',
    birth: '19931225',        // YYYY, YYYYMM, YYYYMMDD
    gender: 'M',              // M, F, U
    locale: 'ko_KR',          // ISO 639
    timeZone: 'Asia/Seoul',   // ISO 8601

    // 커스텀 속성 (콘솔에서 등록 필요)
    membership: 'premium',
    interests: 'tech,gaming'
  })
  .setAppProperties({
    appName: 'com.example.app',
    appVersion: '1.0.0',
    appBundleVersion: 100
  })
  .commit();
commit()을 호출해야 속성이 서버에 저장됩니다. 기존 데이터와 병합되지 않고 덮어씌워지므로, 업데이트 시 모든 속성을 함께 전송하세요.

​
기본 제공 속성

필드설명형식
adid광고 ID문자열
birth생년월일YYYY, YYYYMM, YYYYMMDD
gender성별M, F, U
locale로케일ISO 639 (ko_KR)
timeZone타임존ISO 8601 (Asia/Seoul)

​
앱 속성

필드설명
appName앱 패키지 ID
appVersion앱 버전 (1.0.0)
appBundleVersion앱 빌드 번호

​
디바이스 속성 (자동 수집)

SDK가 자동으로 수집하는 디바이스 속성입니다.
필드설명
sdkvSDK 버전
deviceWidth기기 화면 너비
deviceHeight기기 화면 높이
osVersionOS 버전
webViewUserAgent브라우저 유저 에이전트
platform플랫폼 (web)

​
커스텀 속성

콘솔에서 추가 등록한 속성을 설정할 수 있습니다. 값은 애드컨트롤 콘솔에서 정의한 타입에 맞게 전달해야 합니다. 
await adrop.metrics
  .setUserProperties({
    membership: 'premium',
    lastPurchaseDate: '2024-01-15',
    favoriteCategory: 'electronics'
  })
  .commit();

​
문맥 타겟팅

페이지나 콘텐츠의 문맥에 따라 광고를 타겟팅할 수 있습니다.

​
1. 타겟팅 생성

먼저 애드컨트롤 콘솔에서 문맥 타겟팅을 생성하세요.

문맥 타겟팅 생성하기

콘솔에서 문맥 타겟팅 생성 방법 확인

​
2. 광고 지면에 값 설정

콘솔에서 설정한 Context Value를 광고 요청 시 전달합니다.

​
Data Attributes 방식

function BannerAd() {
  return (
    <div
      data-adrop-unit="YOUR_UNIT_ID"
      data-adrop-context-id="sport"
    />
  );
}

​
renderAd 방식

import { useEffect, useRef } from 'react';
import { Adrop } from '@adrop/ads-web-sdk';

function BannerAd() {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const adrop = Adrop.instance();

    if (containerRef.current) {
      adrop.renderAd(containerRef.current, {
        unit: 'YOUR_UNIT_ID',
        contextId: 'sport'
      });
    }

  }, []);

  return <div ref={containerRef} />;
}

​
동적 문맥 설정

페이지나 콘텐츠에 따라 동적으로 문맥을 설정할 수 있습니다. 
import { useEffect, useRef } from 'react';
import { Adrop } from '@adrop/ads-web-sdk';

interface AdProps {
  unitId: string;
  category: string;  // 페이지 카테고리
}

function ContextualAd({ unitId, category }: AdProps) {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const adrop = Adrop.instance();

    if (containerRef.current) {
      adrop.renderAd(containerRef.current, {
        unit: unitId,
        contextId: category  // 동적으로 전달
      });
    }

  }, [unitId, category]);

  return <div ref={containerRef} />;
}

// 사용 예시
function SportPage() {
  return (
    <div>
      <h1>스포츠 뉴스</h1>
      <ContextualAd unitId="NEWS_BANNER" category="sport" />
    </div>
  );
}

function TechPage() {
  return (
    <div>
      <h1>테크 뉴스</h1>
      <ContextualAd unitId="NEWS_BANNER" category="tech" />
    </div>
  );
}

​
관련 문서

레퍼런스 > AdropConfig

초기화 옵션 정의

레퍼런스 > AdropAdRequest

광고 요청 파라미터 정의