AD Inserter AMP 전용 애드센스 설정 과정과 광고 위치 적용 방법

AD Inserter AMP 전용 애드센스를 처음 설정할 때 가장 헷갈렸던 부분은 기존 광고 코드가 AMP 페이지에서는 그대로 출력되지 않는다는 점이었습니다. 일반 애드센스 코드를 넣으면 데스크톱과 모바일 일반 페이지에서는 광고가 보이는데 AMP 페이지에서는 광고가 나오지 않는 경우가 있었습니다.

처음에는 AMP 플러그인 충돌이나 캐시 문제라고 생각했는데 실제로는 AMP 전용 코드 변환 과정이 빠져 있었고, AD Inserter 내부 설정까지 같이 적용해야 정상적으로 광고가 표시됐습니다.

특히 워드프레스를 처음 운영하는 경우에는 AD Inserter AMP 전용 애드센스 설정 화면 자체가 복잡하게 느껴질 수 있습니다. 하지만 구조를 한번 이해하고 나면 광고 위치 조정이나 AMP 광고 추가를 꽤 편하게 처리할 수 있었습니다.

처음에는 광고 코드만 넣으면 되는 줄 알았던 부분

처음에는 애드센스에서 복사한 광고 코드만 넣으면 AMP 페이지에서도 자동으로 광고가 나오는 줄 알았습니다. 그런데 AMP 페이지를 직접 열어보니 광고 영역 자체가 보이지 않았고 모바일에서도 빈 공간처럼 표시되는 상황이 있었습니다.

그 이후부터 AMP 전용 광고 변환 기능을 다시 확인하기 시작했고, AD Inserter 안에 AMP 광고를 따로 생성하는 기능이 있다는 것을 알게 됐습니다. 특히 OpenLiteSpeed 환경에서는 LiteSpeed Cache가 AMP 캐시까지 유지하는 경우가 있어서 수정 후 바로 광고가 보이지 않는 상황도 있었습니다.

광고 코드부터 먼저 추가했던 과정

AD Inserter AMP 전용 애드센스를 적용하기 전에 먼저 기본 광고 코드를 추가해야 했습니다. 워드프레스 관리자에서 설정 → AD Inserter 메뉴로 들어가면 광고 코드를 입력하는 화면이 나타납니다.

검은색 코드 입력 영역에 애드센스 코드를 붙여 넣은 뒤 아래 영역에서 광고 위치를 지정할 수 있었습니다. 처음에는 메뉴가 너무 많아서 복잡하게 느껴졌는데 실제로는 광고 위치와 AMP 설정 부분만 이해하면 구조가 꽤 단순했습니다.

광고 위치 설정이 생각보다 중요했던 이유

AD Inserter AMP 전용 애드센스는 광고 위치 설정에 따라 화면 흐름 차이가 꽤 크게 느껴졌습니다. 처음에는 기본값 그대로 두고 테스트했는데 본문 흐름이 어색하게 깨지는 경우가 있었고 모바일 화면에서도 광고 위치가 애매하게 보이는 경우가 있었습니다.

설정 화면을 보면 After image와 Alignment 옵션을 통해 광고 위치와 정렬 방식을 선택할 수 있었습니다. 저는 첫 번째 이미지 아래 중앙 정렬 방식으로 설정했는데 AMP 페이지에서도 비교적 자연스럽게 보이는 편이었습니다.

AMP 전용 광고 설정 메뉴 찾기

기본 광고를 추가한 뒤에는 AMP 전용 광고 변환 작업을 해야 했습니다. 처음에는 AMP 설정 메뉴가 따로 있을 줄 알았는데 실제로는 스패너 아이콘 안쪽에 숨겨져 있었습니다.

여기서 스패너 아이콘을 누른 뒤 < > 모양 아이콘으로 들어가야 AMP 광고 변환 기능을 사용할 수 있었습니다. 처음에는 메뉴 위치를 찾는 데 시간이 꽤 걸렸는데 알고 나니 구조 자체는 단순한 편이었습니다.

Publisher ID와 Ad Slot ID 입력 과정

AD Inserter AMP 전용 애드센스를 추가할 때 가장 헷갈렸던 부분은 Publisher ID와 Ad Slot ID를 어디서 가져오는지였습니다. 처음에는 애드센스 화면에서 따로 찾으려고 했는데 실제로는 기존 광고 코드 안에 이미 포함되어 있었습니다.

광고 코드를 보면 아래 항목을 확인할 수 있었습니다.

• data-ad-client
• data-ad-slot

여기서 Publisher ID는 ca-pub가 아니라 pub 부분만 입력해야 했습니다.

예를 들면 아래처럼 입력했습니다.

Publisher ID : pub-123456789
Ad Slot ID : 123456789
Ad Type : Standard
AMP Ad : Below the fold

AMP 광고 코드 생성 과정

Publisher ID와 Ad Slot ID 입력을 마친 뒤에는 AMP 광고 변환을 진행해야 했습니다. 상단의 ↓ 아이콘을 누르면 기존 광고 코드 아래쪽에 AMP 광고 코드가 자동으로 추가됐습니다.

처음에는 직접 AMP 광고 코드를 수정해야 하는 줄 알았는데 AD Inserter 내부 기능으로 자동 생성이 가능했습니다.

마지막으로 AMP Pages 활성화가 필요했던 부분

AD Inserter AMP 전용 애드센스를 적용했는데 광고가 나오지 않는다면 Misc 메뉴 안의 AMP Pages 설정까지 같이 확인해야 했습니다. 이 부분을 놓치면 AMP 광고 코드가 있어도 실제 AMP 페이지에서는 광고가 출력되지 않을 수 있었습니다.

Misc 메뉴 안에서 AMP Pages 항목을 활성화한 뒤 Save Settings 버튼까지 눌러야 최종 적용이 완료됐습니다. 특히 OpenLiteSpeed 환경에서는 저장 후 LiteSpeed Cache Purge까지 같이 진행하는 편이 반영 속도가 빨랐습니다.

적용 후 확인했던 변화

AD Inserter AMP 전용 애드센스 설정을 마친 뒤에는 AMP 페이지에서도 광고가 정상적으로 표시되기 시작했습니다. 처음에는 AMP 페이지에서 광고가 아예 나오지 않았는데 변환 기능과 AMP Pages 설정까지 완료한 뒤부터는 모바일 AMP 화면에서도 광고 영역이 정상적으로 표시됐습니다.

그리고 AD Inserter AMP 전용 애드센스 설정은 한번 구조를 익혀두면 이후 광고 위치 수정이나 광고 추가 작업도 훨씬 빠르게 처리할 수 있었습니다. 특히 OpenLiteSpeed + LiteSpeed Cache 환경에서는 캐시 반영 여부까지 같이 확인하는 흐름이 생각보다 중요하게 느껴졌습니다.

FAQ

관련 글 추천

• 아스트라(Astra) 테마 제목 아래 애드센스 넣는 방법 정리 (CLS 문제 방지 포함)
• 워드프레스 애드블록 차단 설정 방법 (애드센스 광고 차단 회복 적용 가이드)
• AMP 자동 광고 오류, ‘맞춤 자바스크립트는 허용되지 않습니다’ 발생 원인 정리
• 워드프레스 사이트킷으로 구글 통계 확인하는 방법 (속도 문제 해결 포함)