Google+

sharethis_social_button

2014년 6월 1일 일요일

구글 애널리틱스 - 소셜플러그인 설치하기 #소셜플러그인 #plugin #google analitics (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

A. 코드
: <!-- 구글 애널리틱스 시작>
  <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

B. 코드
: <!- 페이스북 코드 시작 >
<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>
<!- 구글 플러스 코드 끝 ->

관심 블로거의 글목록