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

Не важно какой сервис вы будете использовать, я выбрал Analytics от Google, т.к. давно с ним работаю. Google Analytics уже давно признан мощным инструментом для анализа действий пользователя на сайте. Удобный интерфейс + открытый API  + бесплатность = незаменимый инструмент для веб-мастера. Проведем небольшой обзор работы с сервисом.

После регистрации профиля сайта нам выдают код для вставки в HTML:

Внутри первого тега <script /> получаем необходимый для работы JavaScript-файл ga.js. Нас интересует второй тег, внутри которого мы получаем объект pageTracker. с ним мы впоследствии и будем работать. При получении трекера нужно указать, так называемый, идентификатор веб ресурса - “UA-xxxxxxx-x”, где x – выданные сервисов при регистрации числа.

Трекер умеет делать очень многое. В частности, отсылать информацию о посещении страницы. Это делается вызовом _trackPageview(), опционально параметром можно указать url для записи. Также можно задать одно пользовательское значение, которое затем передать сервису вызовом _setVar(custom_value).  Полное описание всех функций трекера вы можете найти в документации по API Google Analytics.

Начинаем

Итак, теперь попробуем соединить сильверлайт и гугл :)

Для начала неплохо было бы знать установлен ли сильверлайт у посетителей, и если да, то какой версии.

Определить версию нам поможет простая функция:

function getSilverlightVersion() {
  var version = "Silverlight not installed";
  var container = null;
  try {
    var control = null;
    if (window.ActiveXObject) {
      control = new ActiveXObject("AgControl.AgControl");
    }
    else {
      if (navigator.plugins["Silverlight Plug-In"]) {
        container = document.createElement("div");
        document.body.appendChild(container);
        container.innerHTML =
         '<embed type="application/x-silverlight" src="data:," />';
        control = container.childNodes[0];
      }
    }
    if (control) {
      if (control.isVersionSupported("3.0")) {
        version = "Silverlight 3.0";
      } else if (control.isVersionSupported("2.0")) {
        version = "Silverlight 2.0";
      } else if (control.isVersionSupported("1.0")) {
        version = "Silverlight 1.0";
      }
    }
  }
  catch (e) { }
  if (container) {
    document.body.removeChild(container);
  }
  return version;
}
* This source code was highlighted with Source Code Highlighter.

Суть в следующем. Если в списке плагинов браузера присутсвует сильверлайт, то создаем его экземпляр. Полученный объект имеет метод isVersionSupported(string version), который возвращает true, если сильверлайт версии version доступен браузеру. После определения версии удаляем экземпляр за ненадобностью.

Теперь мы можем передать сервису полученный ответ от функции. Делается это с помощью _setVar:

pageTracker._setVar(getSilverlightVersion());


В итоге, мы сможем просматривать статистику в Google Analytics на вкладке Посетители –> Определено пользователем и отфильтровав результаты по слову Silverlight.

Отлично, но мы пока не касались приложения. Нам доступна всего одна пользовательская переменная, как-то маловато для отслеживания навигации по приложению… Конечно можно создавать длинную строку из сообщений, а затем фильтровать как нужно, но это не выход. К счастью, Трекер предоствляет в распоряжение функцию _trackEvent(category, action, opt_label, opt_value), которая позволяет вести учет любых событий.  Мы можем просто вызывать эту функцию при нажатии кнопки, при перемещении по приложению, в общем, при возникновении любого события в сильверлайт приложении.

Для примера, пусть отправляется сообщение о нажатии кнопки. Вот ее обработчик:

private void Button_Click(object sender, RoutedEventArgs e)
{
  HtmlPage.Window.Invoke("trackEvent",
    new object[] { "Кнопки", "Щелчок", "По любимой кнопке щелкнули!" });
}


Метод HtmlPage.Window.Invoke вызывает JavaScript-функцию с указанным именем и передает ей массив объектов-параметров. Чтобы класс HtmlPage стал доступен необходимо добавить пространство имен System.Windows.Browser; Здесь я не указал 4 параметр, т.к. никакого числового значения от кнопки передавать не нужно. Теперь вы знаете как получать статистику от ваших приложений.

Tracker

Чтобы сократить объем действий, необходимых для связи гугла и сильверлайта, я написал простенькую библиотеку. Это два файла – SilverlightAnalytics.js и Tracker.cs.

Использовать их просто:

1)Добавляете этот код внутрь тега <head /> страницы с вашим приложением:

<script type="text/javascript" src="SilverlightAnalytics.js" />
<script type="text/javascript">
  setAccountKey("UA-xxxxxx-x");
</script>


Не забудьте указать правильный идентификатор ресурса, выданный вам гуглом.

2) В теге <body /> той же страницы добавляете событие onload="trackSilverlightVersion()":

<body onload="trackSilverlightVersion()">


3) В сильверлайт проект добавляете ссылку на SilverlightAnalytics.dll.

Не забудьте, что предыдущий код отслеживания следует удалить.

Интерфейс

После добавления сборки SilverlightAnalytics.dll вам станет доступен объект Tracker. Он содержит всего 4 статических метода:

• TrackPageView(object url)
• TrackEvent(string category, string action, string label, int value)
• TrackEvent(string category, string action, string label)
• TrackEvent(string category, string action)

Первый метод отсылает информацию о посещенной странице с заданным url. И три перегруженных метода TrackEvent позволяют зарегистрировать любое событие.

Пример использования

Сейчас посмотрим на пример на Silverlight 2. Пусть у нас есть несколько страниц, и мы хотим знать куда перемещается пользователь, сколько времени проводит на каждой из страниц. К тому же на одной из страниц будет медиа-плеер, и мы должны узнать как он используется (как часто нажимаются кнопки старта, паузы, остановки), какое видео наиболее популярно. Задача поставлена, посмотрим на реализацию.

Итак, есть проект SilverlightAnalitycsDemo, состоящий из 3 страниц.

Меню состоит из трех кнопок, которым назначен обработчик события NavigateButton_Click. Также у кнопок заданы свойства Tag со значениями “Home”, “Video”, “About”.

private void NavigateButton_Click(object sender, RoutedEventArgs e)
{
  Button btn = (Button)sender;
  VisualStateManager.GoToState(this, btn.Tag.ToString(), false);
  Tracker.TrackPageView(btn.Tag);
}


При нажатии, получаем имя страницы из свойства Tag кнопки, и затем переходим к нужному состоянию при помощи VisualStateManager.GoToState (подробнее читайте в блогах). В последней строке используется метод Tracker.TrackPageView(url), который передаст сервису гугла имя страницы. (например, в теге первой кнопки содержиться строка “Home”, это значит, что сервис получит данные о посещении страницы “/Home”).

В Google Analytics вы сможете наблюдать статистику (не забывайте, что данные появляются не сразу, а в течение 24 часов):

Каждой кнопке плеера назначено обработчик события Click:

private void PlayButton_Click(object sender, RoutedEventArgs e)
{
  player.Play();
  Tracker.TrackEvent("Media - Video", "Play", "Старт ролика про птиц");
}

private void PauseButton_Click(object sender, RoutedEventArgs e)
{
  player.Pause();
  Tracker.TrackEvent("Media - Video", "Pause", "Пауза ролика про птиц");
}

private void StopButton_Click(object sender, RoutedEventArgs e)
{
  player.Stop();
  Tracker.TrackEvent("Media - Video", "Stop", "Остановка ролика про птиц");
}


Первые строчки управляют плеером. Вторые – отправляют данные о событии сервису. Первый параметр – категория события. Это можно понимать как тип объекта, который породил событие. Второй параметр – действие. Т.е. “что” сделал этот объект. Наш плеер умеет Play, Pause, Stop, поэтому так и написано. Далее, третий параметр – метка. С помощью нее можно задать какой именно из всех объектов данного типа породил событие. В данном понятно, что эти события принадлежат ролику про птиц.  Здесь упущен четвертый параметр – значение – числовые данные, т.к. он просто лишний в данном случае. Его можно использовать, например, для сбора числовых данных, вводимых в текстовые поля.

Посмотрим что накопил сервис на вкладке Содержание –> Отслеживание событий:

Кликнув, к примеру, на Pause, получаем более подробную статистику:

Silverlight 3

Использовать библиотеку с третьим сильверлайтом также просто. К примеру, у вас есть приложение, использующее NavigationFramework (подробнее на techdays.ru). Тогда вы можете написать в обработчике события Navigated:

private void MainFrame_Navigated(object sender,
   System.Windows.Navigation.NavigationEventArgs e)
{
  Tracker.TrackPageView(e.Uri)
}


Скачать

Скачать пример и библиотеку вы можете здесь - SilverlightAnalytics.rar

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