구글 애널리틱스 – 소셜플러그인 설치하기(2)

홈페이지나 쇼핑몰에 넣는 경우, http://ts.daumcdn.net/custom/blog/158/1585974/skin/images/ga_social_tracking.js 대신에 ga_social_tracking.js를 서버에 저장한 경로를 넣어주면 됩니다.  

일단 아래의 C 코드에는 src=””http://www.i-help.kr/oa/ga_social_tracking.js“>로 넣음. 안되면 i-help~  로 넣어주세요

C. 코드

  : <!– 구글 애널리틱스 시작>
  <script type=”text/javascript”>

  var _gaq = _gaq || [];
  _gaq.push([‘_setAccount’, ‘UA-44032591-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://www.i-help.kr/oa/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>
  <!- 트위터 플러그인 끝 –>

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

 

  [페이지편집] -> [전체페이지] -> 헤더(p_header.tpl.php)] 에서 헤더&메타&JS 에 C.코드를 넣고, 바디시작/내부에 B.코드를 넣어주세요. -> m_header.php(모바일용) 에서도 해주세요.

 

HTML 헤더 태그

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

    이 부분에서 조금 헤메었는데, 내 티스토리는 XHTML 1.0 – Strict로 작성되어 아래와 같이 나오며 <header>..</header>라는 프램그램어가 없다

<div id=”header”>
<!– 블로그 타이틀 모듈 –>
   <div class=”wrapHeadMenu”>
    <h1><a href=”[##_blog_link_##]”>[##_title_##]</a></h1>
    <ul id=”blogMenu”>
     <!– 블로그 사용 환경 (설치형/티스토리)에 맞게 아래 주석으로 처리된 메뉴를 활성화 시키시기 바랍니다. –>
     <li class=”tab_home”><a href=”[##_blog_link_##]” title=”Home”>Home</a></li>
     <li class=”tab_tag”><a href=”[##_taglog_link_##]” title=”Tag”>Tag</a></li>
     <li class=”tab_media”><a href=”[##_blog_link_##]media” title=”MediaLog”>MediaLog</a></li>
     <li class=”tab_location”><a href=”[##_localog_link_##]” title=”LocationLog”>LocationLog</a></li>
     <!– <li class=”tab_key”><a href=”[##_keylog_link_##]” title=”KeyLog”>KeyLog</a></li> –>
     <li class=”tab_guestbook”><a href=”[##_guestbook_link_##]” title=”Guestbook”>Guestbook</a></li>
     <li class=”tab_admin”><a href=”[##_owner_url_##]” title=”Admin”>Admin</a></li>
     <li class=”tab_write”><a href=”[##_owner_url_##]/entry/post” title=”Write”>Write</a></li>
    </ul>
<!– 검색 모듈 –>
     <div id=”searchBox”>
      <h3>Search</h3>
      <s_search>
       <input type=”text” name=”[##_search_name_##]” value=”[##_search_text_##]” onkeypress=”if (event.keyCode == 13) { [##_search_onclick_submit_##] }”/><input value=”검색” type=”button” onclick=”[##_search_onclick_submit_##]” class=”submit”/>
      </s_search>
     </div>
                                         <!– close header –>

 

  맨아래에 <!– close header –> 라고 나온다. 따라서 티스토리 <header>는  <div id=”header”>이고, </header>는 </div>

  따라서  티스토리 관리자 페이지의 [꾸미기] -> [HTML/CSS 편집] 에서 나 [skin.html] 편집창에서 <div id=”header”>와 </div>사이에 A.코드 를 넣어주면 됩니다.

 

빨간색

  은 구글 애널리틱스의 고유코드를 넣어줍니다.

  구글 애널리틱스에서 [관리]-> [속성] ->[.js 추적코드]에 가면 “UA-44032591-1″와 같은 추적ID가 있습니다.

  이것을 넣어주면 됩니다.

 

파란색

  은 티스토리의 고유 코드를 넣어줍니다.

  내 티스토리의 아무페이지나 열어서 소스보기를 하니 상단에 아래와 같이 나옴

  ….
  <link rel=”stylesheet” media=”print” type=”text/css” href=”http://ts.daumcdn.net/custom/blog/158/1585974/skin/images/print.css” />
  ….

  여기에서 http://ts.daumcdn.net/custom/blog/158/1585974/skin/images/ copy하여 http://ts.daumcdn.net/custom/blog/158/1585974/skin/images/ga_social_tracking.js하고 파일업로더 경로를 완성해서 파란색 부분에 넣어줍니다.

구글 애널리틱스_소셜플러그인 설치하기_검색엔진최적화 tool_소셜플러그인_plugin_google analitics_5

 

: <!– 구글 애널리틱스 시작>
  <script type=”text/javascript”>

  var _gaq = _gaq || [];
  _gaq.push([‘_setAccount’, ‘UA-44032591-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://ts.daumcdn.net/custom/blog/158/1585974/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 바디 태그 

  그리고 B,코드를 티스토리 관리자 페이지의 [꾸미기] -> [HTML/CSS 편집] 에서 나 [skin.html] 편집창에서 </body>의 윗쪽에 넣어줍니다.

  빨간색 은 페이스북의 고유코드를 넣어줍니다.

구글 애널리틱스_소셜플러그인 설치하기_검색엔진최적화 tool_소셜플러그인_plugin_google analitics_6

 

: <!- 페이스북 코드 시작 >
<div id=”fb-root”></div>
<script src=”http://connect.facebook.net/en_US/all.js#appId=<span style=”background-color: rgb(255, 0, 0); color: rgb(255, 0, 0); “>129426390472167</span>&amp;amp;xfbml=1”>
</script>
<script type=”text/javascript”&gt;_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>
<!- 구글 플러스 코드 끝 ->