Hexo 블로그에 구글 애드센스(Adsense) 추가하기

Posted on | In , | Comments:

블로그를 시작하다 보니 자연스럽게 광고에도 관심이 갔다.

아직 View 수가 많거나 방문자 수가 셀 수 없을 만큼은 안되지만, 광고를 추가하고 싶었다.

그러나 방문하신 분이 불쾌하지 않고, 본문을 읽기에 방해가 되지 않는 선에서만.

가장 유명하고, 많이 사용하는 광고 툴이 바로 구글 애드센스 (Google adsense)

구글 애드센스 (Google Adsense) 홈페이지

홈페이지에 접속하면, 구글 계정으로 로그인 한 후, 먼저 구글 애드센스에 가입해야 한다.

광고를 등록하고자 하는 웹사이트 URL과 구글 이메일 주소를 입력하면 된다.

그 후는 통상 하는 회원가입과 비슷한데, 한 가지 유의할 점은 주소를 입력할 때 실거주지를 제대로 입력해야 한다는거! 한글로 써도 무방하다.

이 주소로 우편물이 오는데, 여기 적힌 Pin 번호를 입력해야 수익이 지급되니 주의할 것.

이까지는 참 쉽다! 하지만.. 이제부터가 시작이다 ㅠㅠ

많은 블로거들이 고생하는 구글 애드센스 계정 활성화하기, 나도 오늘까지는 안되는 줄 알았다.

공포의 구글 애드센스 사이트 검토 과정 시작

필자의 경우 Hexo를 통해 블로그를 구성하고 있으며 테마는 Hueman을 사용하고 있다.
(Hexo 블로그 테마 적용하기 - Eric Han님의 블로그 참고)

구글 애드센스의 안내로는 자신의 페이지의 HTML 태그 바로 뒤에 붙여넣으라 하는데..

지금 hexo로 구성된 파일들을 보면 index.html이 여러가지 js파일을 통해 hexo generate 할 때 마다 생성되고 있었고, 여기에다가 붙여넣는 것은 의미가 없었다.

어찌어찌 검색을 통해서 알아낸 사실은, themes 폴더 안에 있는 layout 폴더에 들어가서 여기 파일 중 layout.ejs가 전체적인 레이아웃을 담당하고 있다는 것이다.

그래서 여기 <body> 태그 위에 코드를 그대로 붙여 넣었었다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<%- partial('common/head') %>
<body>
    <div id="wrap">
        <%- partial('common/header', null, {cache: !config.relative_link}) %>
        <div class="container">
            <div class="main-body container-inner">
                <div class="main-body-inner">
                    <section id="main">
                        <%- partial('common/content-title') %>
                        <div class="main-body-content">
                            <!-- 여기다가 코드 붙여넣기 -->
                            <%- body %>
                        </div>
                    </section>
                    <%- partial('common/sidebar') %>
                </div>
            </div>
        </div>
        <%- partial('common/footer', null, {cache: !config.relative_link}) %>
        <%- partial('common/scripts') %>
    </div>
</body>
</html>

그런데, 1주일을 넘게 기다렸는데도 승인 메일은 오지 않았다..

그래서 뭔가 조취를 취해야 겠다고 생각했다.

블로그를 세팅할 때 많은 도움을 주신 Eric Han님의 블로그에서 다시 찬찬히 Hexo 블로그에 구글 애드센스(Adsense) 추가하기 글을 따라해 보았다.

먼저, layout 폴더 안에 ads라는 폴더를 새로 만들었다.

그리고 아까 전 layout.ejs 안에 붙어넣었던 구글 애드센스가 준 코드를 지우고, 새로 만든 ads 폴더 안에 adsense.ejs를 새로 만들어서 거기다가 코드를 붙여 넣었다.

adsense.ejs 파일을 새로 만들었다.

그리고 내가 광고를 개제하고 싶은 공간에다가 모두 <%- partial('ads/adsense') %> 를 붙여 넣었다.

  1. 본문 상단

themes/layout/layout.ejs 파일 안의 <%- body %> 바로 위에 붙여넣기.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<%- partial('common/head') %>
<body>
    <div id="wrap">
        <%- partial('common/header', null, {cache: !config.relative_link}) %>
        <div class="container">
            <div class="main-body container-inner">
                <div class="main-body-inner">
                    <section id="main">
                        <%- partial('common/content-title') %>
                        <div class="main-body-content">
                            <%- partial('ads/adsense') %>
                            <%- body %>
                        </div>
                    </section>
                    <%- partial('common/sidebar') %>
                </div>
            </div>
        </div>
        <%- partial('common/footer', null, {cache: !config.relative_link}) %>
        <%- partial('common/scripts') %>
    </div>
</body>
</html>
  1. 본문 하단

themes/layout/common/article.ejs 파일 안의 <footer class="article-footer"> 바로 위에 붙여넣기.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<article id="<%= post.layout %>-<%= post.slug %>" class="article article-single article-type-<%= post.layout %><%= (post.direction && post.direction.toLowerCase() === 'rtl' ? ' rtl' : '') %>" itemscope itemprop="blogPost">
    <div class="article-inner">
        <% if (post.link || post.title) { %>
            <header class="article-header">
                <%- partial('post/title', { class_name: 'article-title' }) %>
            </header>
        <% } %>
        <% if (post.layout != 'page') { %>
            <div class="article-meta">
                <%- partial('post/date', { class_name: 'article-date', date_format: null }) %>
		<%- partial('post/author') %>
                <%- partial('post/tag') %>
            </div>
        <% } %>
        <%- partial('post/gallery') %>
        <div class="article-entry" itemprop="articleBody">
            <%- post.content %>
        </div>
        <%- partial('ads/adsense') %>
        <footer class="article-footer">
            <%- partial('share/index', { post: post }) %>
        </footer>
    </div>
</article>
<%- partial('comment/index') %>
  1. 사이드바

themes/layout/common/sidebar.ejs 파일 안의 제일 아래 </aside> 바로 위에 붙여넣기.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<aside id="sidebar">
    <a class="sidebar-toggle" title="Expand Sidebar"><i class="toggle icon"></i></a>
    <div class="sidebar-top">
        <p><%= __('sidebar.follow') %>:</p>
        <ul class="social-links">
            <% for (var i in theme.customize.social_links) { %>
                <% if (theme.customize.social_links[i]) { %>
                <li>
                    <a class="social-tooltip" title="<%= i %>" href="<%- url_for(theme.customize.social_links[i]) %>" target="_blank" rel="noopener">
                        <i class="icon fa fa-<%= i %>"></i>
                    </a>
                </li>
                <% } %>
            <% } %>
        </ul>
    </div>
    <div class="github-card" data-github="jeongwookie" data-width="" data-height="" data-theme="default"></div>
    <script src="//cdn.jsdelivr.net/github-cards/latest/widget.js"></script>
    <% if (is_post()) { %>
        <%- partial('post/nav', {post: page}) %>
    <% } %>
    <div class="widgets-container">
        <% if (theme.widgets) { %>
            <% theme.widgets.forEach(function(widget) { %>
                <%- partial('widget/' + widget, {post: page}) %>
            <% }) %>
        <% } %>
    </div>
    <%- partial('ads/adsense') %>
</aside>

그리고 hexo g --d를 입력하면 끝!

adsense.ejs에 작성한 코드는 구글 애드센스가 준 페이지 확인 코드이기 때문에, 따로 generate 시 제대로 적용 되었는지 확인할 방도가 없다..

나도 이렇게 해놓긴 했는데 제대로 된건지 안된건지 알수가 없어서 그냥 그대로 방치(?)했는데,

이렇게 세팅한지 2주 가까이 되었나? 거의 까먹어 갈 때 즈음 메일이 왔다.

참고로 승인이 날 동안 블로그의 방문자수는 거의 0에 수렴하였고, 게시글의 숫자도 20개가 채 안되었었다.

블로그 게시물 숫자나 방문자 수가 승인 기준이 아니라, 그냥 제대로 된 곳에 코드를 잘 붙여놓고 인내심을 가지면 해결되는 문제인 것 같다.

승인 이후에는 매우 쉽다.

승인된 계정으로 다시 한번 애드센스 홈페이지에 접속하고, 내 광고 > 콘텐츠 > 광고 단위 메뉴에 들어가서 새 광고를 만들면 된다.

텍스트 및 디스플레이 광고 만들기. 반응형을 클릭하면 된다.

등록을 완료하면, 고유 코드가 생성되는데 이것을 복사한다.

그리고 앞서 만들어놓은 themes/layout/ads/adsense/ejs 파일 안에 있는 구글 애드센스 계정 등록 시 사용되었던 코드를 깨끗하게 지우고, 여기다가 붙여 넣으면 된다.

필자와 똑같이 하면, 구글 애드센스 광고가 본문 상단, 본문 하단, 그리고 사이드바에 성공적으로 위치함을 확인할 수 있다.

조금 더 상세한 정보를 알고 싶다면 Eric Han’s Blog 를 참고하자.

(19.03.21 추가)

현재는 테마를 다른 것으로 바꾸었습니다. 전체적인 세팅 방법만 참고하시면 될 듯 합니다.