Учим Google Analytics считать лайки из Вконтакте

    Всем привет!

    В этой статье я расскажу, как с помощью Google Analytics отслеживать лайки на вашем сайте и покажу, как это делать с кнопкой “Мне нравится” из Вконтакте.

    7 июля этого года Google добавил в Analytics возможность отслеживать число лайков, анлайков и всяких прочих ретвитов. Весьма логичное действие, учитывая популярность этих кнопок и запуск +1. Данная функция получила название Social Plugin.

    К сожалению, чтобы заставить все это работать, недостаточно просто копипастнуть пару строк из документации в код вашего сайта, нужно ещё и разбираться с API кнопочек каждой из социальных сетей. На этом зачастую вся радость от новости и заканчивалась.

    К чести Google надо отметить, что они сделали целый отдельный сайт с примерами того, как интегрировать Social Plugin с наиболее популярными на Западе сетями — Facebook и Google. Ниже я расскажу, как интегрировать его ещё и с Вконтакте.

    Начнем с описания того, как работает Social Plugin. Для того чтобы подключить эту возможность на своем сайте нужно воспользоваться функцией _trackSocial, вызов которой выглядит следующим образом:
    _gaq.push(['_trackSocial', имя социальной сети, действие, URL (необ-но), page path (необ-но)]);

    Параметр URL не обязателен, если его пропустить, Google Analytics сам подставит вместо него текущий адрес страницы. Этот параметр нужен в том случае, если вы хотите видеть в отчете какой-то другой адрес страницы или вообще другую информацию.

    Например, у вас на сайте есть одна и та же статья доступная под двумя URL (напр. mypics.iss/news/01-12-2028/1 и mypics.iss/articles/grandma_in_space), то при нажатии like, значения будут распределяться по двум разным URL, хотя по факту это одна и та же страница. Чтобы исправить это недоразумение в параметр URL надо писать, например

    _gaq.push(['_trackSocial', 'facebook', 'like', 'http://mypics.iss/articles/grandma_in_space']);

    Кстати говоря, данная строка не обязательно должна быть ссылкой, можно написать и так:

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

    В параметр page path по умолчанию пишется относительный адрес страницы (в нашем случае это /articles/grandma_in_space) и его тоже писать не обязательно.

    Теперь, когда понятно, как это работает, можно переходить к интеграции с социальными сетями. Social Plugin по умолчанию отслеживает только Google+ и то только, если у вас не задано имя счетчика.

    Рассмотрим, как настроить интеграцию на примере Вконтакта. Во-первых, нам надо пойти на страничку Вконтакта для разработчиков и узнать, как вообще взаимодействовать с их кнопкой.

    Видим, что если у вас на странице установлена кнопка “Мне нравится”, то становится доступен объект VK.Observer, в котором можно подписаться на события widgets.like.liked и widgets.like.unliked.

    Принципиальных отличий от фейсбука нет, поэтому пишем по образу и подобию примера от Google:

    _ga.trackVkontakte = function(opt_pageUrl, opt_trackerName, opt_targetUrl) {
        var trackerName = _ga.buildTrackerName_(opt_trackerName);
        try {
            if (VK && VK.Observer && VK.Observer.subscribe) {
                VK.Observer.subscribe('widgets.like.liked', function() {
                    _gaq.push([trackerName + '_trackSocial', 'vkontakte', 'like',
                        opt_targetUrl, opt_pageUrl]);
                });
                VK.Observer.subscribe('widgets.like.unliked', function() {
                    _gaq.push([trackerName + '_trackSocial', 'vkontakte', 'unlike',
                        opt_targetUrl, opt_pageUrl]);
                });
            }
        } catch (e) {}
    };


    Обратите внимание, я использую переменную _ga из гугловского примера, поэтому чтобы этот код работал надо его добавить, например, в конец гугловского файла.

    Собственно, вот и всё. Теперь достаточно поместить этот код где-нибудь в head, а после инициализации кнопки “мне нравится” добавить вызов

    _ga.trackVkontakte();


    В результате в отчетах появятся следующие строчки (доступно только в новом интерфейсе):

    Метки:
    iConText 32,10
    Компания
    Поделиться публикацией
    Похожие публикации
    Комментарии 23
    • 0
      Около двух часов назад с колеегой думали, как бы поудобней их посчитать. А тут статья =)
      Спасибо.
      • 0
        Да, я давно заметил этот «эффект Хабра».
        Срочно нужно что-нибудь, понятия не имеешь что делать, а тут статья!

        Раза 3-4 такое уже было и не только у меня.

        Хотя возможно это объясняется большим числом статей и в меру узкой спецификой.
      • 0
        Спасибо.
        • 0
          Спасибо, полезно. Можно ещё считать эффект от этих нажатий

          вставить код для обработки якорей

          _gaq.push(['_setAllowAnchor', true]);

          ссылки шаринга поменять на
          site.ru/page#utm_source=source
          можно вместо #utm_source=source ставить после # идентификатор, а на стороне сайта вызывать Event к примеру
          • 0
            С недавнего времени Google Analytics должен начинать новую сессию каждый раз, когда меняется какое-либо значение источника трафика, так что я был бы осторожен с изменениями тегов.
            • 0
              Никак не связано ;) я всего лишь предлагаю помечать объявление меткой нестандартным способом
          • +2
            Я просто повесил на кнопку контакта onClick со своей функции, а в функции уже прописал _gaq.push. Пример тут.
            • +1
              Интересный вариант!

              Но в случае с кнопкой «мне нравится» в вашем варианте если пользователь лайкнул, а затем разлайкнул в GA уйдет два лайка, а при использовании VK API все будет верно.

              С кнопкой share, похоже, действительно все печально. Вконтактовская дока ничего по этому поводу не говорит.

              vkontakte.ru/pages?oid=-1&p=Share — вот этот вариант документации вообще потрясающий.
              • 0
                Я и забыл что у них 2 кнопки, я конечно же говорил про кнопку Share.
                С лайками было лень копаться. Спасибо за ваш труд.
                • +1
                  Потому что читать нужно тут vkontakte.ru/developers.php?oid=-1&p=Share :)
                  • 0
                    А там я читал. :) Просто с одного места на сайте можно и на такой вариант доки попасть.

                    К сожалению то ли у них нету события а-ля widgets.like.liked на расшаривание, то ли они о нём не написали. Если пропустил, буду рад оказаться неправым. :)
                    • 0
                      Использую вот такое решение, но оно неидеальное. Отслеживается только клик на кнопке, а не само расшаривание.

                      _ga.trackVkontakte = function( pageUrl, trackerName ) {
                      var trackerName = _ga.buildTrackerName( trackerName );
                      try
                      {
                      if ( VK && VK.Share && VK.Share.click )
                      {
                      var targetUrl;

                      var oldShareClick = VK.Share.click;
                      VK.Share.click = function( index, el ) {
                      _gaq.push( [trackerName + '_trackSocial', 'vkontakte', 'share', targetUrl, pageUrl] );

                      return oldShareClick.call( VK.Share, index, el );
                      };
                      }
                      } catch (e) {}
                      }
              • –2
                Например, у вас на сайте есть одна и та же статья доступная под двумя URL (напр. mypics.iss/news/01-12-2028/1 и mypics.iss/articles/grandma_in_space)

                Стоит избегать такого. Зачем плодить дубликаты…
                • 0
                  Пример неудачный. Может быть статья, с адресами
                  example.com/page/
                  example.com/page/?utm-source=feedburner
                  example.com/page/comment-page-2/

                  адекватные системы в этом случае смотрят canonical, а вот ВК до такого еще не дошел.
                • 0
                  Попробовал сделать, но что-то ничего в статистике нет. Видимо что-то не получилось.
                  Код кнопки такой




                  В шапке вставлен стандартный код гугла + код из вашей статьи
                  • 0
                    Забыл в тег code поставить.
                    Попробовал сделать, но что-то ничего в статистике нет. Видимо что-то не получилось.
                    Код кнопки такой




                    В шапке вставлен стандартный код гугла + код из вашей статьи


                    Фейсбук тоже не отслеживает.
                    • 0
                      Александр, кода все равно не видно.
                      • 0
                        Да, все равно что-то не видно, напишу в личку.
                  • 0
                    Пост нужно взять на заметку каждому разработчику!!!

                    Вот только пара вопросов: За счет лайков можно не хило лавить траф из соц. сетей конкурсами, качественными материалам, но как отследить через данную метрику сколько лайков с конкретной страницы сколько дают переходов?

                    Вот это очень актуально. Есть развлекательный сайт, ребята только лайками материалов собирают 10 000 и более уников. Есть примеры, когда у новостных и информационных порталов хорошо идет траф за счет лайков и комментариев материала (особенно скандальных или взаправду полезных, уникальных данных)

                    Что бы делать контент сайта и выгодно его подавать, нужно четко знать сколько с какого контента идет людей и за счет каких инструментов

                    По этой теме будет пост?
                    • 0
                      А для my.mail.ru можно такое дело замутить?
                      Так то у них тоже есть событие like\unlike — api.mail.ru/docs/reference/js/events.like/
                      Правда я ничего не нашел в доках про асинхронный код…
                      Может кто-нибудь поможет, если это возможно?
                      • 0
                        В исходном коде только два параметра _ga.trackSocial = function(opt_pageUrl, opt_trackerName), а у вас три. Откуда берется третий?
                        • 0
                          Возникли проблемы(
                          В момент, когда должны навешиваться эвенты, VK.Observer оказался неопределён.
                          Подскажете возможную проблему?
                          • 0
                            Эххх… А я когда-то извращался, опрашивая сервер фейсбука функцией isFan, чтобы проверить, лайкнул ли пользователь. Как только она возвращала true, кидал event в гугл-аналитику. Мне тот кусок кода спать не давал, теперь можно успокоиться =)

                            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                            Самое читаемое