POSTS
PORTFOLIO
SEARCH
SHOP
  • Your Cart Is Empty!
Your address will show here +12 34 56 78
PC / Mobile 스킨용

데이블 티스토리 적용 가이드

PC 스킨 적용

• 현재 티스토리에만 적용 가능합니다.
• 반응형 스킨을 사용하고 계시는 경우 Dable 티스토리 적용 가이드 (반응형 스킨용)을 참고해주세요.
• PC 스킨을 적용하시는 경우 추가로 모바일 스킨에도 적용하실 수 있으며, 모바일 스킨 단독 적용을 현재 지원되지 않음을 양해 바랍니다.

1. 필요한 메타태그 삽입


관리자 페이지에서 스킨 클릭 – PC 탭에서 HTML/CSS 편집 클릭

 

2-1. 본문에 필요한 메타태그 삽입하기

<s_article_rep>

 

위 항목을 찾은 다음, 아래와 같이 두 가지 태그를 추가
(두 줄의 <meta>태그를 그대로 복사/붙여넣기 하면 됩니다.) 

<s_article_rep>
<meta property="dable:item_id" content="[##_article_rep_id_##]">
<meta property="article:section" content="[##_article_rep_category_##]">


2-2. 로그수집 스크립트 삽입하기

 

</head>

위 항목을 찾은 다음, 바로 윗줄에 아래와 같이 <script> 태그를 추가
(</head>직전에 <script>태그를 그대로 복사/붙여넣기 하면 됩니다.) 

<script src="//static.dable.io/dist/tistory.min.js" defer></script>
</head>

2-3. 본문 텍스트 구분자 삽입하기 (만약 스킨에 따라 두 항목 이상 발견된다면 모두 교체해주세요.)

[##_article_rep_desc_##]

 

위 항목을 찾은 다음, 아래와 같이 두 가지 태그를 추가
(두 줄의 <meta> 태그를 그대로 복사/붙여넣기 하면 됩니다.)

<div itemprop="articleBody">
[##_article_rep_desc_##]
</div>

 

3. 추천 위젯 스크립트 삽입하기


“2-3. 본문 텍스트 구분자 삽입하기”에서 변경하신 부분에 담당자로부터 이메일을 통해 전달 받은 추천 위젯 스크립트를 아래와 같이 삽입합니다. (아래 추천 위젯 스크립트는 샘플 코드이므로, 데이블 담당자에게 전달받은 코드로 삽입해주세요.)

<div itemprop="articleBody">
[##_article_rep_desc_##]
<!-- 데이블 추천 위젯 스크립트-->
</div>

 

 

4. 적용이 완료된 다음, 확인하기


가장 하단에 있는 설명(Q&A 부분)을 참고하시어 1)메타태그2)로그수집 스크립트를 제대로 삽입하셨는지 확인해주세요.

•위의 작업을 완료해주신 후 곧바로 위젯이 노출되지 않습니다. 트래픽에 따라 짧으면 이틀, 길면 일주일 간 데이터를 수집한 뒤 충분한 데이터가 쌓이면 자동적으로 위젯이 노출됩니다. 

※참고 1. 구글 플러그인 내 위젯 스크립트를 삽입하실 때 미리 넣었던 로그수집 스크립트 바로 아래에 넣어주세요. 로그수집 스크립트를 제거하시면 위젯이 노출되지 않습니다.
※참고 2. 구글 애드센스 플러그인의 영역을 빌리지 않고 HTML 코드 안에 넣어도 무방하니, 원하신다면 담당자에게 연락하시어 안내를 받으시기 바랍니다.
※참고 3. 본문 하단 외의 영역에 데이블 위젯을 적용할 수 있으니 원하실 경우 담당자에게 연락하시어 안내를 받으시기 바랍니다.


모바일 스킨 적용

PC 스킨을 적용한 상태에서 아래와 같이 모바일용 위젯 스크립트를 삽입해주시면 됩니다.

1. 추천 위젯 스크립트 삽입하기


플러그인 설정 – 텐핑 (모바일용)에

<script src="//static.dable.io/dist/tistory.min.js" defer></script>
<!--데이블 추천 위젯 스크립트--!>

를 추가해주세요.

<!–데이블 추천 위젯 스크립트–!>는 담당자로부터 이메일을 통해 전달 받은 위젯 스크립트를 윗줄의 로그수집 스크립트와 함께 “광고 코드”란에 붙여넣으시면 됩니다.

 



 

QNA

로그수집 스크립트 및 메타태그가 제대로 적용됐는지 확인할 수 있나요?



메타태그 적용 확인

로그수집 스크립트 및 메타태그를 적용하신 후 블로그의 콘텐츠 하나를 클릭하세요.  URL 디버거 툴 (http://api.dable.io/tools/meta_test.html?service_type=tistory) 에 접속하셔서 ‘Service Type’을 블로그로 변경하신 후 복사한 URL을 입력한 후 확인을 눌러주세요. 만약 배경색이 빨갛게 뜨는 부분이 있다면 그 부분에 해당하는 태그가 제대로 삽입되지 않았다는 의미입니다. 빨간 배경이 뜬다면 해당 부분을 다시 한번 확인하시고 수정해주시기 바랍니다.



로그수집 스크립트 적용 확인

데이블 대시보드에 접속하셔서 좌측 ‘로그 현황 > 로그수집 현황’을 클릭하세요. 실시간으로 로그가 잘 들어오고 있다면 로그수집 스크립트가 제대로 적용된 것입니다. 만일 들어오지 않고 있다면 로그수집 스크립트 적용을 재확인하신 후 수정해주세요.

자주 실수하는 사례가 있나요?



로그수집 스크립트 및 메타태그 적용 과정에서 많은 오류가 발생합니다.

1. 쌍따옴표 (“”)의 형식이 다른 경우
2. dable을 able로 입력하는 등의 오타가 발생한 경우
3. 올바르지 않은 위치에 코드 및 태그를 입력한 경우

오류가 발생한 부분은 위의 사례에만 한정되지 않습니다. URL 디버거 툴을 통해 제대로 적용되지 않은 부분이 발생했다면 위의 사례뿐만 아니라 오류가 발생할 수 있는 다른 가능성까지 세세하게 살펴보시기 바랍니다.

Keep In Touch With Us

Let’s Share Great Ideas