본문으로 바로가기
728x90
반응형


코일 메타태그 사용 시 카운터 생성하기 

how to add the Coil counter



코일의(Coil) 웹 수익화(Web-Monetization)를 위해 


블로그에 기존의 자바스크립트 코드(javascript code)를 삽입하는 방식에서


메타태그(meta tag)를 삽입하는 방식으로 업그레이드를 한 경우


[암호화폐 Cryptocurrency] - Coil 코드 간단히 하기 (meta tag) Simplifying Web Monetization




불편했던 점 중 하나가


기존 자바스크립트 코드를 사용했을 때에는 브라우저 왼쪽 하단에 보였던 


XRP 기부가 카운팅 되는 현황(이후 코일 카운터라고 하겠습니다.)이 


메타태그로 업그레이드 후에는 보이지 않았다는 것이었습니다.



최근 이 코일 카운터가 보이도록 하는 글이 소개되었습니다.




아래 링크에 들어가면 자세한 내용이 있습니다.


https://github.com/interledgerjs/web-monetization-scripts#including-the-script




내용을 간단히 소개하자면


메타태그로 업그레이드한 경우 아래와 같은 자바스크립트 코드를 삽입하면


코일 카운터가 보인다는 것입니다.



<script src="https://cdn.coil.com/counter.js"></script>
<script>
  window.WebMonetizationScripts.createCounter()
</script>


[출처]



저도 적용을 해보니 아래와 같이 코일 카운터가 잘 나왔습니다.


(하지만 모바일에서는 안 나오는 듯합니다.)






코일 체커 https://fudbingo.com/coilchecker에서도 확인해보니 OK입니다.





자바스크립트 코드 삽입한 것을 참고하시라고 삽입한 모습도 캡처해봤습니다.



이 블로그에서는 


메타태그와 자바스크립트 코드 위치는 모두 <head>와 </head> 태그 사이에 위치하게 했습니다.


메타태그인 경우는 https://coil.com/creator-setup에 의하면 


<head>와 </head> 태그 사이에 삽입하라고 설명되어 있습니다.



그러나 코일 카운터를 위한 자바스크립트 위치에 대해서는 특별한 언급은 없습니다.


다만


https://github.com/interledgerjs/web-monetization-scripts/blob/master/examples/counter.html


에 있는 예시에 의하면 자바스크립트 코드도 메타태그 바로 아래에 위치해 있습니다.



저도 관리 편의성 차원에서 메타태그 바로 아래 삽입하였습니다.


(그리고 기존 자바스크립트 코드는 삭제해도 되지만 주석처리만 하고 남겨 두었습니다.)




https://github.com/interledgerjs/web-monetization-scripts#usage-1 에는


기존 자바스크립트 코드에 사용된 window.WebMonetizationScripts.donate의


옵션에 대한 설명도 있으니 관심있으신 분은 참고하시면 좋을 것 같습니다.




이 글이 유익하셨다면












728x90
반응형