Социальные взаимодействия – веб-отслеживание (ga.js)

В этом документе описывается, как использовать Google Analytics для получения показателей взаимодействия в сетях, не принадлежащих Google, таких как Facebook и Twitter. Используйте этот документ для настройки аналитики для кнопок социальных сетей, если вы являетесь владельцем сайта, разработчиком подключаемого модуля для управления контентом или оператором социальной сети, желающим предоставлять автоматические отчеты о социальных взаимодействиях для пользователей ваших кнопок обмена.

Введение

По умолчанию Google Analytics предоставляет интегрированные отчеты для кнопки +1 . Это означает, что если вы внедрили ga.js и кнопку +1 на одной странице, обо всех социальных взаимодействиях +1 будет автоматически сообщаться. Дополнительную информацию о +1 Analytics, включая советы по устранению неполадок, см. в разделе «Социальная аналитика» Справочного центра.

Чтобы получать аналитику социального взаимодействия и отчеты для других сетей, таких как Facebook или Twitter, вам необходимо интегрировать Google Analytics с каждой сетевой кнопкой. С помощью Social Plug-in Analytics записанные взаимодействия варьируются от лайков в Facebook до твитов в Twitter. Хотя отслеживание событий может отслеживать и общие взаимодействия с контентом, Social Analytics обеспечивает последовательную основу для регистрации социальных взаимодействий. Это, в свою очередь, предоставляет пользователям отчетов Google Analytics согласованный набор отчетов для сравнения взаимодействий в социальных сетях в нескольких сетях.

Чтобы увидеть рабочий пример интеграции Analytics с кнопками Facebook и Twitter, ознакомьтесь с примером кода Social Analytics.

Настройка социальной аналитики

Чтобы настроить отслеживание социальных взаимодействий, вам потребуется использовать метод _trackSocial , который отправляет данные о социальных взаимодействиях в Google Analytics. Метод следует вызывать после того, как пользователь завершил социальное взаимодействие. Каждая социальная сеть использует свой механизм для определения момента социального взаимодействия, и для этого обычно требуется интеграция с API для этой сетевой кнопки.

Поскольку конкретные детали интеграции Social Analytics различаются в зависимости от социальной сети, остальная часть этого руководства содержит общие рекомендации по настройке Social Plug-in Analytics для каждой из этих сетей. Мы рекомендуем вам проверить документацию разработчика для каждой сети, чтобы выяснить реализацию конкретной сети.

Вот описание метода _trackSocial :

_gaq.push(['_trackSocial', network, socialAction, opt_target, opt_pagePath]);

где параметры представляют:

  • network

    Необходимый. Строка, представляющая отслеживаемую социальную сеть (например, Facebook, Twitter, LinkedIn).

  • socialAction

    Необходимый. Строка, представляющая отслеживаемое социальное действие (например, «Нравится», «Поделиться», «Твитнуть»).

  • opt_target

    Необязательный. Строка, представляющая URL-адрес (или ресурс), который получает действие. Например, если пользователь нажимает кнопку «Нравится» на странице сайта, в качестве opt_target может быть установлен заголовок страницы или идентификатор, используемый для идентификации страницы в системе управления контентом. Во многих случаях страница, которая вам нравится, — это та же страница, на которой вы находитесь. Поэтому, если этот параметр undefined или опущен, код отслеживания по умолчанию использует document.location.href .

  • opt_pagePath

    Необязательный. Строка, представляющая страницу по пути (включая параметры), на которой произошло действие. Например, если вы нажмете кнопку «Мне нравится» на https://developers.google.com/analytics/devguides/ , то для opt_pagePath должно быть установлено значение /analytics/devguides . Почти всегда путь страницы является источником социального действия. Поэтому, если этот параметр undefined или опущен, код отслеживания по умолчанию использует location.pathname плюс location.search . Обычно вам нужно установить это значение только в том случае, если вы отслеживаете виртуальные просмотры страниц, изменяя необязательный параметр пути к странице с помощью метода Google Analytics _trackPageview .

Действия Facebook

Согласно Facebook JavaScript SDK , самый простой способ настроить кнопку «Нравится» на вашей странице — использовать следующий код:

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like></fb:like>

Нравится

Чтобы записывать лайки с помощью Google Analytics, подпишитесь на событие Facebook edge.create и создайте функцию обратного вызова для выполнения кода отслеживания Google Analytics.

FB.Event.subscribe('edge.create', function(targetUrl) {
  _gaq.push(['_trackSocial', 'facebook', 'like', targetUrl]);
});

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

Отличия

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

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]);
});

Твиттер Твиты

Согласно документации по кнопкам твитов и событиям Javascript веб-намерений , чтобы реализовать кнопку твиттера на вашей странице и обнаружить взаимодействия с пользователем, следует использовать следующий код:

<a href="http://developers.google.com/analytics" class="twitter-share-button" data-lang="en">Tweet</a>
<script type="text/javascript" charset="utf-8">
  window.twttr = (function (d,s,id) {
    var t, js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
    js.src="//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
    return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
  }(document, "script", "twitter-wjs"));
</script>

Чтобы отслеживать события кнопки твита с помощью Google Analytics, вам необходимо использовать события Javascript веб-намерений Twitter и привязать функцию обратного вызова к Intent Event . Важно обернуть привязки событий в функцию обратного вызова, чтобы гарантировать, что все загрузилось до привязки событий.

function trackTwitter(intent_event) {
  if (intent_event) {
    var opt_pagePath;
    if (intent_event.target && intent_event.target.nodeName == 'IFRAME') {
          opt_target = extractParamFromUri(intent_event.target.src, 'url');
    }
    _gaq.push(['_trackSocial', 'twitter', 'tweet', opt_pagePath]);
  }
}

//Wrap event bindings - Wait for async js to load
twttr.ready(function (twttr) {
  //event bindings
  twttr.events.bind('tweet', trackTwitter);
});

Когда пользователь пишет твит , функция обратного вызова получает объект, который обычно можно использовать для получения URL-адреса ресурса, о котором пишется твит. После загрузки кода JavaScript Twitter он преобразует аннотированную ссылку твита в iframe, а URL-адрес, отправляемый в Твиттере, кодируется и добавляется в качестве параметра запроса к URL-адресу iframe. Объект события, передаваемый нашему обратному вызову, имеет ссылку на этот iframe, и мы можем использовать его, чтобы получить URL-адрес ресурса, о котором пишется в Твиттере.

Приведенная выше функция обратного вызова проверяет, действительно ли ссылка iframe является iframe, а затем пытается извлечь ресурс, о котором пишется в Твиттере, просматривая параметр запроса url .

Вот пример функции для извлечения параметра запроса из URI:

function extractParamFromUri(uri, paramName) {
  if (!uri) {
    return;
  }
  var regex = new RegExp('[\\?&#]' + paramName + '=([^&#]*)');
  var params = regex.exec(uri);
  if (params != null) {
    return unescape(params[1]);
  }
  return;
}

Параметр возвращается, если он находится в строке запроса. Если параметр не найден, функция возвращает undefined , который передается методу _trackSocial , что приводит к поведению метода по умолчанию.

Лучшие практики интеграции

Многие сайты добавляют социальные кнопки с помощью плагинов управления контентом. Если вы являетесь автором таких плагинов, мы настоятельно рекомендуем вам интегрировать Social Plug-in Analytics для автоматической записи этих взаимодействий. Аналогичным образом, если вы являетесь разработчиком социальной сети, вы также можете значительно упростить пользователям отслеживание ваших взаимодействий в социальных сетях с помощью Google Analytics путем интеграции с Social Analytics.

Чтобы помочь вам, в этом разделе описаны лучшие практики интеграции аналитики социальных плагинов, чтобы ваш продукт или CMS автоматически отслеживали социальные взаимодействия. Если вы хотите увидеть рабочий пример всех этих лучших практик , ознакомьтесь с примером кода Social Plug-in Analytics.

Создание экземпляра и использование очереди _gaq

Последняя версия кода отслеживания Google Analytics поддерживает как синхронную, так и асинхронную загрузку. Чтобы позволить разработчикам вызывать методы, которые еще не загружены, Google Analytics предоставляет очередь команд _gaq , в которую можно поместить методы отслеживания _gaq.push(); .

После загрузки кода отслеживания все команды в очереди выполняются. При интеграции кода отслеживания JavaScript Google Analytics с вашим плагином или продуктом вы всегда должны гарантировать, что эта очередь команд создана и что ваша интеграция помещает команду _trackSocial в этот массив.

var _gaq = _gaq || [];

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

Конфигурации пользователя

Если вы разрабатываете плагин, интегрирующий аналитику социальных плагинов, вам следует рассмотреть возможность предоставления следующих опций, которые позволят пользователям устанавливать, когда они используют ваш плагин:

Установка необязательного параметра пути к странице . Последний параметр метода _trackSocial предназначен для переопределения текущего URL-адреса, с которого произошло социальное взаимодействие. Конечная цель — обеспечить получение одних и тех же URL-адресов при отслеживании страниц и аналитике социальных плагинов. Поскольку некоторые пользователи могут переопределить URL-адрес страницы по умолчанию, отслеживаемый с помощью отслеживания просмотров страниц, им также необходим способ переопределить URL-адрес в Social Plug-in Analytics, чтобы обеспечить согласованность отчетов.

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

// Create a function for a user to call to pass in the options.
function trackFacebook(opt_pagePath) {
  try {
    if (FB && FB.Event && FB.Event.subscribe) {
      FB.Event.subscribe('edge.create', function(targetUrl) {
        _gaq.push(['_trackSocial', 'facebook', 'like',
            opt_target, opt_pagePath]);
      });
    }
  } catch(e) {}
}

В приведенном выше примере, если функция trackFacebook вызывается с установленным параметром opt_pagePath , значение пути к странице по умолчанию будет перезаписано путем предоставления пути из параметра. В противном случае для этого параметра будет установлено значение undefined . а код отслеживания Google Analytics будет использовать значение по умолчанию для неопределенного параметра.

Примечание . В этом примере также было добавлено несколько проверок, чтобы гарантировать отсутствие ошибок сценария, если API Facebook не загружен. Как ответственный разработчик, вы должны правильно обрабатывать ошибки.

Несколько трекеров

Некоторые пользователи Google Analytics называют свой объект отслеживания, чтобы различать несколько трекеров на одной странице. Хотя мы не поощряем использование нескольких трекеров на одной странице веб-сайта, вы можете рассмотреть возможность использования нескольких трекеров.

Ниже приведен пример перебора и вызова метода _trackSocial для каждого объекта трекера. Он использует метод _getTrackers , который возвращает массив всех объектов трекера на странице.

В этом примере, когда запускается событие Facebook, метод _trackSocial для каждого объекта трекера помещается в очередь команд Google Analytics _gaq .

getSocialActionTrackers = function(network, socialAction, opt_target, opt_pagePath) {
  return function() {
    var trackers = _gat._getTrackers();
    for (var i = 0, tracker; tracker = trackers[i]; i++) {
      tracker._trackSocial(network, socialAction, opt_target, opt_pagePath);
    }
  };
}

function trackFacebook(opt_pagePath) {
  try {
    if (FB && FB.Event && FB.Event.subscribe) {
      FB.Event.subscribe('edge.create', function(targetUrl) {
        _gaq.push(_ga.getSocialActionTrackers_('facebook', 'like',
            opt_target, opt_pagePath));
      });
    }
  } catch(e) {}
}