구글 애드센스 AMP 자동 광고 코드 티스토리에 넣는 방법 (친효스킨)
구글 애드센스에 새롭게 출시된 AMP 라는 시스템이 있습니다. Accelerated Mobile Pages 의 약자인데 쉽게 말씀드리면 모바일 페이지에서 가속화된 광고를 의미합니다. 아시다시피 모바일 사양은 사용자마다 다르고 저서양부터 고사양까지 다양하게 분포되어 있어서 스마트폰으로 티스토리에 접속하면 일부 저사양 스마트폰의 사용자들은 페이지가 다소 느리게 로드되는 불편함을 겪게 됩니다. 3G냐, 와이파이냐, LTE냐, 5G냐에 따라서도 차이가 있구요. AMP는 말 그대로 모바일에서 접속 시 웹페이지를 가속화하여 로드하게 되는 기술입니다.
그러면 이걸 설정한다고해서 수익이 올라가느냐? 그건 아닙니다. 방금도 말씀드렸듯 저사양에서 애드센스를 로드하는데 일반 고사양 스마트폰에 비해 시간이 걸리는건 사실입니다. 한국사람들의 급한 성격 탓에 잽싸게 로드가 되지 않으면 금방 나가버리게 되고 그로 인해 애드센스를 노출시킬 확률도 줄어들게 됩니다. 그리하여 출시된게 AMP 애드센스 입니다. 하지만 애석하게도 티스토리 플랫폼은 AMP 페이지가 아닙니다. 만약 티스토리 자체적으로 해당 내용을 업데이트해서 정식으로 AMP 페이지를 지원하게 된다면 모르지만 아마 그럴 일은 거의 없을 듯 합니다. 따라서 이 방법은 티스토리에서는 소용이 거의 없다고 보시면 됩니다. 그럼에도 불구하고 시도라고 한번 해보고 싶으시면 다음의 과정을 따라해 주시기 바랍니다.
티스토리 HTML에 AMP 자동광고 코드 세팅
어떻게 AMP 광고를 활성화 하는지 알아보도록 하겠습니다. 크게 어려운 부분은 없습니다. 본 예시에서는 친효스킨을 예로 들어보겠습니다.
먼저 애드센스에 로그인 합니다. 그리고 왼쪽의 광고탭을 눌러보시면 이런 화면을 만나보실 수 있습니다. 현재 저는 AMP가 활성화 되어 있기 때문에 저렇게 사용 설정됨으로 표시가 되어 있습니다. 처음 하시는 분들은 다르게 표시되어 있습니다. (AMP가 처음이신가요? 뭐 대략 이랬던 것 같음) 아무튼 저기를 클릭하여 들어갑니다.
그러면 이렇게 AMP 사이트용 애드센스 코드라는 항목 설정이 보입니다. 먼저 AMP 사이트에 디스플레이 광고를 자동으로 게재하세요 토글을 활성화 해주시면 됩니다.
다음은 그 아래에 있는 AMP용 스크립트를 티스토리 HTML의 <head> 안에 넣어야 합니다. 일단 코드 복사 버튼을 누릅니다. 그리고 친효스킨의 HTML 설정으로 넘어옵니다. 그리고 head 안에서 아래의 부분을 찾아주세요.
<!-- 애드센스 AMP head 코드 시작 -->
<!-- 여기를 지우고 AMP 코드를 넣으세요 -->
<!-- 애드센스 AMP head 코드 끝 -->
위의 노란색으로 표시된 주석을 모두 지우고 복사해둔 스크립트 코드를 붙여넣기 합니다.
이렇게 붙여넣기를 하시면 됩니다. 여기까지 1단계는 완료 입니다.
이제 2단계 입니다. 이것도 1단계와 같은 방법을 사용합니다. 먼저 코드 복사를 합니다. 그리고 티스토리 HTML의 <body> 바로 다음에 넣어주면 됩니다.
친효스킨의 경우는 이 위치 입니다. 1.15 버전에서는 아마 </body> 전에 있을텐데요, 위치를 이렇게 수정해 주시면 됩니다. 이렇게 하면 AMP 자동 광고 세팅은 끝이 납니다.
애드센스 AMP 코드를 사용하여 티스토리에 수동으로 삽입해도 광고는 나오지 않음!
AMP 전용 코드로 애드센스를 원하는 위치에 수동 배치시킬 수 있다고 해서 사용해 봤는데, 당연히 티스토리에서는 AMP 전용 광고는 나타나지 않습니다. 방법은 기존에 우리가 알고 있는 애드센스 광고 삽입하는 방법과 동일하고 코드를 HTML 전용이 아닌 AMP 전용 코드로 넣는 것 뿐입니다.
애드센스에서 반응형 광고를 새로 만들어서 사용해도 상관 없습니다. 저는 기존에 만들어진 광고 코드를 활용해서 진행하겠습니다. 원하는 광고를 선택하고 코드 가져오기 버튼을 누릅니다.
원래는 HTML의 애드센스 스크립트를 넣었겠지만, 이번에는 AMP 탭을 선택하여 1단계의 스크립트를 head안에 최초 1회만 붙여넣기를 합니다. 그리고 2단계의 코드를 복사해서 티스토리의 원하는 위치에 붙여넣기를 해주면 됩니다.
처음에 설명드렸던 AMP 자동 광고 스크립트와는 조금 다릅니다. 그렇기 때문에 이렇게 붙여넣기를 한번 더 해줬습니다. 위치는 기억하시죠? AMP 자동 광고 때 넣었던 그곳입니다. 구글 AMP 광고 시작이라는 주석처리된 부분 입니다. 친효스킨 기준으로 설명 드리고 있습니다. 일반 반응형 티스토리의 경우는 <head> 안쪽에 적당한 위치에 붙여넣기 해주시면 됩니다.
이제 본문에 삽입해 보도록 하겠습니다. 저는 사이드바에 한번 넣어보도록 하겠습니다. 관리자에서 꾸미기 > 사이드바 > HTML 배너 출력의 +버튼을 눌러서 사이드바에 새 모듈을 등록해 줍니다.
마우스를 올려보시면 이렇게 편집 버튼이 나옵니다. 눌러주세요.
이름은 그냥 본인만 알아볼 수 있게 적당히 적어둡니다. 그리고 2단계의 코드를 HTML 소스란에 그대로 붙여넣기 해주시면 됩니다. 확인을 눌러 저장해 주시면 끝 입니다. 간단하지요? 이렇게 해서 AMP에 대한 전반적인 내용 및 적용 방법에 대해 알아봤습니다. 위에서 말씀드린대로 이렇게 해도 애드센스 AMP 광고는 노출되지 않는다는 점 꼭 명심해 주시기 바랍니다. 그냥 해본 겁니다. 실험 삼아서요. 끝.
"친절한효자손 취미생활" 을 검색!
