Google Analytics "+" Twitter + Вконтакте + Facebook

dniser:
После анонса и всеобщего запуска нового Google Analytics и Google+ меня мучает вопрос: как привязать
Twitter
Вконтакте
Facebook
Однокласники
к статистике. Т.е. Как переписать код кнопок или код счётчика, чтобы получить в вкладке "Социальные действия" статистику по нажатию кнопок.
Прошу помощи в настройке.


Подразумевается, что на странице, куда будет добавляться весь последующий код, уже установлен код GA.
Код GA должен быть вставлен перед этим кодом, который ниже.

Tweeter

Стандартный код (наиболее простой вариант) вставки кнопки Tweet:

<a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-lang="ru">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Для получения возможности трекинга кнопку Tweet необходимо вставлять по-другому - при помощи API, предоставляемого Google.
Пример кода для вставки кнопки (урл, который нужно твитнуть, вставляется в поле data-url):

<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

  <a href="http://code.google.com/apis/analytics" 

  	data-url="http://testdomain.com/" 

  	class="twitter-share-button">Tweet</a>

Кнопка может вствляться где-угодно на странице.

Теперь, когда кнопка отображается на странице, можно прописать сам трекинг, который будет состоять из функции определения URL и непосредственно кода, который будет взаимодействовать с GA.
Код который ниже, может быть вставлен в . Другая позиция вставки - также не исключена.

<script type="text/javascript">



	// функция выделения из url необходимого параметра

		function extractParamFromUri(uri, paramName) {

		  if (!uri) {

		    return;

		  }

		  var uri = uri.split('#')[0];  // Remove anchor.

		  var parts = uri.split('?');  // Check for query params.

		  if (parts.length == 1) {

		    return;

		  }

		  var query = decodeURI(parts[1]);

		

		  // Find url param.

		  paramName += '=';

		  var params = query.split('&');

		  for (var i = 0, param; param = params; ++i) {

		    if (param.indexOf(paramName) === 0) {

		      return unescape(param.split('=')[1]);

		    }

		  }

		}

	// конец функции

	

	twttr.events.bind('tweet', function(event) {

	  if (event) {

	    var targetUrl;

	    if (event.target && event.target.nodeName == 'IFRAME') {

	      targetUrl = extractParamFromUri(event.target.src, 'url');

	    }

	    _gaq.push(['_trackSocial', 'twitter', 'tweet', targetUrl]);

	  }

	});



</script>

Facebook

Вставка кнопки должна производиться через XFBML.

Для вставки необходимо использовать такой код:

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=146323672109203&xfbml=1"></script><fb:like href="testdomaincom" send="false" layout="button_count" width="150" show_faces="false" font="arial"></fb:like>

Код, который выше, можно получить на странице http://developers.facebook.com/docs/reference/plugins/like/

Чтобы отслеживать трекинг нажатия like, unlike и send надо вставить такой код:

<script type="text/javascript">

	FB.Event.subscribe('edge.create', function(targetUrl) {

	  _gaq.push(['_trackSocial', 'facebook', 'like', targetUrl]);

	});

	

	FB.Event.subscribe('edge.remove', function(targetUrl) {

	  _gaq.push(['_trackSocial', 'facebook', 'unlike', targetUrl]);

	});

	

	FB.Event.subscribe('message.send', function(targetUrl) {

	  _gaq.push(['_trackSocial', 'facebook', 'send', targetUrl]);

	});

</script>

Чтобы отслеживать клик на кнопке Вконтакте, нужно использовать не js виджет для вставки кнопки из сайта Vkontakte, а код, который ниже (взят со страницы http://vkontakte.ru/pages.php?act=share).

<a id="vkontakte_share_button" href="http://vkontakte.ru/share.php?url=http://mysite.com" title="Поделиться ВКонтакте" target="_blank"><img src="http://www.wmcenter.com.ua/images/shop/item/balans-vkontakte.png" alt="Поделиться ВКонтакте" /></a>

Из ссылки нельзя удалять id="vkontakte_share_button".

Конечно, надо прописать урл совей страницы, которая будет шариться вместо http://mysite.com. Также, конечно, не обязательно использовать картинку c кодом img src="http://www.wmcenter.com.ua/images/shop/item/balans-vkontakte.png" alt="Поделиться ВКонтакте"... Вместо неё может быть ссылка или что-угодно.

Для трекинга нам необходимо подключить jQuery:
(Это подключение необходимо пропустить, если jQuery уже подключён на странице)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

Для трекинга вставляем такой код:

- добавляем функцию выделения из url необходимого параметра. Если к ней у кода, который ниже, уже есть доступ, функцию можно не добавлять. Напомню, что данная функция могла подключатся, если подключался трекинг конпки Tweet

<script type="text/javascript">

	function extractParamFromUri(uri, paramName) {

	  if (!uri) {

	    return;

	  }

	  var uri = uri.split('#')[0];  // Remove anchor.

	  var parts = uri.split('?');  // Check for query params.

	  if (parts.length == 1) {

	    return;

	  }

	  var query = decodeURI(parts[1]);

	

	  // Find url param.

	  paramName += '=';

	  var params = query.split('&');

	  for (var i = 0, param; param = params; ++i) {

	    if (param.indexOf(paramName) === 0) {

	      return unescape(param.split('=')[1]);

	    }

	  }

	}

</script>

- непосредственный код отслеживания трекинга нажатия кнопки Вконтакта:

<script type="text/javascript">

	$(document).ready(function(){

		$('#vkontakte_share_button').click(function(){

			var targetUrl = extractParamFromUri( $(this).attr('href'), 'url' );

			_gaq.push(['_trackSocial', 'vkontakte', 'share', targetUrl]);

		});

	});

</script>

Все не так сложно, как кажется. Ну а Google +1 автоматом тянет

<script>
(function(){
var twitterWidgets = document.createElement('script');
twitterWidgets.type = 'text/javascript';
twitterWidgets.async = true;
twitterWidgets.src = 'http://platform.twitter.com/widgets.js';</p>
// Setup a callback to track once the script loads.
twitterWidgets.onload = _ga.trackTwitter;
document.getElementsByTagName('head')[0].appendChild(twitterWidgets);
})();
</script>

<a href="http://twitter.com/share" data-url="<?php the_permalink(); ?>" data-count="vertical" data-via="TIgor4eg" data-lang="ru">Tweet</a>