config

nestads.config.SlotSettingsConfig

슬롯 설정을 위한 기본 구성 인터페이스입니다.

속성 요약

속성

설명

배너 광고 설정입니다.

팝업 광고 설정입니다. (준비중)

프리미엄 배너 광고 이미지형 설정입니다.

프리미엄 배너 광고 동영상형 설정입니다.

광고 요청 타임아웃 시간입니다.

image

image: {
  backgroundType: "AUTO"|"CUSTOM",
  backgroundColor: string,
  backgroundTransparency: number
}

속성

설명

backgroundType: "AUTO"|"CUSTOM"

광고 배경 설정 모드를 선택할 수 있습니다.

AUTO (default)
CUSTOM

backgroundColor: string

광고 배경 색상 값 설정입니다.

hex color code (#RRGGBB)를 입력합니다.

backgroundType이 CUSTOM인 경우 필수값입니다.

backgroundTransparency: number

광고 배경 투명 값 설정입니다.

0~1 값을 입력합니다.

default는 1입니다.

예시

backgroundType이 AUTO일 경우 서버에서 받은 backgroundColor가 적용됩니다.

소재 이미지 0,0 좌표 내 1px 의 색과 같으며 투명도는 적용되지 않습니다.

const slot = nestads.defineSlot("/1234567/example", [160, 600]);

slot.setConfig({
  image: {
    backgroundType: "AUTO"
  },
});

backgroundType이 CUSTOM일 경우 사용자가 설정한 내용이 적용됩니다.

예시

slot.setConfig({
  image: {
    backgroundType: "CUSTOM",
    backgroundColor: "#ff0000",
    backgroundTransparency: 0.5,
  },
});

popupBanner

popupBanner: {
  width: number;
  height: number;
  popupMarginTop: number;
  popupMarginLeft: number;
  popupMarginBottom: number;
  popupMarginRight: number;
  leftButtonText: string;
  rightButtonText: string;
  leftButtonColor: string;
  rightButtonColor: string;
  leftButtonFontColor: string;
  rightButtonFontColor: string;
  leftButtonBorderColor: string;
  rightButtonBorderColor: string;
  leftButtonFontFamily: string;
  rightButtonFontFamily: string;
  borderColor: string;
  backgroundColor: string;
};

속성

설명

width: number

팝업 광고 이미지 영역의 width(px) 값입니다.

의 두 번째 파라미터인 size 보다 우선시 됩니다.

default 는 400 입니다.

height: number

팝업 광고 이미지 영역의 height(px) 값입니다.

의 두 번째 파라미터인 size 보다 우선시 됩니다.

default 는 400 입니다.

popupMarginTop: number

팝업 광고 위쪽의 margin(px) 값입니다.

스크린 너비가 720px 미만일 때 동작합니다.

소재스펙 레이아웃의 팝업 위치가 중앙, 좌상단, 우상단일 때 동작합니다.

popupMarginLeft: number

팝업 광고 왼쪽의 margin(px) 값입니다.

스크린 너비가 720px 미만일 때 동작합니다.

소재스펙 레이아웃의 팝업 위치가 중앙, 좌상단, 좌하단일 때 동작합니다.

popupMarginBottom: number

팝업 광고 아래쪽의 margin(px) 값입니다.

스크린 너비가 720px 미만일 때 동작합니다.

소재스펙 레이아웃의 팝업 위치가 중앙, 좌하단, 우하단일 때 동작합니다.

popupMarginRight: number

팝업 광고 오른쪽의 margin(px) 값입니다.

스크린 너비가 720px 미만일 때 동작합니다.

소재스펙 레이아웃의 팝업 위치가 중앙, 우상단, 우하단일 때 동작합니다.

leftButtonText: string

팝업 광고 왼쪽 버튼의 텍스트값입니다.

default 는 어드민의 소재스펙 레이아웃에서 설정한 값입니다.

rightButtonText: string

팝업 광고 오른쪽 버튼의 텍스트값입니다.

default 는 어드민의 소재스펙 레이아웃에서 설정한 값입니다.

leftButtonColor: string

팝업 광고 왼쪽 버튼의 배경 색상 값입니다.

default 는 소재스펙 레이아웃에 따라 달라집니다.

버튼형: #f1f1f1
텍스트형: transparent

rightButtonColor: string

팝업 광고 오른쪽 버튼의 배경 색상 값입니다.

default 는 소재스펙 레이아웃에 따라 달라집니다.

버튼형: #222222
텍스트형: transparent

leftButtonFontColor: string

팝업 광고 왼쪽 버튼의 텍스트 색상 값입니다.

default 는 소재스펙 레이아웃에 따라 달라집니다.

버튼형: #000000
텍스트형: #ffffff

rightButtonFontColor: string

팝업 광고 오른쪽 버튼의 텍스트 색상 값입니다.

default 는 소재스펙 레이아웃에 따라 달라집니다.

버튼형: #ffffff
텍스트형: #ffffff

leftButtonBorderColor: string

팝업 광고 왼쪽 버튼의 테두리 색상 값입니다.

default 는 소재스펙 레이아웃에 따라 달라집니다.

버튼형: #b1b1b1
텍스트형: transparent

rightButtonBorderColor: string

팝업 광고 오른쪽 버튼의 테두리 색상 값입니다.

default 는 소재스펙 레이아웃에 따라 달라집니다.

버튼형: #000000
텍스트형: transparent

leftButtonFontFamily: string

팝업 광고 왼쪽 버튼의 font-faimly 값입니다.

default 는 inherit 입니다.

rightButtonFontFamily: string

팝업 광고 오른쪽 버튼의 font-faimly 값입니다.

default 는 inherit 입니다.

borderColor: string

팝업 광고 이미지 영역의 테두리 색상 값입니다.

default 는 #b1b1b1 입니다.

backgroundColor: string

팝업 광고 이미지 영역의 배경 색상 값입니다.

default 는 광고 소재 이미지 0,0 좌표 내 1px 색상입니다.

예시

slot.setConfig({
    popupBanner: {
      width: 300,
      height: 300,
      borderColor: "#555555"
    }
});

premiumBannerImage

premiumBannerImage: {
 // 확장 전 배너 설정
  backgroundType: "AUTO"|"CUSTOM";
  backgroundColor: string;
  backgroundTransparency: number;

  //확장 후 소재 설정
  expandedBannerSize: [number, number] | "FLUID";
  expandedBackgroundType: string;
  expandedBackgroundColor: string;
  expandedBackgroundTransparency: number;
  expandedPosition: "LEFT_TOP" | "LEFT_CENTER" | "LEFT_BOTTOM" | "CENTER_TOP" | "CENTER_BOTTOM" | "RIGHT_TOP"| "RIGHT_CENTER" | "RIGHT_BOTTOM";

  //Button 설정
  ctaBackgroundColor: string;
  ctaBackgroundTransparency: number;
  ctaBorderColor: string;
  ctaFontColor: string;
  ctaFontSize: number;

  //HintAsset 설정
  hintAssetColor: string;
  hintAssetSubColor: string;

  //AdvertiserText 설정
  advertiserTextColor: string;
  advertiserTextFontSize: number;

  //AdText 설정
  adTextColor: string;
  adTextFontSize: number;
};

속성

설명

backgroundType: "AUTO"|"CUSTOM"

확장 전 배너의 배경 설정 모드를 선택할 수 있습니다.

AUTO 로 설정한 경우 소재 이미지 0,0 좌표 내 1px 색상

(구할 수 없는 경우 #ffffff), 불투명도 80%로 배경색이 채워집니다.

AUTO (default)
CUSTOM

backgroundColor: string

확장 전 배너의 배경 색상 값 설정입니다.

hex color code (#RRGGBB)를 입력합니다.

backgroundType이 CUSTOM인 경우 필수값입니다.

backgroundTransparency: number

확장 전 배너의 배경 투명도 설정입니다.

0~1 값을 입력합니다.

default는 1입니다.

expandedBannerSize: [number, number] | "FLUID"

확장 후 배너의 사이즈를 설정합니다.

[number, number] 타입으로 설정할 경우 고정 사이즈내에서 확장 후 배너가 그려집니다.

FLUID로 설정할 경우 부모 요소의 100%에 맞춰서 확장 후 배너가 그려집니다.

주의) FLUID는 Mobile 전용 레이아웃에서만 동작합니다.

expandedBackgroundType: "AUTO"|"CUSTOM"

확장 후 배너의 배경 설정 모드를 선택할 수 있습니다.

AUTO 로 설정한 경우 소재 이미지 0,0 좌표 내 1px 색상

(구할 수 없는 경우 #ffffff), 불투명도 80%로 배경색이 채워집니다.

AUTO (default)
CUSTOM

expandedBackgroundColor: string

확장 후 배너의 배경 색상 값 설정입니다.

hex color code (#RRGGBB)를 입력합니다.

backgroundType이 CUSTOM인 경우 필수값입니다.

expandedBackgroundTransparency: number

확장 후 배너의 배경 투명도 설정입니다.

0~1 값을 입력합니다.

default는 1입니다.

expandedPosition:

확장 후 배너가 확장 전 배너 기준으로 어느 위치에서 열릴 지 설정하는 값입니다.

주의) PC 전용 레이아웃에서만 동작합니다.

ex) LEFT_TOP 으로 설정할 경우, 확장 전 배너의 왼쪽 위를 꼭지점으로 잡고 확장 후 배너를 그려줍니다.

ctaBackgroundColor: string

CTA 버튼 미디어 스펙의 배경 색상 값 설정입니다.

hex color code (#RRGGBB)를 입력합니다.

default 는 #000000 입니다.

어드민에서 광고를 생성할 때 설정했다면 그 값이 우선순위가 더 높습니다.

ctaBackgroundTransparency: number

CTA 버튼 미디어 스펙의 배경 투명도 설정입니다.

0~1 값을 입력합니다.

default는 0.7입니다.

ctaBorderColor: string

CTA 버튼 미디어 스펙의 테두리 색상 설정입니다.

hex color code (#RRGGBB)를 입력합니다.

default 는 어드민에서 설정한 값, 혹은 #000000 입니다.

ctaFontColor: string

CTA 버튼 미디어 스펙의 폰트 색상 설정입니다.

hex color code (#RRGGBB)를 입력합니다.

default 는 #ffffff 입니다.

ctaFontSize: number

CTA 버튼 미디어 스펙의 폰트 크기 설정입니다.(px)

default 는 광고 크기에 따라 달라집니다.

hintAssetColor: string

힌트 에셋 미디어 스펙의 주 색상 값입니다.

hex color code (#RRGGBB)를 입력합니다.

default 는 #2c67ff 입니다.

hintAssetSubColor: string

힌트 에셋 미디어 스펙의 서브 색상 값입니다.

hex color code (#RRGGBB)를 입력합니다.

default 는 #ffffff 입니다.

advertiserTextColor: string

광고주 텍스트 미디어 스펙의 폰트 색상 설정입니다.

hex color code (#RRGGBB)를 입력합니다.

default 는 #ffffff 입니다.

advertiserTextFontSize: number

광고주 텍스트 미디어 스펙의 폰트 크기 설정입니다.(px)

default 는 광고 크기에 따라 달라집니다.

adTextColor: string

광고 텍스트 미디어 스펙의 폰트 색상 설정입니다.

hex color code (#RRGGBB)를 입력합니다.

default 는 #ffffff 입니다.

adTextFontSize: number

광고 텍스트 미디어 스펙의 폰트 크기 설정입니다.(px)

default 는 광고 크기에 따라 달라집니다.

예시

PC 환경 전용 레이아웃인 경우 expandedBannerSize 를 고정 사이즈로 적용합니다. 확장 전 소재를 기준으로 확장 후 소재의 위치 또한 지정할 수 있습니다.

slot.setConfig({
    premiumBannerImage: {
      expandedBannerSize: [1280, 720],
      expandedPosition: "LEFT_TOP"
    }
});

Mobile 환경 전용 레이아웃인 경우 expandedBannerSize 를 변동 사이즈(부모 요소의 100%)로 적용할 수 있습니다.

slot.setConfig({
    premiumBannerImage: {
      expandedBannerSize: "FLUID",
    }
});

premiumBannerVideo

premiumBannerVideo: {
 // 확장 전 배너 설정
  backgroundType: "AUTO"|"CUSTOM";
  backgroundColor: string;
  backgroundTransparency: number;

  //확장 후 소재 설정
  expandedBannerSize: [number, number] | "FLUID";
  expandedBackgroundColor: string;
  expandedBackgroundTransparency: number;
  expandedPosition: "LEFT_TOP" | "LEFT_CENTER" | "LEFT_BOTTOM" | "CENTER_TOP" | "CENTER_BOTTOM" | "RIGHT_TOP"| "RIGHT_CENTER" | "RIGHT_BOTTOM";

  //동영상 설정
  videoPlayCondition: "AUTO_START" | "MANUAL_START";
  videoStartMuted: boolean;
  videoQuality: "AUTO" | "HIGH" | "MEDIUM" | "LOW";
  videoDefaultVolume: number;
  videoProgressBarColor: string;
  videoSoundButtonColor: string;
  videoCloseButtonColor: string;
  videoPlaybackButtonColor: string;

  //Button 설정
  ctaBackgroundColor: string;
  ctaBackgroundTransparency: number;
  ctaBorderColor: string;
  ctaFontColor: string;
  ctaFontSize: number;

  //HintAsset 설정
  hintAssetColor: string;
  hintAssetSubColor: string;

  //AdvertiserText 설정
  advertiserTextColor: string;
  advertiserTextFontSize: number;

  //AdText 설정
  adTextColor: string;
  adTextFontSize: number;
};

속성

설명

backgroundType: "AUTO"|"CUSTOM"

확장 전 배너의 배경 설정 모드를 선택할 수 있습니다.

AUTO 로 설정한 경우 소재 이미지 0,0 좌표 내 1px 색상

(구할 수 없는 경우 #ffffff), 불투명도 80%로 배경색이 채워집니다.

AUTO (default)
CUSTOM

backgroundColor: string

확장 전 배너의 배경 색상 값 설정입니다.

hex color code (#RRGGBB)를 입력합니다.

backgroundType이 CUSTOM인 경우 필수값입니다.

backgroundTransparency: number

확장 전 배너의 배경 투명도 설정입니다.

0~1 값을 입력합니다.

default는 1입니다.

expandedBannerSize: [number, number] | "FLUID"

확장 후 동영상의 사이즈를 설정합니다.

[number, number] 타입으로 설정할 경우 고정 사이즈내에서 확장 후 동영상이 그려집니다.

FLUID로 설정할 경우 부모 요소의 100%에 맞춰서 확장 후 동영상이 그려집니다.

주의) FLUID는 Mobile 전용 레이아웃에서만 동작합니다.

expandedBackgroundColor: string

확장 후 동영상의 배경 색상 값 설정입니다.

hex color code (#RRGGBB)를 입력합니다.

default는 #ffffff 입니다.

expandedBackgroundTransparency: number

확장 후 동영상의 배경 투명도 설정입니다.

0~1 값을 입력합니다.

default는 0.8입니다.

expandedPosition:

확장 후 동영상이 확장 전 배너 기준으로 어느 위치에서 열릴 지 설정하는 값입니다.

주의) PC 전용 레이아웃에서만 동작합니다.

ex) LEFT_TOP 으로 설정할 경우, 확장 전 배너의 왼쪽 위를 꼭지점으로 잡고 확장 후 동영상을 그려줍니다

videoPlayCondition: "AUTO_START" | "MANUAL_START"

동영상이 50% 이상 노출될 때 자동으로 재생이 시작될 지, 수동으로 버튼을 누르면 시작할 지 설정합니다.

default 는 AUTO_START(자동 재생)입니다.

videoStartMuted: boolean

동영상을 mute 상태로 시작할 지 여부를 설정합니다.

주의) 자동 재생일 경우 무조건 mute 상태로 재생됩니다.

default 는 true 입니다.

videoQuality: "AUTO" | "HIGH" | "MEDIUM" | "LOW"

동영상의 화질을 선택할 수 있습니다.

default 는 AUTO(네트워크 환경에 따라 자동 조절)입니다.

videoDefaultVolume: number

동영상의 볼륨을 설정합니다.

0~1 값을 입력합니다.

default 는 0.5 입니다.

videoProgressBarColor: string

동영상 재생바의 색상 값을 설정합니다.

hex color code (#RRGGBB)를 입력합니다.

default 는 #ffffff 입니다.

videoSoundButtonColor: string

동영상 사운드 버튼의 색상 값을 설정합니다.

hex color code (#RRGGBB)를 입력합니다.

default 는 #ffffff 입니다.

videoCloseButtonColor: string

동영상 닫기 버튼의 색상 값을 설정합니다.

hex color code (#RRGGBB)를 입력합니다.

default 는 #ffffff 입니다.

videoPlaybackButtonColor: string

동영상 재생/일시정지/리플레이/정지 버튼의 색상 값을 설정합니다.

hex color code (#RRGGBB)를 입력합니다.

default 는 #ffffff 입니다.

ctaBackgroundColor: string

CTA 버튼 미디어 스펙의 배경 색상 값 설정입니다.

hex color code (#RRGGBB)를 입력합니다.

default 는 #000000 입니다

어드민에서 광고를 생성할 때 설정했다면 그 값이 우선순위가 더 높습니다.

ctaBackgroundTransparency: number

CTA 버튼 미디어 스펙의 배경 투명도 설정입니다.

0~1 값을 입력합니다.

default는 0.7입니다.

ctaBorderColor: string

CTA 버튼 미디어 스펙의 테두리 색상 설정입니다.

hex color code (#RRGGBB)를 입력합니다.

default 는 어드민에서 설정한 값, 혹은 #000000 입니다.

ctaFontColor: string

CTA 버튼 미디어 스펙의 폰트 색상 설정입니다.

hex color code (#RRGGBB)를 입력합니다.

default 는 #ffffff 입니다.

ctaFontSize: number

CTA 버튼 미디어 스펙의 폰트 크기 설정입니다.(px)

default 는 광고 크기에 따라 달라집니다.

hintAssetColor: string

힌트 에셋 미디어 스펙의 주 색상 값입니다.

hex color code (#RRGGBB)를 입력합니다.

default 는 #2c67ff 입니다.

hintAssetSubColor: string

힌트 에셋 미디어 스펙의 서브 색상 값입니다.

hex color code (#RRGGBB)를 입력합니다.

default 는 #ffffff 입니다.

advertiserTextColor: string

광고주 텍스트 미디어 스펙의 폰트 색상 설정입니다.

hex color code (#RRGGBB)를 입력합니다.

default 는 #ffffff 입니다.

advertiserTextFontSize: number

광고주 텍스트 미디어 스펙의 폰트 크기 설정입니다.(px)

default 는 광고 크기에 따라 달라집니다.

adTextColor: string

광고 텍스트 미디어 스펙의 폰트 색상 설정입니다.

hex color code (#RRGGBB)를 입력합니다.

default 는 #ffffff 입니다.

adTextFontSize: number

광고 텍스트 미디어 스펙의 폰트 크기 설정입니다.(px)

default 는 광고 크기에 따라 달라집니다.

예시

PC 환경 전용 레이아웃인 경우 expandedBannerSize 를 고정 사이즈로 적용합니다. 확장 전 소재를 기준으로 확장 후 소재의 위치 또한 지정할 수 있습니다.

slot.setConfig({
    premiumBannerVideo: {
      expandedBannerSize: [1280, 720],
      expandedPosition: "RIGHT_CENTER",
      videoPlayCondition: "MANUAL_START",
      ...
    }
});

Mobile 환경 전용 레이아웃인 경우 expandedBannerSize 를 변동 사이즈(부모 요소의 100%)로 적용할 수 있습니다.

slot.setConfig({
    premiumBannerVideo: {
      expandedBannerSize: "FLUID",
    }
});

httpTimeout

httpTimeout: number

광고 요청 타임아웃 시간입니다. 기본 1000ms가 설정됩니다.

예시

slot.setConfig({
  httpTimeout: 1000
});

nestads.config.LoaderSettingConfig

로더 설정을 위한 기본 구성 인터페이스입니다.

속성 요약

속성

설명

광고 요청 타임아웃 시간입니다.

요청할 광고의 최 갯수입니다.

httpTimeout

httpTimeout: number

광고 요청 타임아웃 시간입니다. 기본 1000ms가 설정됩니다.

예시

loader.setConfig({
  httpTimeout: 1000
});

maxNumberOfAds

maxNumberOfAds: number

요청할 광고의 최대 갯수를 입력합니다. 기본은 1입니다.

예시

loader.setConfig({
    maxNumberOfAds: 5
});

PreviousEventTypeMap NextSlot

Last updated 9 days ago