구글 AMP가 적용된 워드프레스에 Ad Inserter 플러그인으로 애드센스 광고 달기!

• REDMILK
• 2017년 12월 27일
• 카테고리: 애드센스, 워드프레스
• 태그: Accelerated Mobile Pages, Ad Inserter, AMP for WP, 구글 AMP, 애드센스, 플러그인

이전에 워드프레스에 구글 AMP(Accelerated Mobile Pages)를 적용하는 포스팅을 할때
AMP for WP 플러그인을 소개 했었습니다. 해당 플러그인으로 광고를 게재할 수 있지만
광고 좌우 여백이 커서 CSS를 이용해 조금 손을 대야 했습니다.
그게 찝찝 하기도 하고 기존에 사용하던 매우 훌륭한 Ad Inseter 플러그인이 있기에
Ad Inseter 플러그인을 이용하여 광고를 삽입해 보겠습니다.
우선 기본 사용법은 아래 링크를 참고해 주세요.

워드프레스 애드센스(Adsense) 플러그인 추천! Ad Inserter!

AMP for WP 플러그인 광고 설정 화면입니다. 총 6곳에 광고를 게재 할 수 있습니다.

Ad Inseter 는 PRO버전 기준으로 총 64곳에 광고를 게재 할 수 있습니다
물론 구글 광고만 넣는다면 정책 위반에 걸리겠죠?
이 화면에서 중요한건 코드인데. 위에 보이는 코드는 기존의 애드센스 코드입니다.

위 코드는 구글 AMP에 사용하는 코드입니다.
조금 다르죠?

Ad Inseter에서는 쉽게 변환할 수 있는 기능을 제공 합니다.
(여러개 삽입시에 하나 만들어 놓고 ad-slot 부분만 변경하는게 더 빠른것 같기도 합니다)

위에 보이는 네모칸을 따라 누르시면 위와 같은 화면이 나옵니다.

오른쪽 위에 위에 방향 화살표를 클릭합니다.

그럼 위와같이 자동으로 칸이 채워집니다. AMP Ad 부분만 Below the fold로 바꿔 주신뒤 오른쪽 위부분에 있는 아래방향 화살표 아이콘을 눌러 줍니다.

그럼 이렇게 아래 부분에 AMP용 애드센스 코드가 생성 됩니다.
기존의 코드와 같이 쓰셔도 되지만 가급적이면 따로 앧센스 광고단위를 만드시는게
나중에 통계를 낼때나 모니터링 하기에 좋습니다.
그런 이유로 위에 코드는 삭제합니다.

아직 끝난게 아닙니다. 이렇게만 하면 광고가 Non AMP 모드의 화면에만 표시가 됩니다.
AMP가 적용된 페이지에서 보이게 하기 위해선
Misc를 클릭하신 후 AMP pages 부분에 체크를 해줘야 합니다.
Ajax에 체크가 되어 있으면 AMP가 적용되지 않은 페이지에서도 해당 광고가 노출이 됩니다.
해당 광고를 AMP 적용된 페이지에만 보이게 하시려면 Ajax에 체크를 제거 합니다.

마지막으로 헤더에 코드를 넣어 줘야합니다.
안 넣어도 작동은 하는 듯 하지만 에러가 납니다.

톱니바퀴 모양의 부분을 클릭후 Header로 들어 가셔서 아래 스크립트 코드를 입력해 주세요.
입력후 오른쪽 아래 빨간 네모 부분을 클릭하여 초록 불이 들어 오게 해주세요(활성화?)
*구글 검색으로 AMP버전으로 들어 오신 분은 제일하단에 Non-AMP Version 보기를 클릭 하셔야 코드가 제대로 보입니다. AMP 버전의 화면에서는 특정 코드가 안보입니다*

[ADINSERTER AMP]  <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

이제 다 끝났습니다. AD Inserter 플러그인이 기능이 많아서
처음엔 조금 복잡하실 수 있지만 몇번 하다보면 별거 아닙니다.
천천히 따라해보시고 궁금하신 부분이 있으시면 댓글 달아주세요.
제가 알고 있는 것이라면 성의껏 답변해 드리겠습니다.