iConText
Компания
25,42
рейтинг
28 сентября 2011 в 15:47

Разное → Учим 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();


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

Автор: @Saku
iConText
рейтинг 25,42
Компания прекратила активность на сайте

Комментарии (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 в гугл-аналитику. Мне тот кусок кода спать не давал, теперь можно успокоиться =)

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

Самое читаемое Разное