Статьи

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

Автор TJ VanToll

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

Недавно я настроил  Telerik Analytics  в своем  приложении City Search Challenge , поэтому последние несколько дней я провел, глядя на классную статистику, например:

аналитика-панель

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

Шаг 1: Установите плагин

Голова к  аналитике плагина страницы  на  Проверенном Plugin Marketplace  и нажмите соответствующую «Инструкцию» ссылка в зависимости от своего клиента.

аналитика-плагин

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

$ appbuilder plugin add "Telerik Analytics"

Шаг 2. Добавьте скрипт аналитики

После установки плагина Cordova необходимо добавить немного JavaScript для настройки самого мониторинга аналитики. Документы  Telerik Analtyics  предоставляют примеры блоков кода, но я предпочитаю использовать свою собственную версию с несколькими небольшими дополнениями, которые мы обсудим чуть позже . Сначала вот код:

(function() {
// You'll need to insert your own custom values for these variables,
// and you'll get those values in steps 3 and 4.
var projectKey = "%ProjectKey%",
version = "%BundleVersion%";




window.analytics = {
start: function() {
var factory = window.plugins.EqatecAnalytics.Factory,
monitor = window.plugins.EqatecAnalytics.Monitor,
settings = factory.CreateSettings( projectKey, 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;
}
};




document.addEventListener( "deviceready", function() {
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 );
};
}());

Я беру этот файл, сохраняю его  analytics.jsи включаю в index.html файл моего проекта .

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

Единственное различие между предоставленным документацией фрагментом кода и моим – это код внизу, а именно этот фрагмент:

document.addEventListener( "deviceready", function() {
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 );
};

Три  addEventListener() вызова прослушивают  события жизненного цикла Cordova и запускают / останавливают мониторинг аналитики соответствующим образом. Вы можете запускать / останавливать аналитику в другой части вашего приложения, но мне нравится хранить этот код в одном  analytics.js файле.

window.onerror Функция устанавливает  глобальный обработчик ошибок JavaScript . В этом случае обработчик вызывает метод плагина аналитики TrackExceptionMessage() для регистрации исключения, включая ценные следы стека, которые вы можете использовать для отладки позже.

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

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

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

аналитика создать-проект

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

аналитика-Configure-проект

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

аналитика-новая приборная панель

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

аналитика-проект под ключ

Шаг 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, вам нужно обратиться к ссылкам «Инструкции» на  странице плагина , показанной ниже:

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 и людях, стоящих за ней.