Добавление Telerik Analytics в приложения Cordova

Чтобы увидеть, куда заносятся эти ошибки, и выяснить, как заменить эту  "%ProductKey%" строку в скрипте аналитики, вам нужно создать проект аналитики в Telerik Platform.

Шаг 3: Создать аналитический проект

Войдите в свою учетную запись Telerik Platform по адресу https://platform.telerik.com  и перейдите в рабочую область, в которой находится ваше приложение. Затем нажмите большую зеленую кнопку «Создать проект Google  Analytics».

На следующем экране выберите «AppBuilder» в качестве типа проекта, присвойте имя вашему проекту и нажмите «Создать проект»:

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

Возьмите ключ проекта и скопируйте его в буфер обмена, так как он понадобится вам для следующего шага.

Шаг 4: Заполните переменные analytics.js

Теперь, когда у вас есть проект, вернитесь к своему  analytics.jsфайлу и найдите два значения, которые в настоящее время содержат значения заполнителей:

var projectKey = "%ProjectKey%",
version = "%BundleVersion%";

Это  "%ProjectKey%" ключ, который вы только что скопировали из своего проекта на платформе, поэтому вставьте его прямо сейчас.

Это  %BundleVersion% версия вашего приложения (1.0.0, 1.1.0, 2.0.0 и т. Д.). Чтобы заменить это значение, у вас есть два варианта: вы можете жестко закодировать версию (то есть  version = "1.0.0";), или вы можете динамически получить номер версии, используя  плагин AppVersion .

Я рекомендую плагин AppVersion, поскольку никогда не забываю обновлять жестко закодированные значения, а также потому, что плагин AppVersion также является проверенным плагином со сверхпростым API. Чтобы установить плагин AppVersion, вам нужно обратиться к ссылкам «Инструкции» на  странице плагина , показанной ниже:

В моем случае я использую CLI AppBuilder, поэтому я запускаю следующую команду для установки плагина:

$ appbuilder plugin add "AppVersion"

С установленным плагином вы запускаете  cordova.getAppVersion() асинхронный поиск версии приложения. Например, следующий код оповещает о версии в  диалоговом окне Cordova :

cordova.getAppVersion(function( version ) {
navigator.notification.alert( "I'm version " + version );
});

Чтобы собрать все воедино, вот версия, analytics.js которую вы можете добавить в свои приложения:

(function() {
var version,
projectKey = "abcedfghijklmnopqrstuvwxyz1234"; // Replace with your own key




window.analytics = {
start: function() {
var factory = window.plugins.EqatecAnalytics.Factory,
monitor = window.plugins.EqatecAnalytics.Monitor,
settings = factory.CreateSettings( productId, version );




settings.LoggingInterface = factory.CreateTraceLogger();
factory.CreateMonitorWithSettings( settings,
function() {
console.log( "Monitor created" );
monitor.Start(function() {
console.log( "Monitor started" );
});
},
function( msg ) {
console.log( "Error creating monitor: " + msg );
});
},
stop: function() {
var monitor = window.plugins.EqatecAnalytics.Monitor;
monitor.Stop();
},
monitor: function() {
return window.plugins.EqatecAnalytics.Monitor;
}
};




// Guard against the AppBuilder simulator
// See tip #9 from http://developer.telerik.com/featured/20-kendo-ui-mobile-telerik-appbuilder-tips-tricks/
if ( navigator.simulator ) {
return;
}




document.addEventListener( "deviceready", function() {
cordova.getAppVersion(function( appVersion ) {
version = appVersion;
window.analytics.start();
document.addEventListener( "pause", function() {
window.analytics.stop();
});
document.addEventListener( "resume", function() {
window.analytics.start();
});
});
});
window.onerror = function( message, url, lineNumber, columnNumber, error ) {
window.analytics.monitor().TrackExceptionMessage( error, message );
};
}());

Это оно! Запустив этот код, вы готовы войти в свой проект Telerik Analytics и увидеть всплывающие данные. Перед тем как сделать это, обязательно обратите внимание на это предупреждение из  документации плагина Analytics :

После того, как вы добавили необходимый код и развернули свое приложение на устройстве, первое, что вы захотите проверить, — это хорошие графики в вашем проекте Telerik Analytics. Убедитесь, что вы переключаетесь в  режим реального времени,  чтобы увидеть данные как можно быстрее. От того, насколько быстро данные всплывают на бэкэнде, зависит от платформы и вашего интернет-соединения, поэтому подождите несколько минут, прежде чем обвинять ваш клиентский код.

Лично я обнаружил, что для отображения моих данных в режиме реального времени обычно требуется ~ 3-4 минуты, но ваш опыт может отличаться.

(Необязательно) Шаг 5. Отслеживание функций

Теперь, когда у вас установлена ​​аналитика, вы можете начать использовать  ее API , включая отслеживание функций. Telerik Analytics позволяет быстро отслеживать действия пользователей в вашем приложении. Хотите знать, нажимают ли пользователи на ту кнопку, от которой вы хотите избавиться? Отслеживать это.

Например, предположим, что в вашем приложении есть следующая кнопка:

<button id="remove-image">Remove Image</button>

Предполагая, что вы используете  analytics.js скрипт, описанный выше, вы можете отслеживать нажатия этой кнопки с помощью следующего кода:

document.querySelector( "#remove-image" ).addEventListener( "click", function() {
window.analytics.monitor().TrackFeature( "image.remove" );
});

В документации по  TrackFeature() методу рекомендуется использовать разделенные точками имена объектов, поскольку это упрощает агрегирование объектов. Чтобы понять, почему, вот как эта функция появляется в проекте Analytics после одного использования:

Обратите внимание, как часть «image» строки создала график, и его подфункции (в настоящее время просто «удалить») выглядят как переключаемые элементы в графике. Такая настройка отлично подходит для организации многочисленных функций, а также для A / B-тестирования.

Для дополнительной удивительности, попробуйте использовать TrackFeatureStart() и TrackFeatureStop() методы времени  , как долго  пользователи используют определенные функции.

(Необязательно) Шаг 6. Изучите свой аналитический проект

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

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

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

На странице версий указывается, какие версии вашего приложения фактически используются пользователями, и автоматически разделяет данные на сегменты iOS, Android и Windows Phone.

Страница среды углубляется и дает вам информацию об операционных системах ваших пользователей, в том числе о том, какую версию iOS / Android / Windows Phone они используют, а также о языках, которые используют их устройства:

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

Страница исключений объединяет все ошибки, которые произошли в вашем приложении, включая подробные трассировки стека. Помните  window.onerrorобработчик, который мы установили ранее? Вот где эти данные заканчиваются.

Завершение

Есть еще кое-что, но я не хочу забирать все сюрпризы, потому что это весело, когда ты слоняешься и открываешь для себя вещи. Если вам нравится то, что вы видите, или вы просто хотите попробовать Telerik Analytics, вам нужно зарегистрировать учетную  запись Telerik Platform , которая включает 30-дневную бесплатную пробную версию. Хотите узнать больше? Возможно, вы захотите посетить  TelerikNEXT в  мае этого года в Бостоне, где вы сможете узнать больше о Telerik Platform и людях, стоящих за ней.