반응형
해당 글에서는 티스토리 블로그를 관리하면서 사용하는 구글 애드센스, 서치 콘솔, 애널리틱스에 대해서 코드를 확인하는 방법에 대해 알아봅니다.
1) 구글 애드센스(Google Adsense) 확인 : 코드 확인
1. 구글 애드센스(Google Adsense) 사이트에 접속합니다.
2. 광고 탭 > 사이트 기준 탭 > 코드 가져오기를 선택합니다.
3. 복사하기 버튼을 눌러서 태그를 확인합니다.
💡 해당 복사한 태그는 티스토리의 스킨편집 - html 태그의 <head></head> 사이에 추가해야 합니다.
4. AMP 광고를 사용하는 경우 : 광고 탭 > AMP가 설정됨 선택
💡AMP 코드 보기 버튼을 누릅니다.
💡 아래와 같이 1단계는 <head></head> 태그 사이에 추가하고 2단계는 <body> 태그 바로 아래 삽입합니다.
2) 구글 애드센스(Google Adsense) 추가 광고 확인 : 상단 두 개 광고 적용
1. 광고 > 광고 단위 기준을 선택합니다.
2. 구성한 디스플레이 광고의 코드를 가져옵니다.
3. 두 개의 광고가 출력되도록 구성합니다
💡 두 개의 광고가 출력되도록 구성합니다
- data-ad-client, data-ad-slot 값만 각각 코드에서 변경을 해줍니다.
- 변경한 코드를 _article_rep_desc_값 기준으로 상단에 붙여 넣기를 합니다.
<article id="article" x-ref="article">
<div style="text-align: center; margin-bottom: 15px;">
<style>
.adsbygoogle.post-top-first {display:block}
.adsbygoogle.post-top-second {display:none}
@media (min-width: 768px) {
.adsbygoogle.post-top-first {display:inline-block;min-width:336px;max-width:336px;width:100%;height:280px;}
.adsbygoogle.post-top-second {display:inline-block;margin-left:20px;min-width:336px;max-width:336px;width:100%;height:280px;}
}
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxx"
crossorigin="anonymous"></script>
<!-- 상단 두개 광고 : 왼쪽 -->
<ins class="adsbygoogle post-top-first"
style="display:block"
data-ad-client="ca-pub-xxx"
data-ad-slot="yyy"
data-ad-format="rectangle"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 상단 두개 광고 : 오른쪽 -->
<ins class="adsbygoogle post-top-second"
style="display:block"
data-ad-client="ca-pub-xxx"
data-ad-slot="zzz"
data-ad-format="rectangle"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</article>
💡 해당 복사한 태그는 티스토리의 스킨편집 - html 태그 기준 앞에 넣어야 합니다.
3) 구글 서치 콘솔(Google Search Console) 확인
1. Google Search Console 사이트에 접속합니다.
2. 설정 탭 > ‘소유권 인증 세부정보’ 버튼을 누릅니다.
3. 아래와 같이 태그가 출력됨을 확인하고 복사하였습니다.
💡 해당 복사한 태그는 티스토리의 스킨편집 - html 태그의 <head></head> 사이에 추가해야 합니다.
4) 구글 애널리틱스(Google Analytics) 확인
1. 사이트에 접속합니다.
2. 관리 탭을 선택합니다
3. 관리자 > 데이터 수집 및 수정 > 데이터 스트림을 선택합니다.
4. 내 웹 사이트를 선택합니다.
5. 태그 안내보기 버튼을 누릅니다.
6. 다르게 출력되는 경우
💡 다르게 출력되는 경우
- 아래와 같이 측정 ID 값을 기반으로 아래의 태그에 맞게 넣어서 구성합니다.
<script async src="https://www.googletagmanager.com/gtag/js?id=태그 ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '태그 ID');
</script>
💡 해당 복사한 태그는 티스토리의 스킨편집 - html 태그의 <head></head> 사이에 추가해야 합니다.
오늘도 감사합니다. 😀
반응형
'함께 공부하기 > 블로그 관리' 카테고리의 다른 글
[블로그 관리] 구글 애드센스(Google Adsense) 광고 수익 올리는 방법 -1 : 광고 검토 허용, 특정 광고 차단 (0) | 2024.11.21 |
---|---|
[블로그 관리] 구글 애드센스(Google AdSense) 용어 이해하기 -1 : 수익 실적 관련 용어 (2) | 2024.11.21 |