데이블 Blogger 적용 가이드
— 반응형 스킨용 —
개인화 추천 서비스와 네이티브AD를 손쉽게 적용해보세요!
1. 필요한 메타태그 삽입
관리자 페이지에서 ‘테마’ 메뉴를 클릭 한 후 HTML 편집을 클릭해주세요.
2. 본문에 필요한 태그 삽입하기
1) 코드에서</head>부분을 찾아 바로 윗 줄에 아래와 같은 코드를 추가합니다. (아래의 코드를 그대로 복사하시어 붙여넣으시면 됩니다.)
<script defer='defer' src='//static.dable.io/dist/blogger.min.js'/>
2) 코드에서 <b:includable id=’postBody’ var=’post’> 부분을 찾아 좌측의 “►” 모양을 눌러 코드를 확장한 후 아래의 코드를 찾습니다.
<div class='post-body entry-content float-container' expr:id='"post-body-" + data:post.id'>
3) 찾은 코드를 아래와 같이 수정합니다. 상단의 코드를 찾아 그 위에 3개의 추가 코드를 넣으신 후, <div class ~> 를 <div itemprop=’articleBody’ class~> 로 변경합니다.
<meta expr:content='data:post.timestampISO8601' property='article:published_time'/>
<meta expr:content='data:post.id' property='dable:item_id'/>
<b:if cond='data:post.labels'><b:loop index='i' values='data:post.labels' var='label'>
<b:if cond='data:i == 0'><meta expr:content='data:label.name' property='article:section'/></b:if></b:loop></b:if>
<div itemprop='articleBody' class='post-body entry-content float-container' expr:id='"post-body-" + data:post.id'>
3. 적용 완료 후, 데이블 담당자에게 연락하기
가장 하단에 있는 설명(Q&A 부분)을 참고하시어 1)메타태그와 2)로그수집 스크립트를 제대로 삽입하셨는지 확인해주세요. 확인을 완료하신 후에 데이블 담당자에게 연락주시면 실제로 광고와 추천 콘텐츠가 노출되는 추천 위젯 스크립트를 전달해 드립니다.
로그수집 스크립트 및 메타태그가 제대로 적용됐는지 확인할 수 있나요?
적용이 제대로 완료되었는지 편히 확인하실 수 있도록 URL 디버거 툴을 지원해드립니다.
메타태그 적용 확인
로그수집 스크립트 및 메타태그를 적용하신 후 블로그의 콘텐츠 하나를 클릭하세요. URL 디버거 툴(http://api.dable.io/tools/meta_test.html) 에 접속하셔서 'Service Type'을 블로그로 변경하신 후 복사한 URL을 입력한 후 확인을 눌러주세요.만약 배경색이 빨갛게 뜨는 부분이 있다면 그 부분에 해당하는 태그가 제대로 삽입되지 않았다는 의미입니다. 빨간 배경이 뜬다면 해당 부분을 다시 한번 확인하시고 수정해주시기 바랍니다.
로그수집 스크립트 적용 확인
데이블 대시보드에 접속하셔서 좌측 '로그 현황 > 로그수집 현황'을 클릭하세요.
실시간으로 로그가 잘 들어오고 있다면 로그수집 스크립트가 제대로 적용된 것입니다. 만일 들어오지 않고 있다면 로그수집 스크립트 적용을 재확인하신 후 수정해주세요.
실시간으로 로그가 잘 들어오고 있다면 로그수집 스크립트가 제대로 적용된 것입니다. 만일 들어오지 않고 있다면 로그수집 스크립트 적용을 재확인하신 후 수정해주세요.
자주 실수하는 사례가 있나요?
로그수집 스크립트 및 메타태그 적용 과정에서 많은 오류가 발생합니다.
1. 쌍따옴표 ("")의 형식이 다른 경우
2. dable을 able로 입력하는 등의 오타가 발생한 경우
3. 올바르지 않은 위치에 코드 및 태그를 입력한 경우
로그수집 스크립트 및 메타태그를 적용하신 후 블로그의 콘텐츠 하나를 클릭하세요. URL 디버거 툴에 접속하셔서 'Service Type'을 블로그로 변경하신 후 복사한 URL을 입력한 후 확인을 눌러주세요.
만약 배경색이 빨갛게 뜨는 부분이 있다면 그 부분에 해당하는 태그가 제대로 삽입되지 않았다는 의미입니다. 빨간 배경이 뜬다면 해당 부분을 다시 한번 확인하시고 수정해주시기 바랍니다.
만약 배경색이 빨갛게 뜨는 부분이 있다면 그 부분에 해당하는 태그가 제대로 삽입되지 않았다는 의미입니다. 빨간 배경이 뜬다면 해당 부분을 다시 한번 확인하시고 수정해주시기 바랍니다.