맞춤 HTML로 Gmail 광고 만들기

숙련된 광고주에게 적합한 맞춤 HTML을 사용하면 기존 Gmail 광고 템플릿과 다른 광고를 만들 수 있습니다. 이러한 광고에는 동영상 및 여러 클릭 유도문안을 포함할 수 있습니다. 자신만의 맞춤 레이아웃을 사용하여 Gmail 광고를 만들려면 맞춤 HTML 파일을 Google Ads에 업로드하세요. 

이 도움말에서는 맞춤 Gmail 광고를 구성하고 업로드하는 방법을 설명합니다.

시작하기 전에

중요: 맞춤 HTML Gmail 광고는 도착 URL 형식을 유지하며, 최종 도착 URL 및 추적 템플릿과 호환되지 않는다는 점에 유의하시기 바랍니다. 업그레이드된 URL에 대해 자세히 알아보세요.

 

현재 대부분의 사용자가 새로운 Google Ads 환경만을 사용하여 계정을 관리하고 있습니다. 아직도 기존 애드워즈 환경을 사용 중이라면 아래에서 이전을 선택하세요. 자세히 알아보기

방법

맞춤 HTML Gmail 광고는 접힌 광고와 펼쳐진 광고의 모든 파일이 포함된 ZIP 폴더입니다. 문제를 피하려면 아래 설명된 엄격한 형식 사양에 주의하세요.

광고의 전체 크기 제한은 다음과 같습니다.

  • 총 ZIP 폴더: 1.25MB 이하
  • 파일 수: 100개 이하
  • 파일 크기: 500KB 이하

접힌 광고를 만드는 방법

접힌 광고의 경우 ZIP 폴더에 파일 2개를 추가합니다.

  • 로고 이미지('logo.png', 'logo.jpg', 'logo.gif')
  • 텍스트 파일('teaser.txt')

로고 이미지 사양

파일 이름은 정확히 'logo.png', 'logo.jpg', 'logo.gif'여야 하고, 파일 형식은 PNG, JPG, GIF여야 합니다.

  • 로고 이미지 크기: 144 x 144 이하
  • 파일 크기: 500KB 이하
  • 파일 형식: PNG, JPG, GIF(애니메이션 제외)

로고 이미지는 작은 아이콘, 그래픽, 브랜드 로고입니다.

이미지는 일반 해상도 기기에서는 50x50 정사각형으로 표시되고, 일부 화면의 경우 최대 144x144 해상도로 더 선명하게 표시됩니다. 

텍스트 파일 사양

파일 이름은 정확히 'teaser.txt'여야 하고, 파일 형식은 TXT여야 합니다. 다음은 올바른 형식의 텍스트 파일의 예입니다.

광고주: 비즈니스 이름
제목: 비즈니스 이름에서 모든 제품 20% 할인
설명: 신제품을 저렴한 가격으로 구입하세요!
표시 URL: www.example.com
방문 페이지: https://www.example.com/sale

참고: 예를 정확히 따르세요. 카테고리(예: '광고주')와 구체적인 정보를 모두 포함하도록 하세요. 아래 표에는 글자수 한도 및 포함할 내용에 대한 자세한 정보가 들어 있습니다.

  글자수 한도 포함할 내용
광고주 20 회사의 이름 또는 도메인
제목 25 쿠폰, 할인율, 이목을 끌 만한 소식 등 포함 가능
설명 100 간단한 요약, 클릭 유도문안 등
표시 URL 32 광고에 표시될 URL
방문 페이지 무제한 티저 리디렉션 URL - 펼쳐진 광고에서 '발신자 표시 단축 URL'을 클릭하면 연결되는 도착 URL로 사용됩니다. 이 입력란에 정적 클릭 추적 URL을 추가할 수 있습니다. 표시 URL을 클릭하면 이 페이지로 연결됩니다.

 

펼쳐진 광고를 만드는 방법

펼쳐진 광고의 경우 ZIP 폴더에 HTML 파일 1개와 이미지 폴더 1개를 추가합니다.

  • 펼쳐진 광고의 이미지 파일이 포함된 이미지 폴더(폴더 이름: ‘Images’)
  • 정확히 'index.html'이라는 이름의 HTML 파일

이미지 폴더 사양

  • 광고에는 최소 1개의 이미지가 포함되어야 하며 최대 100개의 이미지를 포함할 수 있습니다. 펼쳐진 광고에 동영상을 삽입하려면 아래의 동영상 섹션으로 이동하세요.
  • 이미지당 최대 너비: 650px
  • 이미지당 최대 높이: 1000px(참고: 광고의 효과를 최대화하려면 모든 텍스트와 이미지를 포함하여 전체 광고 캔버스의 높이를 650px 이하로 유지하는 것이 좋습니다.)

HTML 파일 사양

기술적 세부정보

  • URL: 절대 URL을 1개 이상(최대 15개) 포함해야 하며 모든 특수문자(예: 공백, #)는 인코딩해야 합니다.
  • 형식: 콘텐츠 및 이미지가 여러 기기에서 일관되게 표시되도록 표준 HTML 테이블을 사용하여 레이아웃을 조절합니다.
  • 추적: 정적 추적 URL을 사용하여 외부 클릭을 추적할 수 있습니다. 노출 추적 픽셀 및 동적 추적 URL은 허용되지 않습니다. 'Gmail 맞춤 HTML 광고' 템플릿을 사용하고 있다면 index.html 파일뿐 아니라 teaser.txt 파일에서도 사용할 추적 URL을 추가해야 합니다.
  • 마크업: HTML(UTF8 인코딩 사용), 일부 HTML5 태그('ARTICLE', 'ASIDE', 'FIGCAPTION', 'FIGURE', 'FOOTER', 'HEADER', 'MARK', 'SECTION', 'TIME', 'WBR'), 일부 CSS(태그의 스타일 속성만 지원됨. 예: <div style="color: black" >)만 지원됩니다.

허용되지 않는 마크업

  • 자바스크립트: <script> 태그는 광고에서 자동으로 삭제됩니다.
  • 스타일시트: <link> 태그는 광고에서 자동으로 삭제됩니다.
  • 플래시
  • HTML5: 'ARTICLE', 'ASIDE', 'FIGCAPTION', 'FIGURE', 'FOOTER', 'HEADER', 'MARK', 'SECTION', 'TIME', 'WBR' 태그만 지원됩니다.
  • 오디오
  • iFrame
  • 애니메이션 이미지: GIF

지원되는 CSS

azimuth border-right-color font-size-adjust list-style padding-bottom text-decoration-style
background border-right-style font-stretch list-style-image padding-left text-emphasis
background-attachment border-right-width font-style list-style-position padding-right text-emphasis-color
background-blend-mode border-spacing font-synthesis list-style-type padding-top text-emphasis-style
background-clip border-style font-variant margin Pause text-indent
background-color border-top font-variant-alternatives margin-bottom pause-after text-justify
background-image border-top-color font-variant-caps margin-left pause-before text-kashida-space
background-origin border-top-left-radius font-variant-east-asian margin-right pitch text-orientation
background-position border-top-right-radius font-variant-ligatures margin-top pitch-range text-overflow
background-repeat border-top-style font-variant-numeric marker-offset quotes text-transform
background-size border-top-width font-weight max-height richness text-underline-position
border border-width height max-width speak unicode-bidi
border-bottom box-sizing image-orientation min-height speak-header vertical-align
border-bottom-color caption-side image-resolution min-width speak-numeral voice-family
border-bottom-left-radius clear ime-mode mix-blend-mode speak-punctuation white-space
border-bottom-right-radius color isolation object-fit speech-rate width
border-bottom-style direction layout-flow object-position stress word-break
border-bottom-width display layout-grid opacity table-layout word-spacing
border-collapse elevation layout-grid-char outline text-align word-wrap
border-color empty-cells layout-grid-char-spacing outline-color text-align-last writing-mode
border-left float layout-grid-line outline-style text-autospace zoom
border-left-color font layout-grid-mode outline-width text-combine-upright  
border-left-style font-family layout-grid-type overflow text-decoration  
border-left-width font-feature-settings letter-spacing overflow-x text-decoration-color  
border-radius font-kerning line-break overflow-y text-decoration-line  
border-right font-size line-height padding text-decoration-skip  

펼쳐진 광고 HTML 파일에 동영상 추가

  1. 동영상을 추가하는 방법

    YouTube 동영상은 미리보기 창이 있는 광고에 삽입할 수 있습니다. 컴퓨터 사용자가 동영상 이미지를 클릭하면 동영상이 Gmail 내 라이트박스에서 재생됩니다. 사용자가 동영상 시청을 완료하면 Gmail 펼쳐진 광고로 돌아갑니다. 휴대기기에서는 사용자가 지정한 동영상 플레이어(예: YouTube 앱 또는 브라우저)에서 동영상이 재생됩니다. 

    방법: YouTube에서 동영상을 추가하려면 YouTube 링크, 이미지 소스, 표시 텍스트를 광고에 적합하게 코드화하세요. 예를 들면 다음과 같습니다.

    <a href="http://www.youtube.com/watch?v=oHg5SJYRHA0"><img src="images/play.jpg" alt="Gmail 동영상"></a>

    참고: Google Ads에서 광고를 미리 보는 경우 YouTube 동영상은 표시되지 않거나 라이트박스에서 재생됩니다.

  2. 새 탭에 동영상을 추가하는 방법

    라이트박스가 아니라 새 탭에서 YouTube 동영상을 재생하려면 클래스를 'nonplayable'로 설정하세요.

    예를 들면 다음과 같습니다.

    <a href="http://www.youtube.com/watch?v=oHg5SJYRHA0" class="nonplayable"><img src="images/play.jpg" alt="Gmail 동영상"></a>

  3. 중요: 미리보기 이미지에 '재생' 버튼 포함

    이미지를 클릭하면 동영상이 재생된다는 것을 사람들에게 알려주려면 어떤 유형으로든 미리보기 이미지에 재생 버튼이 포함되어야 합니다. Google Ads에서는 미리보기 이미지가 동영상이라고 알려주는 표시를 추가하지 않습니다.

관련 링크

도움이 되었나요?
어떻게 하면 개선할 수 있을까요?
이전 신규

도움이 더 필요하신가요?

로그인하여 추가 지원 옵션으로 문제를 빠르게 해결하세요.