구글 애널리틱스 - 소셜 플러그인 설치하기

티스토리의 최대 장점이 바로 자기 맘대로 모든 것을 설치할 수 있다는 것이다... 최근에 구글 애널리틱스에서 제공하는 웹로그 분석에서 소셜 플러그인을 시작하였다...

소셜 플러그인은 자신의 페이지에서 사람들이 페이스북 좋아요를 클릭하거나 트위터 리트윗을 하거나 구글 플러스에서 +1을 클릭한 것을 한 자리에서 확인할 수 있다...

설치하는 방법은 약간 복잡하다... 다음 포스트를 읽고 한번 따라해 보세요~

구글 애널리틱스 웹로그 분석 한자리에서 소셜에서 무슨 일이 일어나는 지 확인할 수 있습니다~

자바 스크립트 업로드 

먼저 다음 파일을 티스토리에 업로드 하시기 바랍니다... 업로드는 "HTML/CSS 편집" > "파일업로드"에서 하세요~

http://code.google.com/p/analytics-api-samples/source/browse/trunk/src/tracking/javascript/v5/social/ga_social_tracking.js

HTML 헤더 태그

다음 코드를 <header></header> 사이에 삽입하시기 바랍니다.

빨간색은 구글 애널리틱스의 고유 코드를 삽입하시기 바랍니다.

파란색은 티스토리의 고유 코드를 삽입하시기 바랍니다.

<!-- 구글 애널리틱스 시작 -->

<script type="text/javascript">

  var _gaq = _gaq || [];

  _gaq.push(['_setAccount', 'UA-23729038-1']);

  _gaq.push(['_trackPageview']);

  (function() {

    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

  })();

</script>

<!-- 구글 소셜 플러그인 시작 -->

<script type="text/javascript" src="http://cfs.tistory.com/custom/blog/78/789532/skin/images/ga_social_tracking.js"></script>

<!-- 구글 소셜 플러그인 끝 -->

<!-- 트위터 플러그인 시작 -->

<script>

(function(){

var twitterWidgets = document.createElement('script');

twitterWidgets.type = 'text/javascript';

twitterWidgets.async = true;

twitterWidgets.src = 'http://platform.twitter.com/widgets.js';

// Setup a callback to track once the script loads.

twitterWidgets.onload = _ga.trackTwitter;

document.getElementsByTagName('head')[0].appendChild(twitterWidgets);

})();

</script>

<!-- 트위터 플러그인 끝 -->

<!-- 구글 애널리틱스 끝 -->

HTML 보디 태그

그리고 다음 코드를 </body> 위쪽에 삽입하시기 바랍니다.

빨간색은 페이스북의 고유 코드를 삽입하시기 바랍니다.

<!– 페이스북 코드 시작 –>

<div id="fb-root"></div>

<script src="http://connect.facebook.net/en_US/all.js#appId=129426390472167&amp;xfbml=1">

</script>

<script type="text/javascript">_ga.trackFacebook();</script>

<!– 페이스북 코드 끝 –>

<!– 트위터 코드 시작 –>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

<!– 트위터 코드 끝 –>

<!– 구글 플러스 코드 시작 –>

<script type="text/javascript">

(function() {

var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;

po.src = 'https://apis.google.com/js/plusone.js';

var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);

})();

</script>

<!– 구글 플러스 코드 끝 –>

소셜 버튼 추가하기

소셜 버튼 추가는 제가 이전에 만든 포스트를 확인해 보시기 바랍니다.

아니면 다음 링크에서 스크롤 버튼 추가를 확인해 보시기 바랍니다.