Отслеживание Like (лайков) ВКонтакте, Facebook, Google Plus в Google Analytics

На тему отслеживания "лайков" с помощью Google Analytics довольно таки много постов в интернете, но не смотря на то, что все они хорошие и познавательные, наверняка многие сталкивались с проблемой настройки социально подключаемых модулей, к примеру как правильно вызывать функции, как именно их подключать в коде JavaScript. Хочу рассказать о том как настраивал я, описывая как можно подробнее, так как при первой настройки отслеживания "лайков" я столкнулся с некоторыми подводными камнями, в частности внедрения кода в существующий код JavaScrip. И так - Поехали.

Для начала Вам необходимо создать файлик ga_social_tracking.js (или же назвать его как-то по-своему, я дальше буду на него ссылаться) и разместить в нем код JavaScript (приведенный ниже), который отвечает за передачу данных "лайков" в Google Analytics. Идея и основные моменты взяты с сайта разработчика https://developers.google.com/analytics/devguides/collection/gajs/gaTrackingSocial.

var _ga = _ga || {};
var _gaq = _gaq || [];

_ga.trackSocial = function(opt_pageUrl, opt_trackerName, opt_targetUrl) {
_ga.trackFacebook(opt_pageUrl, opt_trackerName);
_ga.trackTwitter(opt_pageUrl, opt_trackerName);
_ga.trackVkontakte(opt_pageUrl, opt_trackerName, opt_targetUrl);
};
_ga.trackFacebook = function(opt_pageUrl, opt_trackerName) {
var trackerName = _ga.buildTrackerName_(opt_trackerName);
try {
if (FB && FB.Event && FB.Event.subscribe) {
FB.Event.subscribe('edge.create', function(targetUrl) {
_gaq.push([trackerName + '_trackSocial', 'facebook', 'like',
targetUrl, opt_pageUrl]);
});
FB.Event.subscribe('edge.remove', function(targetUrl) {
_gaq.push([trackerName + '_trackSocial', 'facebook', 'unlike',
targetUrl, opt_pageUrl]);
});
FB.Event.subscribe('message.send', function(targetUrl) {
_gaq.push([trackerName + '_trackSocial', 'facebook', 'send',
targetUrl, opt_pageUrl]);
});
}
} catch (e) {}
};
_ga.buildTrackerName_ = function(opt_trackerName) {
return opt_trackerName ? opt_trackerName + '.' : '';
};
_ga.trackTwitter = function(opt_pageUrl, opt_trackerName) {
var trackerName = _ga.buildTrackerName_(opt_trackerName);
try {
if (twttr && twttr.events && twttr.events.bind) {
twttr.events.bind('tweet', function(event) {
if (event) {
var targetUrl; // Default value is undefined.
if (event.target && event.target.nodeName == 'IFRAME') {
targetUrl = _ga.extractParamFromUri_(event.target.src, 'url');
}
_gaq.push([trackerName + '_trackSocial', 'twitter', 'tweet',
targetUrl, opt_pageUrl]);
}
});
}
} catch (e) {}
};
_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.extractParamFromUri_ = function(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]; ++i) {
if (param.indexOf(paramName) === 0) {
return unescape(param.split('=')[1]);
}
}
return;
};

Подключить данный файлик между тэгами <head>

<script src="ga_social_tracking.js"></script>

Настройка отслеживание "Like" FaceBook

Переходим на страничку для разработчиков непосредственно в своем профиле FaceBook и генерируем нужный код.

Рис. 1

После нажатия на кнопку "Get Code" скопировать только код кнопки, как показано на рисунке ниже

Рис. 2

Далее нам нужен идентификатор ID профиля. Его можно взять на это же страничке, только чуть ниже формы генерации кнопки.

Рис. 3

В поле Admin будет необходимый идентификатор профиля (свой ID я закрасил в целях безопасности:)))

Теперь осталось совсем чучуть)). Между тэгами <head><head/> разместить ниже приведенный код, который инициализирует кнопку Like, и функцию отслеживания, которая будет передававать данные в аналитикс _ga.trackFacebook();Ее описание есть в файле ga_social_tracking.js

<div id="fb-root"></div>
<script>

// Facebook async loading.

(function() {

var e = document.createElement('script'); e.async = true;

e.src = document.location.protocol +

'//connect.facebook.net/ru_RU/all.js';

document.getElementById('fb-root').appendChild(e);

}());

window.fbAsyncInit = function() {

FB.init({appId: 'ХХХХХХХХХХ', status: true, cookie: true, xfbml: true});

_ga.trackFacebook();

};

</script>

Где ХХХХХХХХХХ это идентификатор профиля, рис. 3

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

В моем случае это код

<div class="fb-like" data-send="true" data-layout="button_count" data-width="50" data-show-faces="true">

Настройка отслеживание "Like" Vkontakte

Переходим на страничку для разработчиков непосредственно в своем профиле Vkontakte и генерируем нужный код.

Рис.4

Из это все формы нам необходимо запомнить функцию и ее параметры (в частности ID) VkInit, на рис. 4 обведена красным квадратиком:))

Дальше все аналогично как и в случае с Facebook - между тэгами <head><head/> разместить ниже приведенный код, который инициализирует кнопку Like, и функцию отслеживания, которая будет передававать данные в аналитикс _ga.trackVkontakte();Ее описание есть в файле ga_social_tracking.js

<div id="vk_api_transport"></div>

<script type="text/javascript">

window.vkAsyncInit = function() {

VK.init({apiId: XXXXXXX, onlyWidgets: true});

VK.Widgets.Like("vk_like", {type: "mini"});

_ga.trackVkontakte();

};

setTimeout(function() {

var el = document.createElement("script");

el.type = "text/javascript";

el.src = "http://vkontakte.ru/js/api/openapi.js";

el.async = true;

document.getElementById("vk_api_transport").appendChild(el);

}, 0);

</script>

Где ХХХХХХ это идентификатор профиля, рис. 4

Дальше разместить код кнопки на страничках "лайки" которых необходимо отслеживать.

<div id="vk_like"></div>

Настройка отслеживание "+1" Google Plus

В случае с социальной сетью Google Plus все намного проще. Ну а как иначе, Гугл Плюс и Гугл Аналтикс продукты дяди Google, сложности просто не существует))))

Подключить скрипты гугла между тэгами <head>

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

Разместить код кнопки на страничках "плюсы" которых необходимо отслеживать.

<g:plusone></g:plusone>

Страницы

воскресенье