사이트 구축/최적화 활용 팁

애드센스 광고비 지급 계좌 등록 방법입니다. 

등록 방법은 간단합니다. 초기에 광고비가 많지 않은 경우에는 SC제일은행이 300달러 미만일 때 수수료가 면제여서 유리합니다.

미래에 광고비가 300달러가 넘어가게 되면 수수료 5,000원인 카카오뱅크나 우체국 등으로 옮기는 것을 검토해 볼 필요가 있습니다.

애드센스 메뉴의 지급을 선택 후 결제 수단 추가에서 새 은행 송금 세부정보 추가를 클릭 수 저장을 누릅니다.

결제 수단 추가 (SC제일은행으로 추가 진행 예시)

1. 예금주의 이름
- 카카오뱅크 체크카드 신청시에 영문명을 기입하였다면 그 영문명을 기입합니다.
- 영문으로 된 예금주의 성명과 애드센스에 등록한 수취인 명은 그 영문명이 동일한 것이 좋습니다. 

2. 은행이름
- STANDARD CHARTERED FIRST BANK KOREA

3. SWIFT 은행 식별 코드(BIC)
- SCBLKRSE

4. 계좌 번호
- 계좌번호를 숫자로만 띄어쓰기 없이 입력합니다.

5. 계좌 번호 재입력
- 위에서 입력한 계좌번호를 다시 한번 입력합니다.

6. 기본 결제 수단으로 설정
- 앞으로 이 계좌로 송금받길 원할 경우 체크합니다.

7. 저장버튼을 누릅니다.

아래와 같이 정상적으로 등록 화면을 볼 수 있습니다.

국내 주요 시중 은행별 은행 영문 이름과 SWIFT 은행 식별 코드(BIC) 정리표

티스토리 반응형 Square 스킨 애드센스 인피드 광고를 삽입 넣는 방법입니다.

1. 애드센스에서 인피드 광고를 만듭니다.

2. Square 스킨 편집으로 들어가서 html  편집을 클릭합니다.

3. </head> 태그를 찾아서 바로 위에 아래 소스를 넣어 줍니다.

- 애드센스의 인피드 광고 소스에서 data-ad-layout-key, data-ad-client, data-ad-slot 값을 찾아 넣어 줍니다.
- chInfeedAdSenseInsert 값을 통해서 목록 사이에 몇 개를 노출할 것인지 결정하면 됩니다.

<script>
    var chInfeed = 0;
    var chInfeedAdSenseShow = 0; // 0 = 인피드광고 적용, 1 = 인피드광고 비적용
    var chInfeedAdSenseInsert = 5; // 인피드광고 적용 개수
    var chInfeedAdSense = '<ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout="image-side" data-ad-layout-key="◆" data-ad-client="■" data-ad-slot="●"></ins>';
</script>

4. 대략 165 라인 정도에 아래 소스를 넣어 줍니다.

- 실제로 화면에 나오게 하는 소스입니다.
- <div id="body" class="list"> → <s_list_rep> <li> ... </li> 아래에 소스를 넣어 줍니다.

			<div id="body" class="list">
				<ul>
					<s_list_rep>
					<li>
						<a href=""></a>
						<span class="date"></span>
						<span class="cnt"></span>
						<div class="clear"></div>
					</li>

<!-- 인덱스 페이지 애드센스 시작 -->
<script>
    if (chInfeedAdSenseShow == 0) {
        chInfeed++;
        if (chInfeed % chInfeedAdSenseInsert == 0) {
            document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script>');
            document.write(chInfeedAdSense);
            (adsbygoogle = window.adsbygoogle || []).push({});
						document.write("<hr style='padding: 0; margin: 0; height: 1px; border: 0 none; color: #f5f5f5; background-color: #f5f5f5;'>");
        }
    }
</script>
<!-- 인덱스 페이지 애드센스 끝 -->
						
					</s_list_rep>
				</ul>
			</div>

소스를 정상적으로 삽입을 하였다면 아래와 같이 노출이 되게 됩니다.

아래 첨부 파일은 위에서 얘기 드렸던 샘플 소스입니다.

2020/10/29 - [유용한 활용팁] - 티스토리 반응형 Square 스킨 플러그인 상단 애드센스 배너 2개 노출 방법

2020/10/22 - [유용한 활용팁] - 티스토리 반응형 Square 스킨 애드핏 상단 하단 배너 방법 - Daum AdFit (PC)

2020/10/20 - [유용한 활용팁] - 티스토리 반응형 Square 스킨 Recent posts 에러 해결 방법

2020/02/03 - [유용한 활용팁] - 티스토리 반응형 Square 스킨 사이드바에 애드핏, 애드센스 넣기

티스토리에 애드센스 스폰서 링크 광고 넣는 방법입니다.

애드센스 광고 단위에 링크 광고가 없는 경우 사용하는 방법입니다.

디스플레이광고를 만듭니다.

애드센스 소스코에서 data-ad-format="auto"를 data-ad-format="link"로 수정을 합니다.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 스폰서 링크 광고 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="★★★★★★"
     data-ad-slot="◆◆◆◆◆◆"
     data-ad-format="link"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

애드센스 소스코드를 서식을 만들어서 본문에서 서식으로 넣게 되면 아래와 같이 배너가 노출이 됩니다.

서식을 활용하는 방법은 아래 글 참고하시면 됩니다.

2020/10/27 - [유용한 활용팁] - 티스토리 애드센스 콘텐츠 내 자동 삽입 광고 넣는 방법 - 서식 활용

티스토리 Square 스킨에서 플러그인으로 애드센스 운영 시 아래와 같이 상단에 광고 배너를 1개만 노출되도록 되어 있습니다. 

다른 티스토리를 방문해 보시면 사각 배너 2개로 운영이 되는 것을 많이 보셨을 텐데요. 그 방법을 정리해 보겠습니다.

애드센스에서 반응형 배너를 2개 생성합니다.

아래 소스 내에서 data-ad-client, data-ad-slot를 찾아서 위에서 발급한 코드를 넣어 줍니다.

좌측 배너 코드 수정 부분은 54라인입니다. 우측 배너 코드 수정 부분은 124라인입니다

<div style="text-align: center;">
    <span>
        <style type="text/css">
            .adsense_1 {
                display: inline-block;
                width: 300px;
                height: 250px;
            }

            @media (max-width: 300px) {
                .adsense_1 {
                    width: 300px;
                    height: 250px;
                }
            }

            @media (min-width:450px) {
                .adsense_1 {
                    width: 336px;
                    height: 280px;
                }
            }

            @media (min-width:800px) and (max-width:899px) {
                .adsense_1 {
                    width: 300px;
                    height: 250px;
                }
            }

            @media (min-width:900px) and (max-width:999px) {
                .adsense_1 {
                    width: 336px;
                    height: 280px;
                }
            }

            @media (min-width:1000px) and (max-width:1019px) {
                .adsense_1 {
                    width: 300px;
                    height: 250px;
                }
            }

            @media (min-width:1020px) {
                .adsense_1 {
                    width: 336px;
                    height: 280px;
                }
            }

        </style>
        <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <ins class="adsbygoogle adsense_1" data-ad-client="●●●" data-ad-slot="▲▲▲"></ins>
        <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <script>
            (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
    </span>

    <span class="adsense_empty">
        <style type="text/css">
            .adsense_empty {
                display: inline-block;
                width: 0px;
                height: 0px;
            }

            @media (max-width: 799px) {
                .adsense_empty {
                    display: none;
                }
            }

            @media (min-width:800px) {
                .adsense_empty {
                    width: 20px;
                }
            }
        </style>
    </span>
    <span>
        <style type="text/css">
            .adsense_2 {
                display: inline-block;
            }

            @media (max-width:799px) {
                .adsense_2 {
                    display: none;
                }
            }

            @media (min-width:800px) and (max-width:899px) {
                .adsense_2 {
                    width: 300px;
                    height: 250px;
                }
            }

            @media (min-width:900px) and (max-width:999px) {
                .adsense_2 {
                    width: 336px;
                    height: 280px;
                }
            }

            @media (min-width:1000px) and (max-width:1019px) {
                .adsense_2 {
                    width: 300px;
                    height: 250px;
                }
            }

            @media (min-width:1020px) {
                .adsense_2 {
                    width: 336px;
                    height: 280px;
                }
            }

        </style>
        <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <ins class="adsbygoogle adsense_2" data-ad-client="●●●" data-ad-slot="★★★"></ins>
        <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <script>
            (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
    </span>
</div>

아래 첨부 파일의 소스코드를 이용하시면 됩니다.

소스를 본인의 코드로 수정하였으면 아래 영역에 해당 소스를 모두 복사하여 붙여넣기를 한 후 저장합니다.

아래와 같이 PC에서 애드센스 광고가 2개가 노출 출력되는 것을 확인할 수 있습니다.

2020/10/27 - [유용한 활용팁] - 티스토리 애드센스 콘텐츠 내 자동 삽입 광고 넣는 방법 - 서식 활용

2020/05/08 - [유용한 활용팁] - 티스토리 구글 애드센스 일치하는 콘텐츠 플러그인 설정 방법

티스토리 글 사이에 애드센스 "콘텐츠 내 자동 삽입 광고"를 서식을 활용하여 추가하는 방법입니다.

애드센스에서 콘텐츠 내 자동 삽입 광고를 만듭니다.

소스코드를 복사합니다.

티스토리 관리자 화면에서 서식관리 메뉴로 들어가서 서식쓰기를 클릭합니다.

서식쓰기에서 기본모드를 HTML로 변경합니다.

애드센스에서  콘텐츠 내 자동 삽입 광고 소스 코드를 아래와 같이 붙여 넣기를 합니다.

글을 작성하면서 아래의 메뉴에서 서식을 클릭 후 조금 전 등록했던 서식을 클릭합니다.

서식을 선택하게 되면 아래와 같이 서식 즉, 콘텐츠 내 자동 삽입 광고가 들어가게 됩니다.

글 등록 완료 후 애드센스의 콘텐츠 내 자동 삽입 광고가 노출되는 모습입니다.

티스토리 반응형 Square 스킨에서 애드핏 상단 하단 배너 방법입니다.

반응형 Square 스킨은 Daum AdFit (모바일)에 애드핏 스크립트를 넣고 저장을 하여도 반영이 되지 않습니다.

Daum AdFit (PC)의 768 사이즈의 배너가 PC와 모바일에서 같이 사용이 됩니다.

그러다 보니, 모바일에서는 우측이 짤려서 나오게 되는 현상이 발생을 합니다.

애드핏에서 제공해 주는 스크립트를 가공하여 윈도우 사이즈에 따라서 320(모바일용), 728(PC)가 나오도록 자바스크립트로 노출되게 하는 방법입니다.

배너를 출력해 보면 좌측 정렬이 되는 현상을 확인할 수 있습니다. 그래서 <div align="center"> ... </div>를 넣어서 가운데 정렬이 되게 하였습니다.

<div align="center">
<script>
	if ( window.matchMedia( '( min-width: 1024px )' ).matches == true ) {
		document.write( '<ins class="kakao_ad_area" style="display:none;" data-ad-unit = " 본인PC용광고코드 " data-ad-width = "728" data-ad-height = "90"></ins><script type="text/javascript" src="//t1.daumcdn.net/adfit/static/ad.min.js" async><\/script>' );
	}
	if ( window.matchMedia( '( max-width: 768px )' ).matches == true ) {
		document.write( '<ins class="kakao_ad_area" style="display:none;" data-ad-unit = "본인 모바일용광고코드" data-ad-width = "320" data-ad-height = "100"></ins><script type="text/javascript" src="//t1.daumcdn.net/adfit/static/ad.min.js" async><\/script>' );
	}
</script>
</div>

위의 소스코드를 다운 받을 수 있게 아래 첨부하였습니다.

2020/10/20 - [유용한 활용팁] - 티스토리 반응형 Square 스킨 Recent posts 에러 해결 방법

2020/02/03 - [유용한 활용팁] - 티스토리 반응형 Square 스킨 사이드바에 애드핏, 애드센스 넣기

티스토리 반응형 Square 스킨에서 Recent posts의 글이 아래와 같이 보이지 않는 에러 해결 방법입니다.

위와 같이 마우스 오버시에만 배너가 보이고 그렇지 않을 때는 빈 화면으로 보이는 현상입니다.

꾸미기 > 스킨 편집을 선택 후 html편집 버튼을 클릭합니다.

스킨 편집창의 파일업로드 메뉴를 선택합니다.

아래 보이시는 common.js를 삭제합니다. 삭제 후 아래 첨부 파일을 업로드하면 에러 현상은 해결이 됩니다.

압축 파일을 해제 후 업로드를 한 후 적용 버튼을 클릭합니다.

common.js 파일은 브라우저 캐시에 저장이 되어 있습니다. 브라우저 캐시를 완전히 지우셔야 반영 확인을 하실 수 있습니다.

오류가 해결되어 반영이 된 모습입니다.

윌라의 이어서 밀리의서재 1개월 무료 서비스를 구독을 하였습니다.

주 목적은 오디오북 청취입니다.
책을 읽으면서 오디오를 들을 수 있다는 다른 분들의 추천사를 보고 시도해 보았습니다.

사용 후의 느낀 점이며, 전자책으로 접근하지 않고 귀로 듣는 책의 개념으로 사용상의 어려웠던 점을 적어 보았습니다.

연속 재생 기능의 작동이 제대로 되지 않습니다.

이 앱은 오디오북인데도 불구하고 네이버의 오디오클립처럼 스마트워치, 버즈와의 연계 동작이 순탄하지않습니다.
사용중 버즈로 재생 중지를 한 상태로 잠시 시간이 흘러서 재생을 하게 되면 조금 전 듣던 곳에서 재생이 되지 않습니다.
사용중 버즈로 재생 중지를 한 상태로 휴대폰을 열어서 재생을 하게 되면 첫 재생 시점부터 다시 재생이 됩니다.
이 부분의 오류를 해결하기 위해서는 휴대폰에서 앱을 켜고 제가 지금까지 들었던 곳까지 동기화되기를 기다렸다가 시작을 해야 합니다.
파일을 다운로드한 상태에서 재생을 하는데 동기화 처리가 원활하지 않으니, 휴대폰이 아닌 스마트워치나 버즈로 컨트롤하기가 두렵습니다. 잘못되면 다시 처음으로 넘어가니까요.
이 부분은 윌라와 동일한 현상입니다. 윌라나 밀리의서재 모두 앱의 완성도가 부족함을 느낍니다.

안드로이드 오토와 연계하여 차에서 내용을 들을 수가 없습니다.(올뉴쏘렌토 2017년식 기준)

안드로이드 오토를 통해서 카카오내비 연동을 하면서 오디오북을 들으려고 하였지만 연동이 되지 않게 됩니다.
결국 순정 내비와 블루투스 연결로 오디오북을 들을 수 있었습니다.

오디오북은 유튜브/팟캐스트 유형의 요약본입니다.

오디오북이라하여 좀 내용이 많을 줄 알았지만 요약본입니다.
내용을 들었을 때 요약의 기준도 각양각색입니다. 각 오디언분들이 책을 읽고 난 독후감 느낌이었습니다. 
간간이 저자가 직접 읽어주는 책도 있었으며, 오디언분들의 성향에 따라서 요약의 질이 달라집니다.
요약본으로만 본다면 오디언 앱이 퀄리티가 높습니다.
이 오디오북만을 위해서라면 유튜브가 더 낫겠다는 생각입니다.
책과 오디오의 연동은 좋았지만 중간중간 급하게 넘어가는 부분들이 많습니다.
또 책을 읽으면서 오디오 연동은 안되고 오디오가 움직이는 동안의 해당 책의 내용만 읽을 수 있습니다.
밀리의 서재의 오디오북은 팟캐스트, 유튜브를 가져다 놓은 느낌이 강합니다.


윌라와 밀리의서재를 사용하면서 윌라의 완독과 밀리의서재의 책의 내용을 보여준다면 활용도가 올라가지 않을까 생각해 보았습니다. 
걷거나 운동 중에는 귀로 듣다가 시간이 될 때는 앉아서 눈으로 글을 읽을 수 있을 수 있으니까요.
현재의 이 기능은 기계가 읽어 주기 때문에 사람의 감성은 못 따라오기 때문입니다.

바쁜 일상 속에서 책에 대한 요약본을 읽으면서 전체적인 흐름을 익히는 것도 좋습니다.
하지만 이 방법은 저자의 생각을 내가 보고 듣고 소통하며 해석하는 것이 아니라 다른 사람의 해석을 강요 받는 느낌입니다.

아직은 전체 문장을 통해서 저자와 나 둘만의 직접 소통을 해 보고 싶습니다.

2020/09/25 - [유용한 활용팁] - 정액제 전자책 윌라 오디오북 구독서비스 앱 1개월 사용 후기, 단점

2020/04/23 - [유용한 활용팁] - 정액제 전자책 오디오북 구독서비스 앱 비교 분석하기