Асинхронный скрипт подключения к Google Analytics социальных кнопок

В корпоративном блоге Serenity я написал статью о том, что в Google Analytics можно отслеживать нажатия на социальные кнопки и о том, почему я считаю это важным. Однако, по-умолчанию этот механизм работает только для кнопок +1. Для того чтобы в отчет попадали нажатия на другие социальные кнопки нам придется воспользоваться Google’вским API: Social Interaction Analytics.

Подход, который предлагается в документации, мне не очень нравится. Я бы хотел, чтобы эти настройки и загрузка социальных кнопок была асинхронная, и не блокировала работу сайта. Поэтому я решил взять мой асинхронный скрипт для подключения социальных сервисов и модернезировать его. Вот что из этого получилось:

var _gaq = _gaq || [];                   // Настройки Google Analytics
_gaq.push(['_setAccount', 'UA-XXXX-1']); // Не забудьте заменить на свой ID
_gaq.push(['_trackPageview']);
_gaq.push(['_trackPageLoadTime']);

(function(window, document) {
  window.___gcfg = {                     // Настройки языка для Google +1 Button
    lang: 'ru'
  };

  var post_url = 'http://simonenko.su',  // Ссылка на отслеживаемую страницу

  track = {
    vkontakte: function() {
      try {
        if (VK && VK.Observer && VK.Observer.subscribe) {
          // Отслеживаем кнопку "нравится"
          VK.Observer.subscribe('widgets.like.liked', function() {
            _gaq.push(['_trackSocial', 'vkontakte', 'like', post_url]);
          });
          VK.Observer.subscribe('widgets.like.unliked', function() {
            _gaq.push(['_trackSocial', 'vkontakte', 'unlike', post_url]);
          });
        }
      } catch(error) { }
    },

    facebook: function() {
      try {
        if (FB && FB.Event && FB.Event.subscribe) {
          // Отслеживаем кнопку "like"
          FB.Event.subscribe('edge.create', function() {
            _gaq.push(['_trackSocial', 'facebook', 'like', post_url]);
          });
          FB.Event.subscribe('edge.remove', function() {
            _gaq.push(['_trackSocial', 'facebook', 'unlike', post_url]);
          });
          // Отслеживаем кнопку "send"
          FB.Event.subscribe('message.send', function() {
            _gaq.push(['_trackSocial', 'facebook', 'send', post_url]);
          });
        }
      } catch(error) {  }
    },

    twitter: function() {
      try {
        if (twttr && twttr.events && twttr.events.bind) {
          // Отслеживаем кнопку "tweet"
          twttr.events.bind('tweet', function() {
            _gaq.push(['_trackSocial', 'twitter', 'tweet', post_url]);
          });
        }
      } catch(error) { }
    }
  },

  apis = [
    'https://apis.google.com/js/plusone.js',                                            // Google +1 Button
    '//vk.com/js/api/openapi.js?75',                                                    // Vkontakte API
    '//platform.twitter.com/widgets.js',                                                // Twitter Widgets
    '//connect.facebook.net/ru_RU/all.js#xfbml=1',                                      // Facebook SDK
    ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js' // Google Analytics
  ],

  socialTrack = [
    '',
    'vkontakte',
    'twitter',
    'facebook',
    ''
  ],

  iterator = apis.length,
  script   = 'script',

  fragment = document.createDocumentFragment(),
  element  = document.createElement(script),

  clone;

  while (iterator--) {
    clone = element.cloneNode(false);
    clone.async = clone.src = apis[iterator];

    func = socialTrack[iterator];
    if (func && func != '') {
      clone.onload = track[func];
    }

    fragment.appendChild(clone);
  }

  clone = document.getElementsByTagName(script)[0];
  clone.parentNode.insertBefore(fragment, clone);
})(this, document);

Вам остается заменить UA-XXXX-1 на свой собственный Google Analytics ID и в post_url заменить ссылку на страницу, которую будете отслеживать.

Лучше всего взять сжатую версию скрипта (1,4k) и поместить перед </head>.

Кстати, из прошлой статьи я понял, что для многих не очевидно как и куда вставлять сами кнопки. Исправляюсь, вот пример кода для каждого социального сервиса, вставлять внутри <body>

<!-- Twitter -->
<a href="http://twitter.com/share" class="twitter-share-button" data-lang="ru" data-url="http://simonenko.su">Tweet</a>

<!-- Facebook Like -->
<div class="fb-like" data-href="http://simonenko.su" data-layout="button_count" data-send="false" data-show-faces="true"></div>

<!-- Google +1 -->
<div class="g-plusone" data-href="http://simonenko.su"></div>

<!-- ВКонтакте "Мне нравится" -->
<script>
window.vkAsyncInit = function() {
  VK.init({apiId: VKONTAKTE_ID, onlyWidgets: true});
  VK.Widgets.Like('vk_like', {pageUrl: 'http://simonenko.su', type: 'mini'});
}
</script>
<div id="vk_like"></div>

Что ещё почитать?