워드프레스 플러그인 Ad Inserter의 기능 중에 애드센스 광고 또는 배너를 원하는 자리에 자동 또는 수동으로 삽입할 수 있도록 해주는 기능이 있습니다.
이전 포스팅에서 Ad Inserter 플러그에서 중요하게 생각하는 4가지 기능을 간략하게 소개하였습니다. 이번 포스팅에서는 그 기능들 중에서 원하는 자리에 애드센스 광고 또는 배너를 삽입하는 방법에 대해서 조금 더 자세하게 알아보도록 하겠습니다.
✅ Ad Inserter 플러그인 중요 기능 4가지
- Ads.txt 생성
- Header And Footer
- 원하는 자리에 애드센스 광고 또는 배너 삽입
- Ad Blocking - 광고 차단 프로그램 사용자 감지 및 사이트 접근 차단
Ad Blocking 광고차단 프로그램 감지 기능 사용법
Ad Inserter - 원하는 자리에 애드센스 광고 배너 삽입
광고 코드를 넣을 수 있는 16개 슬롯을 활용해서 애드센스 광고 배너를 삽입할 수 있습니다. 포스트 상단, 하단, 본문, 사이드바 등 다양한 위치에 광고를 삽입할 수 있으며, 필요에 따라 숏코드로 원하는 자리에 광고를 쉽게 삽입할 수 있습니다.
포스팅 상단이나 본문 중간에 광고를 배치할 때, 광고 2개를 연속으로 좌우로 배치하는 코드는 아래에 있는 부록을 참고해 주세요.
광고 삽입 위치, 형태, 장치 지정
16개 슬롯에 입력한 애드센스 광고 코드를 페이지, 문서 위, 아래, H태그 또는 P 태그를 카운팅 해서 광고를 삽입할 수 있습니다. 이렇게 지정된 코드는 고정적으로 출력하거나, 숏코드를 만들어서, 포스팅 문서 작업 시 원하는 위치에 삽입할 수 있습니다.
광고를 삽입할 위치를 지정하는 데 사용되는 메뉴
✅ 광고 코드를 넣을 수 있는 16개의 슬롯이 있으며, 각 슬롯마다 명칭을 정할 수 있습니다. 1번 슬롯의 경우 "Block 1"로 되어있는 명칭을 원하는 이름으로 변경 가능합니다.
예를 들어 해당 광고 코드가 적용되는 위치를 알 수 있는 명칭으로 변경 가능합니다.
✅ 슬롯에 저장된 광고 코드를 출력할 페이지를 지정할 수 있습니다. 포스팅, 고정 페이지, 검색 페이지, 태그 등
✅ 지정된 페이지에서 어떤 위치에 삽입할 것인지 지정, 포스팅 상단, 하단, 본문 중간 등
| 구분 | 설명 |
|---|---|
| Before , After Post | 포스팅 문서 제목 앞과 뒤에 광고를 배치 |
| Before, After Content | 포스팅 문서 앞과 뒤에 광고를 배치, 특성 이미지가 있는 경우 특성 이미지 아래 |
| Before, After paragraph | 포스팅 문서 안에 있는 특정 위치 태그를 찾아 앞과 뒤에 광고를 배치 |
| Before, After image | 이미지 앞과 뒤에 광고를 배치 |
| Before, After excerpt | 요약글 앞과 뒤에 광고를 배치 |
| Before, After comments | 댓글창 앞과 뒤에 광고를 배치 |
| Between comments | 댓글 사이에 광고를 배치 |
| footer | 푸터 영역 뒤에 광고를 배 |
✅ 슬롯에 저장된 광고 삽입시 광고의 정렬 방식 지정, 좌측, 우측, 가운데 등
광고 삽입 형태를 지정하는 데 사용되는 메뉴
Manual - 광고 삽입 형태를 지정할 수 있으며, 숏코드 형태 지정 시 해당 슬롯의 광고는 문서 작성 시 광고 삽입 위치를 정할 수 있습니다. [adinserter block="1"] 또는 [adinserter name="Block 1"] 입력하면 됩니다.
광고를 보여줄 장치를 선택하는 데 사용되는 메뉴
기본적으로 모든 장치에 광고가 보이도록 되어 있으며, 필요시 데스크톱, 태블릿, 모바일 등 원하는 장치만 출력할 수 있습니다.
Ad Inserter 사용 방법
Ad Inserter를 이용해서 광고를 삽입하는 방법은 슬롯을 선택해서 광고코드를 입력하고, 출력할 위치를 지정하고 저장하면 해당 광고가 삽입됩니다.
- 광고 코드를 저장할 슬롯 선택
- 사용할 광고 코드 입력
- 광고를 출력할 페이지(Posts, Homepage 등) 지정
- 광고를 출력할 위치(문서 상단, 하단, 문서내부 등) 지정
- 광고 정렬 방식 지정
- 설정 저장
예시 1. 포스팅 문서 상단 또는 하단에 광고를 고정적으로 출력
포스팅 문서 상단(하단)에 광고를 고정적으로 출력하고 싶을 때에는 아래의 그림처럼 광고를 설정하면 됩니다. 상단은 Before Post, Before Contents 중에서 선택하고, 하단은 After Post, After Contents 중에서 선택하면 됩니다.
문서 제목 위에 광고를 배치하고 싶으면 Before Post, 문서 제목과 문서 첫 문장 사이에 출력하고 싶으면 Before Contents을 선택하면 됩니다. 문서 제목과 문장 사이에 특성이미지가 있다면, 특성이미지 다음에 광고가 배치됩니다.
예시 2. 포스팅 문서 내부에 광고를 고정적으로 출력
포스팅 문서 내부에 광고를 고정적으로 출력하고 싶다면, Before paragraph, After paragraph를 이용해서 설정하면 됩니다. 문서 내부에 있는 H태그 또는 P태그의 개수를 카운팅 해서 광고를 고정적으로 출력할 수 있습니다.
✅ 2번째 H2 태그 앞에 광고를 배치하고 싶다면 Before paragraph를 선택, 2번째 H2 태그 다음에 광고를 배치하고 싶다면 After paragraph를 선택하면 됩니다. 자세한 설정은 아래의 그림을 참고해 주세요.
✅ 7번째 P태그(7번째 줄 내용) 앞이나 뒤에 광고를 배치하고 싶다면, 아래의 그림처럼 P태그를 카운팅 하도록 설정하면 됩니다.
✅ 소수점으로 표기하는 방법이 있습니다. 소수점으로 표기하는 방식은 포스팅 내용 전체를 100%으로 보고, 0.2는 20%, 0.5는 50%, 0.7은 70% 되는 자리를 자동으로 계산해서 해당 광고를 송출하는 방법입니다.
위젯을 활용해서 사이드바에 광고 삽입
사용하고 있는 워드프레스 테마에 따라 조금씩 다르지만, 사이드바에 Ad Inserter 위젯을 추가해서 광고를 출력할 수 있습니다.
부록. 광고 2개를 좌우로 배치하는 방법
애드센스 광고를 상단에 배치하는 경우 CLS 0.1 이상이 발생하는 경우가 있습니다. 그 이유는 광고나 대표 이미지(썸네일)를 가장 먼저 노출되는데, 광고나 대표이미지의 크기가 지정되어 있지 않아서 발생하는 문제가 대부분입니다.
그런 경우, 광고코드를 반응형 광고코드를 사용하고, 이미지의 크기를 지정해 주면 해결이 됩니다. 아래에 첨부되어 있는 코드는 사각형 광고 2개를 좌우로 배치하는 반응형 코드입니다.
데스크톱에서는 사각형 광고가 2개 노출되며, 모바일에서는 자동으로 1개만 출력이 됩니다.
✅ 애드센스 광고 단위 기준 - 디스플레이 - 사각형(반응형) 2개가 필요합니다.
✅ 자신이 만든 디스플레이 사각형(반응형) 코드를 다운로드 한 광고코드에 빨간색 테두리 내용 2가지를 붙여 넣기 하시면 됩니다.
다운로드한 코드를 여러 번 반복해야 되는 경우, 파란색 테두리의 이름이 중복되지 않도록 수정해 주세요.
맺음말
지금까지 워드프레스 플러그인 Ad Inserter를 이용해서 원하는 위치에 광고를 삽입하는 방법에 대해서 알아보았습니다. 부족한 글이지만 끝까지 읽어주셔서 감사합니다. 다음에는 더 좋은 내용으로 뵙겠습니다.
Ad Blocking 광고차단 프로그램 감지 기능 사용법
출처 및 저작권 표시
자료 출처
저작권 표시
썸네일 디자인 : 미리캔버스에서 제작되었습니다.
본문 글꼴(폰트) : Google Noto Sans Korean - OFL(Open Font Licese)
이미지에 삽입된 글꼴(폰트) : 이 페이지는 카페 24(주)이 제공한 "카페 24 당당해"가 적용되어 있습니다.
'워드프레스' 카테고리의 다른 글
| 헤스티아 컨트롤 패널 hestiaCP 하위도메인 설치 방법 with 벌쳐(Vultr) (0) | 2024.01.15 |
|---|---|
| Ad Inserter - 광고차단 프로그램 감지 및 사이트 접근 차단 기능 (0) | 2024.01.04 |
| Ad Inserter - 워드프레스 필수 플러그인 1st. (0) | 2024.01.04 |
| 도메인 하나로 워드프레스 티스토리 블로그 같이 사용할 수 있을까? (0) | 2023.11.22 |
| 워드프레스 neve 테마 푸터(footer) 수정하는 방법 | Powerd by WordPress 저작권 문구 제거하는 3가지 방법 (0) | 2023.08.12 |
댓글