amp에 애드센스와 애널리틱스 삽입 코드 정리

워드프레스의 AMP 플러그인을 업데이트 할때마다 삽입한 코드가 다 사라져서 매번 삽입할 위치와 코드를 백업해두기로 했다.

주의!
아래의 코드들은 이 블로그와 나의 구글 계정의 코드들이다.
자신의 블로그에 삽입할 때는 자신의 구글 계정과 블로그에 맞는 코드로 변경을 해서 사용해야만 한다.

amp에 대한 설명은 AMP에 애드센스, 애널리틱스 삽입하기 (워드프레스 플러그인)을 참고하길 바란다.

amp/templates/html-start.php
<head> 아래 줄에 아래 코드를 삽입
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

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

<body class=”<?php echo esc_attr( $this->get( ‘body_class’ ) ); ?>”>
위 코드의 아래 줄에 아래 코드를 삽입

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"gtag_id": "UA-23236197-1",
"config" : {
"UA-23236197-1": { "groups": "default" }
}
}
}
</script>
</amp-analytics>

amp/templates/style.php
맨 밑에 아래 코드를 삽입
.amp-wp-article-featured-image {
display: none;
}

amp/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-ad width="100vw" height="320"
type="adsense"
data-ad-client="ca-pub-5461307273732595"
data-ad-slot="6486582496"
data-auto-format="rspv"
data-full-width="">
<div overflow=""></div>
</amp-ad>

아래 줄에 아래 코드를 삽입
<amp-ad width="100vw" height="320"
type="adsense"
data-ad-client="ca-pub-5461307273732595"
data-ad-slot="2126387857"
data-auto-format="rspv"
data-full-width="">
<div overflow=""></div>
</amp-ad>

 

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

댓글 남기기

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