HTML App Mobile Banner/Interstitial

HTML App Mobile Banner 및 HTML App Mobile Interstitial은 모바일 앱에서 HTML 크리에이티브를 표시하는 배너입니다.

HTML 크리에이티브 개발

HTML 코드가 다음 요구 사항을 충족하는지 확인하세요.

HTML 코드 요구 사항

  1. HTML 파일의 최대 크기는 65,000바이트입니다.

  2. JavaScript와 CSS를 배너의 HTML 코드 안에 배치하는 것이 가장 좋습니다. 최종 HTML 코드가 허용된 최대 크기를 초과하는 경우, JavaScript와 CSS를 별도의 파일로 분리하여 크기를 줄일 수 있습니다.

    1. JS와 CSS 코드를 .js 또는 .css 확장자로 별도의 파일에 저장합니다.

    2. 파일 크기는 300KB를 초과할 수 없습니다.

    3. 추가 파일(이미지, 스타일, 스크립트)을 연결하려면 절대 링크( src="js/script.js", src="css/style.css")를 사용하세요. 프로젝트가 업로드되면, Adfox가 파일 경로를 인식하고, 자동으로 Files 탭에 업로드하며, 업로드된 프로젝트에서 이러한 파일의 모든 링크를 교체합니다.

      상대 링크( src="../js/script.js")를 사용하지 마세요.

      JS와 CSS 파일 연결 예시:

      <script type="text/javascript" src="LINK_TO_FILE"></script><link rel="stylesheet" type="text/css" href="LINK_TO_FILE" />

  3. 프로젝트에는 .html 확장자를 가진 파일을 하나만 포함할 수 있습니다.

  4. 단일 프로젝트의 최대 파일 수는 50개입니다.

  5. 프로젝트에서 허용되는 파일 유형: CSS, JS, HTML, GIF, PNG, JPG, JPEG, SVG, JSON, FLV, MP4, OGV, OGG, WEBM, AVI, and SWF.

  6. 각 파일의 최대 크기(압축된 파일에도 적용됨):

    • 300KB.
    • 동영상 파일의 경우 1MB.

  7. 파일 이름은 숫자, 라틴 문자, 밑줄 문자만 포함해야 합니다. 파일 이름에 키릴 문자를 사용하거나 공백, 따옴표, 특수 문자를 사용할 수 없습니다.

  8. 변수 및 객체 이름에는 키릴 문자를 포함할 수 없습니다. 이 제한은 배너 텍스트에는 적용되지 않습니다.

  9. 완성된 프로젝트는 ZIP 아카이브입니다.

이미지 요구 사항

  • 파일의 최대 크기: 300KB.
  • 허용되는 이미지 형식: PNG, GIF, JPG, SVG.
  • 고해상도 이미지를 사용하세요. 그러면 모바일 장치에서 배너의 표시 품질이 향상됩니다. 그러나 로딩 시간이 길어질 수도 있습니다.
  • 이미지 크기를 줄이려면 PNG 및 JPEG 파일을 지원하는 TinyPng과 같은 서비스를 사용할 수 있습니다.
  • SVG 이미지 파일을 사용할 수 있습니다. 작고, 애니메이션을 지원하며, 벡터 기반이기 때문에 데스크톱이나 휴대폰 등 모든 장치에서 더 나은 품질을 제공합니다.

HTML 크리에이티브를 위한 편집 소프트웨어를 선택하세요. 다음 지침에 따라 HTML 크리에이티브를 아카이브에 넣어야 합니다.

Adobe Animate CC

  1. Adobe Animate CC 버전 16.0 이상에 대해 클릭 가능한 단일 영역(버튼)이 있는 배너 템플릿을 다운로드합니다.

  2. Adobe Animate에서 HTML5 Canvas 프로젝트를 생성하거나 기존 프로젝트를 엽니다.

  3. File → Publish Settings에서 게시 설정을 열고 1단계의 템플릿을 사용합니다.

  4. 원하는 디렉터리를 선택하고 프로젝트를 게시합니다.

  5. 전체 배너 영역은 클릭 가능합니다. 이는 광고주의 사이트로 연결되는 버튼입니다. 링크는 Adfox의 배너 설정에서 크리에이티브로 가져옵니다.

Google Web Designer 편집기

  1. Google Web Designer용 배너 템플릿을 다운로드합니다.

    편집기에서 크리에이티브를 만들 때 이 배너의 코드를 사용할 수 있습니다. 아카이브의 내용을 Google Web Designer 템플릿 폴더로 추출합니다. 예시:

    /Users/[USER_NAME]/Documents/Google Web Designer/templates

    템플릿에는 클릭 및 이벤트 카운터가 올바르게 작동하도록 하는 adfox_HTML5.js 스크립트와 매개변수 세트가 포함되어 있습니다:

    %request.reference_mrc%, %user2%, %eventN%, 여기서 N은 4에서 30까지의 이벤트 번호입니다.

  2. 클릭을 처리 중입니다.

    모든 이벤트는 Events 탭의 애니메이션 요소에 할당됩니다.

    Interactive area 구성 요소는 작업 호출에 사용됩니다.

    이를 추가하고 Tap Area → Touch/Click 이벤트를 선택합니다.

    Custom code 탭에서 클릭 함수 호출을 선택합니다.

    • callClick(): 단일 버튼이 사용되는 경우.

    • callClick(n): 여러 개의 클릭 가능한 버튼이 있는 경우 사용.

    • callEvent(n): 애니메이션에서 이벤트를 클릭 없이 호출해야 할 때 사용.

    n은 호출할 이벤트의 번호입니다.

    스트레칭 배너 사용 방법

    사이트의 컨테이너 너비에 맞게 배너를 늘이려면, Свойства 패널에서 배너 위치와 크기를 픽셀이 아닌 백분율로 지정하세요.

    상단 도구 모음에서 Выровнять по контейнеру 및 Резиновый макет 옵션을 사용합니다.

    정렬 도구를 사용하기 전에 Резиновый макет을 활성화하면, 상위 컨테이너 크기를 변경할 때 모든 요소가 서로 및 컨테이너 크기를 기준으로 정렬됩니다.

    상대적인 요소 크기를 백분율로, 절대적인 크기를 픽셀로 동시에 사용할 수 있습니다.

    Google Web Designer의 프로젝트 예시.

  3. 다음 설정으로 프로젝트를 게시합니다.

    • Inline local files 활성화됨.
    • Create ZIP 활성화됨.
    • Group unpacking 활성화됨.
    • WebKit 및 Mozilla에 대해 CSS prefix 활성화됨.

    Примечание

    Adfox에 배너를 추가할 때, 어떤 버튼이 어떤 이벤트와 일치하는지 관리자에게 알려주세요. 각 이벤트에 대해 관리자는 고유한 링크를 추가하며, 이는 변수로 배너 코드에 전달됩니다.

    프로젝트를 게시한 후 .zip 확장자로 압축합니다. 크리에이티브를 Adfox 배너에 업로드할 준비가 되었습니다.

기타 편집기

배너의 클릭 카운터

Adfox 배너에 클릭 통계를 표시하려면, HTML 코드에서 href 속성에 대한 a 태그를 찾아 변수 %banner.reference_mrc_user2%를 추가하세요.

링크의 경우 target 속성을 %banner.target% 변수와 함께 속성으로 사용하세요. 속성이 없으면 링크는 iframe 내부에서 열립니다. 즉, 광고된 사이트가 배너 위치에서 열립니다.

배너 클릭수를 계수하는 HTML 코드 예시:

<a href="%banner.reference_mrc_user2%" target="%banner.target%">Advertiser's website</a>

배너 내 여러 링크에 대한 클릭수 계수

배너에 광고된 사이트의 다양한 페이지로 연결되는 링크가 여러 개 있고, 각각의 클릭수를 계수해야 한다고 가정하겠습니다.

<a href="http://site.com" target="_blank">첫 번째 링크</a>
<a href="http://site.com/about/" target="_blank">두 번째 링크</a>

href 속성값을 %request.reference_mrc@%banner.eventN% 변수로 교체합니다. 여기서 N은 4에서 28까지의 이벤트 번호입니다. 예시:

<a href="%request.reference_mrc%@%banner.event4%" target="%banner.target%">첫 번째 링크</a>
<a href="%request.reference_mrc%@%banner.event5%" target="%banner.target%">두 번째 링크</a>

Adfox 배너 통합을 처리하는 관리자에게 어떤 링크가 어떤 변수와 일치하는지 반드시 알려주세요. Events 탭에서 배너를 추가할 때 다음 정보를 지정하세요.

  • 첫 번째 링크: 이벤트 4에 대해 http://site.com — %banner.event4%.

  • 두 번째 링크: 이벤트 5에 대해 http://site.com/about/ — %banner.event5%.

Adfox에 배너 추가

Adfox에 배너를 추가하려면:

  1. 광고 캠페인 설정에서 Banners 탭으로 이동하여 Add를 클릭합니다.

  2. App Mobile Banner 또는 App Mobile Interstitial 유형을 선택하고HTML App Mobile Banner 또는 HTML App Mobile Interstitial 템플릿을 각각 선택합니다.

  3. 배너 매개변수를 설정합니다.

    • Priority: 캠페인에서 배너 표시 순서를 결정하는 숫자입니다. 숫자가 높을수록 동일한 캠페인 내 다른 배너보다 우선순위가 높습니다. 우선순위에 대해 자세히 알아보려면 Adfox 도움말을 참조하세요.

    • Archive with creative HTML5 content: 프로젝트가 포함된 ZIP 아카이브를 업로드하고 HTML5 필드를 비워 둡니다(배너를 추가한 후 프로젝트의 HTML 파일 내용으로 채워짐).

    • Tracking pixel link: 기본적으로 Adfox 픽셀 //banners.adfox.ru/transparent.gif를 사용합니다. 타사 시스템에서 노출을 추적하려면 Adfox 픽셀을 삭제하고 다른 링크를 지정하세요.

    • HTML5: 프로젝트 아카이브를 업로드한 경우 이 필드는 자동으로 입력됩니다.

    • Transition URL: 광고주 사이트 링크를 입력합니다. 클릭이 올바르게 작동하도록 하려면 링크에 프로토콜(http:// 또는 https://)이 포함되어 있는지 확인하세요.

    • Start date and time: 필수 매개변수입니다. 기본적으로 이 매개변수는 현재 날짜로 설정됩니다. 변경하지 않으면 배너가 추가된 후 즉시 제공되기 시작합니다(상태가 active로 설정된 경우).

    • Ad label: Ad 또는 Social Ad를 선택하여 배너에 라벨을 추가합니다. 광고 크리에이티브에 이미 라벨이 포함된 경우 드롭다운 목록의 Disabled 값을 그대로 둘 수 있습니다.

      Примечание

      Social Ad 라벨을 추가한다고 해서 크리에이티브가 자동으로 소셜 광고로 정의되지는 않습니다. 크리에이티브를 상태 레지스터에서 소셜 광고로 라벨링하려면 해당하는 최종 광고주와의 계약에서 Social ads contract를 선택하세요.

    • Domain: 라벨에 추가할 광고주 도메인( Ad / Example.com 또는 Social ad / Example.com)을 지정하세요(드롭다운 목록에서 Ad 또는 Social Ad 값을 선택한 경우에만).

    • Show banner menu: 클릭할 수 없는 배너에 토큰을 추가하려면 이 옵션을 활성화하세요. 배너가 제공되면 오른쪽 상단 모서리에 메뉴 아이콘이 표시됩니다. 이 아이콘을 클릭하면 광고주에 대한 정보와 토큰을 복사하기 위한 버튼이 표시됩니다(이 배너에 대한 라벨링을 활성화했거나 타사 토큰을 지정한 경우).

      배너 메뉴에는 권장 기술 사용 규칙에 대한 링크가 포함되어 있습니다. 이는 2006년 7월 27일 제정된 연방법 제149-FZ호 “정보, 정보 기술 및 정보 보호에 관한 법률” 10.2-2조 1항 3호의 준수를 위해 요구되는 사항입니다.

      Примечание

      배너에 라벨이 지정되어야 하는 경우, 배너가 사용자에게 제공될 때 토큰을 사용할 수 있도록 배너 메뉴를 활성화할 수 있습니다.

    • Settings for Russian ad register: 이 섹션은 캠페인 설정에서 라벨링 절차로 Advertising labeling을 선택한 경우에만 사용할 수 있습니다. 이 섹션의 필드를 작성하여 Yandex 광고 데이터 운영자에게 크리에이티브를 등록하세요. 크리에이티브에는 자동으로 토큰이 할당됩니다. 광고 라벨링에 대한 자세한 내용은 Adfox 도움말을 참조하세요.

    • Name: 배너의 이름을 입력하세요. 이 필드를 비워두면 순차적인 번호가 할당됩니다.

    • Status: 배너의 상태를 선택하세요.

      • active: 배너를 제공할 준비가 되었습니다.
      • paused: 배너 노출이 일시 중지되었습니다.
      • completed: 배너가 제공되지 않습니다.

    • Disabled on new placements: 이 옵션은 기본적으로 활성화되어 있습니다. 배너를 생성하면 자동으로 배치되지 않습니다.

      • 캠페인이 배치된 사이트나 섹션 내에 새로 생성된 배치 내.
      • 배너가 생성된 후 캠페인 배치 설정에서 활성화된 지면 내. 이 옵션을 비활성화하면 캠페인 배치가 활성화된 모든 배치에 배너가 자동으로 추가됩니다.

    • Targeting profile: 이전에 생성한 타겟팅 프로필을 선택하세요. 타겟팅 프로필에 대해 자세히 알아보려면 Adfox 도움말을 참조하세요.

    • Events enabled: 이 옵션은 타사 시스템에서 추적할 이벤트에 대한 다이렉트 링크를 얻는 데 사용됩니다. 옵션을 활성화하려면 Placements 탭에서 배너 옆에 있는 을 클릭하세요. 열리는 창에서 1부터 30까지의 이벤트에 대한 링크를 볼 수 있습니다. 이를 복사하여 타사 시스템에 전송해 추적하세요.

    • Impressions in total, day, hour:

      • Impressions total, day, hour: 배너 최대 노출수. 캠페인이 고르게 배포되면 배너 표시 종료일을 설정하세요. 노출수가 최대치에 도달하면 배너의 상태가 completed로 변경되고 더 이상 제공되지 않습니다.
      • Impressions per day: 배너 일일 최대 노출수. 하루가 시작된 이후 노출수가 최대치에 도달하면 다음 날이 시작될 때까지 일시 중지됩니다.
      • Impressions per hour: 배너 시간당 최대 노출수. 1시간이 시작된 이후 노출수가 최대치에 도달하면 다음 1시간이 시작될 때까지 일시 중지됩니다.

    • Clicks total, per day, per hour:

      • Clicks total: 배너 최대 클릭수. 캠페인이 고르게 배포되면 배너 표시 종료일을 설정하세요. 클릭수가 최대치에 도달하면 배너의 상태가 Completed로 변경되고 더 이상 제공되지 않습니다.
      • Clicks per day: 배너 일일 최대 클릭수. 하루가 시작된 이후 클릭수가 최대치에 도달하면 다음 날이 시작될 때까지 노출이 일시 중지됩니다.
      • Clicks per hour: 배너 시간당 최대 클릭수. 1시간이 시작된 이후 클릭수가 최대치에 도달하면 다음 1시간이 시작될 때까지 노출이 일시 중지됩니다.

    • End time: 종료 날짜와 시간을 설정하려면 먼저 옵션을 활성화하세요.

  4. 배너를 저장하려면 Add를 클릭하세요.

지원 문의

Previous
배너 요구 사항
Next
이미지 앱 모바일 배너/전면