AMP에 애드센스, 애널리틱스 삽입하기 (워드프레스 플러그인)

amp

AMP란?

내가 이해한 개념을 설명하자면 구글에서 만든 빠르고 가벼운 모바일 전용 웹페이지다.
그러니까 기존의 웹페이지는 그대로 두고 새로 AMP페이지를 만드는 것이다.

예를 들면
좋은 자료들(?)이 많은 추천 토렌트 사이트 모음는 이런 화면이고
좋은 자료들(?)이 많은 추천 토렌트 사이트 모음 (amp)(뒤에 “/AMP”를 붙이면 나오는 페이지)는 이렇게 나온다.

AMP의 장점은

구글에서 만든 방식이니 만큼 구글 모바일 검색결과에서 더 상위에 내 글이 올라올 가능성이 높아진다.
또한 모바일 페이지를 따로 지원하지 않는 블로그라면 도움이 될 수도 있을 것이다. (나는 블로그가 반응형이라서 모바일 페이지가 따로 필요하진 않았고 구글 검색결과에서 상위에 뜨는 것이 조금이라도 도움이 되라고 적용했다.)

AMP의 단점은

목요일 연재 웹툰 목록 총정리 이렇게 나오는 화면이
목요일 연재 웹툰 목록 총정리 (amp)에서는 제대로 표현되지 않는다. (css를 잘 수정하면 되긴 하겠지만 힘들고 수정을 해도 페이지 용량이 커져서 원래의 취지가 많이 약해진다. 또한 수정이 필요하다는 것 자체가 별도의 시간이 투자된다는 것이다. 난 귀찮아서 수정 안하기로 했다.)

워드프레스 AMP 플러그인

나는 플러그인을 설치했는데 처음에는AMP for WP – Accelerated Mobile Pages를 설치했다가 너무 복잡하고 조잡해서 바로 지워버렸다. (그리고 메뉴에 애드센스 삽입 기능이 있었는데 적용했더니 가운데 정렬이 되지 않더라.)
기능은 별로 없어도 깔끔한 AMP를 설치했고 거기에 애드센스와 애널리틱스 코드를 삽입하는 방법을 설명하려고 한다.

애드센스 코드 삽입하기

애드센스는 애드센스 홈페이지에서 “광고/광고단위/신규 광고 단위 만들기/디스플레이”를 클릭해서 광고 단위 이름을 지정해주고 “만들기”를 클릭한다.
그러면 코드 화면이 나오는데 우측에 AMP를 클릭한다. (참고로 “자동 광고”도 가능한데 나는 별로 좋아하지 않는다. 그냥 디스플레이 광고를 본문 위와 아래에 붙이는게 깔끔해서 좋다.)

<head></head> 태그 사이에 붙여넣는 코드와 <body></body> 태그 사이에 붙여넣는 두개의 코드가 있는데

head에 붙여넣는 코드는 워드프레스 관리자 화면에서 “플러그인/플러그인 편집기”에 들어가서 우측 상단에서 편집할 플러그인 “AMP”에 들어가서
우측에 “templates/html-start.php”를 선택하면 나오는 코드에서 상단에 <head>가 보일 것이다. 바로 밑줄에 해당 코드를 넣어주면 된다.

그리고 <body>에 집어넣는 코드. 이 코드가 광고 코드이다. (이걸 상단에 붙여넣으면 광고가 상단에 표시된다는 것이다.)
나는 본문 상단과 하단에 두개의 광고를 넣었는데 나처럼 넣으려면 “templates/single.php”에서 아래의 코드 위에 삽입하면 상단에 광고가 표시되고 아래에 삽입하면 하단에 광고가 표시된다.
<?php $this->load_parts( [ 'featured-image' ] ); ?>
<div class="amp-wp-article-content">
<?php echo $this->get( 'post_amp_content' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</div>

애널리틱스 코드 삽입하기

애널리틱스는 통계를 확인하기 위한 서비스이다.
AMP를 설치하고 AMP페이지를 얼마나 접속하는지 알기 위해서 설치했다.

애널리틱스 AMP 코드는 애널리틱스 홈페이지에서는 못찾았고 인터넷에서 검색을 해야 나오더라. Add Analytics to AMP pages

“워드프레스 관리자 화면/플러그인/플러그인 편집기/(우측 상단에서 편집할 플러그인)AMP”에 들어가서
“templates/html-start.php”에 들어가서 <head> 바로 밑줄에 아래 코드를 삽입해주면 된다.
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

그리고 그 화면에서 가장 밑줄로 내려가서 아래의 코드를 삽입해준다.
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"gtag_id": "<GA_MEASUREMENT_ID>",
"config" : {
"<GA_MEASUREMENT_ID>": { "groups": "default" }
}
}
}
</script>
</amp-analytics>

“<GA_MEASUREMENT_ID>”에는 “나의 Google Analytics 속성 ID”를 입력해야 한다.
애널리틱스 홈페이지에 들어가서 “(좌측 하단에)관리/추적 정보/추적 코드”에서 “UA-00000000-1″이런 식의 코드가 “나의 Google Analytics 속성 ID”다. 이것으로 바꿔주면 된다.

상단에 썸네일, 대표 이미지 숨기기

AMP를 적용해놓고 보니까 상단에 썸네일로 지정한 이미지가 뜨는게 마음에 들지 않았다.
그래서 css로 숨겼다.
방법은 “워드프레스 관리자 화면/플러그인/플러그인 편집기/(우측 상단에서 편집할 플러그인)AMP”에 들어가서
“templates/style.php”에서 중간쯤에 아래의 코드를 삽입해줬다.
.amp-wp-article-featured-image {
display: none;
}

주의

플러그인을 업데이트 하면 기존에 수정했던 코드들이 다 사라지고 초기화되더라.
업데이트를 하지 않거나 다시 수정해줘야 할 것 같다.

This entry was posted in 워드프레스, 블로그. Bookmark the permalink.

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다