본문 바로가기
티스토리/구글 애드센스

AMP용 자동광고의 의미, 티스토리에 AMP 자동광고를 게재할 수 있을까?

by 랭크로 2019. 10. 3.

AMP용 자동광고가 대체 뭘까 궁금해서 한참을 검색해봤습니다. AMP는 쉽게말해 모바일 접속환경을 개선시켜주는 차세대 모바일 웹 기술입니다. 즉, 모바일 웹에서 신속하게 반응하는 페이지를 구현하는 것이죠. 그리고 바로 이 AMP기술을 활용한 광고가 AMP용 자동광고입니다. AMP 자동광고를 사용하면 여러가지 이점이 있지만 무엇보다 차세대 모바일 웹 기술이라는 이름에 걸맞게 모바일 기기에서 광고 로딩에 걸리는 시간을 단축시켜줍니다. 

그럼 티스토리 블로그에 AMP용 자동광고를 실을 수 있을까요? 답은 '대부분의 티스토리 블로그에는 AMP용 자동광고를 적용할 수 없다.' 입니다. AMP용 자동광고를 적용하기 위해서는 AMP HTML로 작성된 AMP 페이지로 구성되어야 합니다. 해당 AMP 페이지 내에 AMP 자동광고 라이브러리 및 광고코드를 삽입함으로써 AMP 자동광고가 정상동작을 하는 것입니다. 하지만 티스토리 대부분의 스킨에는 AMP HTML이 적용되어 있지 않죠. 따라서 AMP HTML를 적용한 AMP 페이지로 구성되지 않는 이상 AMP용 자동광고는 일반적인 티스토리에 적용할 수 없는 것입니다.

사실 저는 AMP용 자동광고를 구글에 나와있는 절차대로 했을 경우 아무 문제 없이 반영이 되는지 알고 열심히 따라 해봤습니다. 하지만 결과는 반영 전이나 반영 후나 같았습니다. 흑... 여러분들은 저와 같은 실수를 반복하지 마시기 바랍니다. 아무튼... 이번 시간에는 AMP용 자동광고의 개념과 자동광고를 했을 때의 (구글이 설명하고 있는) 좋은 점, 그리고 AMP용 자동광고를 AMP HTML이 적용된 홈페이지에 싣는 방법 등에 대해 공유해 보도록 하겠습니다.

AMP란 무엇일까?

AMP는Accelerated Mobile Pages의 줄임말입니다. 가속, 휴대기기, 웹페이지... 대충 감이 오시죠? AMP는 스마트폰이나 테블릿 등 모바일(휴대)기기에서 웹페이지를 이전보다 빠른 속도로 처리할 수 있도록 도와주는 기능입니다. 데스크탑이 아닌 모바일 접속환경을 개선시켜주는 것이죠. 

AMP는 특정 페이지를 별도의 서버캐시에 임시로 저장해서 필요할 때 즉시 접속할 수 있도록 도와주는 기술입니다. 즉, 사용자 입장에서는 주서버에 접속하는 직접 것보다 로딩시간을 단축시켜줄 수 있는 것입니다. 예를 들어 현재의 제 블로그 포스트를 열었을 때의 화면을 보실까요?

▼ 아래 그림에서 상단의 네모점선 부분이 광고가 표시되는 영역인데 포스트 글은 불러와 졌지만 광고가 로딩되기까지 약간의 딜레이(Delay)가 있습니다. 누군가가 검색을 해서 제 포스트를 검색했을 때 그 '누군가'는 공란으로 표시되는 곳이 아무것도 없는 것인줄 알고 바로 아래로 스크롤해서 내리겠죠. 그럼 이곳에 뜨는 광고가 있으나 마나한 게 됩니다. 즉, 제일 처음에 확인되어야 할 광고가 안뜨는 문제가 발생하는 것이죠.

▼ 만약 AMP용 자동광고가 정상적으로 적용된다면 어떻게 될까요? 아래 그램에서 상단 광고영역부분이 포스트 글과 거의 동시에 나타납니다. 이렇게 되면 아래로 스크롤해서 내리기 이전에 광고가 확인이 되기 때문에 해당광고가 적기에 노출되는 효과가 발생하는 것입니다. 적용만 된다면 정말 좋은 기능인 것 같습니다.

AMP용 자동광고룰 사용했을 때의 좋은점 (By Google 고객센터)

1. 광고는 AMP용 자동광고가 알아서 할테니 블로거는 컨텐츠에만 신경써!

광고를 일일이 삽입하는 절차가 없으므로 오로지 컨텐츠 제작에만 신경을 쓰라는 말입니다.

2. 수익을 늘려줄 수 있어. ('늘려줄게'라는 말은 아니네요.)

AMP용 자동광고는 페이지를 스스로 분석한 후 적재적소에 광고를 제재한다고 하네요.

3. 사용하기 완전 쉬움.

AMP용 자동광고를 게재하기 위해 스크립트 및 코드를 한 번만 삽입하면 나머지는 구글에서 알아서 한다고 합니다.

AMP용 자동광고를 AMP HTML이 적용된 AMP 페이지에 싣는 방법

먼저, 아래의 절차는 AMP HTML이 적용된 홈페이지인 것으로 가정하고 알려드리겠습니다. 제 블로그 스킨은 AMP HTML을 적용하고 있지 않기 때문에 개념과 절차만 이해해 주세요.

자, AMP 페이지에 그럼 AMP용 자동광고를 적용하러 가봅시다.

▼ 애드센스의 '광고' 하위의 '자동광고' 탭을 클릭해주세요.

▼ '자동광고' 옆의 'AMP용 자동광고'를 선택합니다.

▼ AMP용 자동광고에 대한 간단한 설명이 나와있군요. AMP의 이점을 활용한 자동광고환경을 만들어준다고 하는군요. AMP에 대해서는 위에서 설명드렸죠?

▼ AMP 자동광고를 티스토리에 적용하려면 세 단계의 절차가 필요합니다.

1단계는 AMP 자동광고를 사용하겠다는 디스플레이 광고형식 사용 설정입니다.

▼ 우측의 '사용/미사용' 버튼을 눌러주세요.

▼ 이렇게 말이죠. 

▼ 그럼 화면 하단에 AMP용 자동 광고의 설정이 갱신되었다는 메세지가 생성됩니다.

▼ 하단의 '새 형식 자동추가'는 체크된 채로 그대로 두시면 됩니다. 광고에 새로운 형식이 생길 때마다 자동으로 반영하겠다는 내용입니다.

2단계는 amp-auto-ads 라이브러리 스크립트를 복사해서 AMP html의 head 태그에 붙여넣는 것입니다.

▼ 우측의 '펼치기' 버튼을 눌러주세요.

▼ 하단의 '코드복사' 버튼을 눌러줍니다.

▼ 참고로 이 스크립트는 AMP 자동광고 라이브러리를 로드하는 역할을 한다고 하네요. 

▼ 자, 코드가 복사되었으니 이번에는 티스토리 관리자페이지로 갑시다. '꾸미기' 하단의 '스킨편집' 탭을 눌러줍니다.

▼ 우측상단의 'html 편집' 버튼을 눌러서 편집화면으로 들어가시구요.

▼ 편집할 대상이 html 이므로 'HTML'탭을 클릭합니다.

▼ <head>와 </head>태그 사이에 좀 전에 복사해둔 코드를 넣으면 됩니다. 어려우시면 <head>태그 바로 아래에 붙여넣기 하시면 됩니다. <head>태그는 html 소스코드의 윗부분에 있기 때문에 쉽게 찾을 수 있습니다. 찾기 어려우시면 html 소스코드에 마우스커서를 둔 상태에서 'Ctrl + F' 키를 쳐서 <html> 또는 html 을 검색하시면 됩니다. (아래에서 다시 설명드릴게요.)

▼ <head> 태그 바로 아래에 붙여넣기를 했습니다.

3단계는 광고코드를 복사해서 html 의 body 태그에 붙여넣는 것입니다.

▼ 우측의 '펼치기' 버튼을 눌러서 화면을 펼쳐줍니다.

▼ 아래의 광고코드를 복사해주세요.

▼ 광고코드를 설정하는 방법이 나와있군요. 광고가 게재되는데 일반적으로 20분정도가 소요된다고 하네요.

▼ 다시 티스토리 HTML 탭으로 돌아옵니다.

▼ 이번에는 <body>와 </body>태그 사이에 바로 전 복사해둔 코드를 넣습니다. 어려우시면 <body> 태그 바로 아래에 붙여넣으세요. body 태그가 잘 찾아지기 않으시면 html 소스코드에 마우스커서를 둔 상태에서 'Ctrl + F' 및 'body' 를 눌러서 body 태그를 찾아주세요.

▼ <body>태그 바로 아래에 광고코드를 붙여 넣었습니다.

▼ 절차가 완료되었으면 아래의 '적용' 버튼을 누릅니다. 이것으로 끝. 참 쉽죠?


마치며...

AMP용 자동광고가 모든 티스토리 블로그에 적용되는지 알고 열심히 공부하고 또 따라했었습니다. 하지만 실제로 반영하고 나서 모바일 페이지의 광고 로딩시간을 비교해보니 전과 후의 차이를 못느끼겠더군요. 설정을 잘못했나? 혹은, 코드를 잘못 입력했나? 시간을 좀 더 가지고 기다려야하나? 등등... 고민만 하다가 여기저기서 자료를 더 확인해보니 적용할 수 있는 HTML로 페이지를 구성해야 AMP용 자동광고를 적용할 수 있다는 것이었죠. 흑. 좀 더 배우고 할 걸. 하지만 실수는 성공의 어머니라고 했던가요? 이번 실수로 뭔가를 할 때 좀 더 신중해져야 하겠다는 소심한 다짐을 하며... 다음에는 광고 로딩속도를 늘이기 위한 방법을 고심해보도록 하겠습니다. 그럼 이만!

이 포스팅과 어울리는 다른 글도 확인해보세요.

       ↓ ↓ ↓ ↓      

   ↓ ↓ ↓ ↓ 

[Tistory]티스토리 블로그 다음(Daum) 검색등록을 하다

[Tistory]티스토리 카테고리를 효율적으로 변경해보자!

[Tistory]정든 Fastboot 스킨에서 새로운 JB Skin 스킨으로! (외부스킨 등록방법)