Я создаю приложение, и я хочу получить аналитику от пользователей. Я попытался использовать плагин Phonegap, но мне не удавалось его реализовать.
Мне было интересно, можно ли получить Google Analytics, рассматривая приложение как обычную веб-страницу и помещая некоторый javascript в начало моей страницы.
Есть ли лучший способ сделать это? и является ли Google Analytics Phonegap этим намного лучше, чем я пытаюсь сделать?
В Google Analytics теперь есть параметры, описанные здесь, чтобы использовать LocalStorage вместо файлов cookie, а также есть способ заставить его работать в веб-просмотрах (URL file://). Поэтому вместо того, чтобы использовать код, который я предлагал ранее, вы можете просто сделать это:
// THIS IS FOR LOCALSTORAGE
var GA_LOCAL_STORAGE_KEY = 'ga:clientId';
ga('create', 'UA-XXXXX-Y', {
'storage': 'none',
'clientId': localStorage.getItem(GA_LOCAL_STORAGE_KEY)
});
ga(function(tracker) {
localStorage.setItem(GA_LOCAL_STORAGE_KEY, tracker.get('clientId'));
});
// THIS IS FOR FILE URL SUPPORT
ga('set', 'checkProtocolTask', function(){ /* noop */});
// And then as usual...
ga('send', 'pageview');
Решение pokki, предложенное Алексом, работает нормально с некоторыми изменениями, чтобы убрать необходимость в Pokki.
Я создал проект git для этой очищенной версии здесь:
https://github.com/ggendre/GALocalStorage
Отлично работает на Android 4.1 и IOS6, я буду тестировать больше устройств очень скоро. Надеюсь это поможет ! :)
Просмотрите видео, чтобы увидеть его в действии:
http://screencast.com/t/6vkWlZOp
После некоторых исследований я нашел решение. Я наткнулся на эту тему в группе Google Phonegap: https://groups.google.com/forum/#!msg/phonegap/uqYjTmd4w_E/YD1QPmLSxf4J (спасибо TimW и Дэну Левину!) В этом потоке я обнаружил, что можно использовать Google Analytics без плагина. Все, что вам нужно сделать, это загрузить файл ga.js из Google http://www.google-analytics.com/ga.js (просто сохраните страницу в своей папке www)
Затем измените файл ga.js, добавив к нему один символ. Найдите файл ga.js для слова "файл:" и замените его на "_file:".
В потоке, который я связал выше, "TimW" объясняет это:
По сути, Google Analytics не будет работать, если его использовать из file:///url. В iOS/PhoneGap это так. Чтобы решить эту проблему проблемы, вы должны сначала загрузить файл ga.js из Google и включить это как часть вашей локальной сборки. Вы увидите, что этот файл затемненный. Найдите файл для строки "файл:", который должен произойти только один раз. Когда вы его найдете, добавьте подчеркивание к началу (так что это становится "_file:" ). Это предотвращает его соответствие протоколу страницы location (который является "file:" ).
После того, как вы добавили один символ в файл ga.js, просто включите это в верхней части страницы:
<script type="text/javascript" src="ga.js"></script>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-YOUR_ID_HERE']);
_gaq.push(['_setDomainName', 'none']);
_gaq.push(['_trackPageview', 'NAME_OF_PAGE']);
</script>
Я тестировал это на симуляторе, и у меня есть доказательство того, что он работал с использованием представления Real-Time в Google Analytics. Симулятор работал на iOS 5.0. Мой телефон по-прежнему включен в iOS 4.2, и когда я тестировал его на своем устройстве, он не отображался в режиме реального времени.
В потоке кто-то упомянул те же проблемы с Android 4.0 +... Надеюсь, в будущем будет лучшее решение для этого, но на данный момент это самый простой и наименее сложный способ получить базовую аналитику для моего приложения. Он не может выполнять автономное отслеживание, но в любом случае это жутко.
Несмотря на то, что iOS 4 и пользователи Android являются меньшинством на рынке (см. круговую диаграмму):
Мне бы хотелось получить данные из всех ОС.
Это февраль 2017 года, и нет необходимости редактировать analytics.js, ни для библиотеки, ни для плагина, или, по крайней мере, я не нуждаюсь в них. Многие вещи, которые были сказаны в прошлые годы, устарели или просто устарели, так что вот мое современное всестороннее руководство.
1. Файл config.xml
В вашем файле config.xml вы должны разрешить запрос на межсайтовый сайт:
<access origin="https://www.google-analytics.com" />
2. HTML
В метатеге CSP, если вы его захотите, вы также должны разрешить звонки в Google. Это может выглядеть так:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-inline' 'unsafe-eval' https://ssl.gstatic.com https://www.google-analytics.com;">
3. Javascript
Вот прокомментированный код для webapp, который может запускаться как в браузере, так и в комплекте с программой Cordova. Вы можете игнорировать блок else, если вам не нужен браузер.
// the default GA code, nothing to change
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
var fields = {
// note: you can use a single tracking id for both the app and the website,
// don't worry it won't mix the data. More about this in the 3rd section
trackingId: 'UA-XXXXXXXX-Y'
};
// if we are in the app (the protocol will be file://)
if(document.URL.indexOf('http://') !== 0){
// we store and provide the clientId ourselves in localstorage since there are no
// cookies in Cordova
fields.clientId = localStorage.getItem('ga:clientId');
// disable GA cookie storage functions
fields.storage = 'none';
ga('create', fields);
// prevent tasks that would abort tracking
ga('set', {
// don't abort if the protocol is not http(s)
checkProtocolTask: null,
// don't expect cookies to be enabled
checkStorageTask: null
});
// a callback function to get the clientId and store it ourselves
ga(function(tracker){
localStorage.setItem('ga:clientId', tracker.get('clientId'));
});
// send a screenview event
ga('send', {
// these are the three required properties, check GA doc for the optional ones
hitType: 'screenview',
// you can edit these two values as you wish
screenName: '/index.html',
appName: 'YourAppName'
});
}
// if we are in a browser
else {
ga('create', fields);
// send a pageview event
ga('send', {
// this is required, there are optional properties too if you want them
hitType: 'pageview'
});
}
3. Ваша учетная запись GA
App.Если вам не нужно отслеживать трафик вашего веб-приложения с веб-сайта, вы можете перестать читать здесь, иначе читайте дальше. Я предполагаю, что вы используете единую учетную запись для отслеживания как веб-сайта, так и приложения.
screenview. Существует официальный путеводитель здесьWebsite. Примените к нему специальный фильтр "Приложение? = > Нет".App. По умолчанию (без фильтра) он отобразит все данные.Дополнительные примечания
<access> и CSP*.google-analytics.com в CSP не будет работать. Хотя эта политика работает в Chrome (56), она не находится в Кордове (5.6.0)Я использовал приложение Ionic (на основе кордовы) в качестве мобильного сайта, и GA работала на него. Когда я отправил одно и то же приложение на родной ios, он перестал работать.
Проблема 1.
При проверке журналов симулятора обнаружилось, что GA не загружается правильно. Он пытался загрузить file://. Чтобы исправить это, я добавил https: в ur ur под
(window,document,'script','//www.google-analytics.com/analytics.js','ga')
Проблема 2. Google по умолчанию отменяет запрос, если протокол страницы не является http или https. Чтобы исправить этот
ga('set', 'checkProtocolTask', null);
И вы должны быть установлены. Сделав эти изменения, я смог подтвердить события на GA. Надеюсь, он вам тоже поможет.
Не работает для меня. Проблема в том, что код google использует файлы cookie и не работает с файлом://urls.
Я нашел хорошую реализацию, которая использует localStorage вместо файлов cookie: https://developers.pokki.com/docs/tutorials.php
Я реализовал библиотеку segment.io - analytics.js в приложении HTML5/meteor.
У меня нет плагина analytics в телефонной записях (3.1). Работал сразу для iOS.
После внедрения аналитика из приложения Android не отображалась около 4 часов. Затем он начал работать без изменений в настройках телефонных звонков или метеоров.
Надеюсь, это поможет кому-то избежать нескольких часов поиска тайной ошибки.
Примечание. Убедитесь, что настроен правильный источник доступа, например. добавить
этот плагин phonegap поможет интегрировать Google Analytics в приложение phonegap. Прочтите этот блог, чтобы узнать больше о том, как интегрировать аналитику Google в телефонную записях. вы также можете скачать рабочий демо-код из здесь.
Для тех, кто сталкивается с проблемами с Guillaume Gendre отличным решением на Android 4.1 или другой конкретной платформе, это может решить их.
Если в ваших журналах консоли Android отображается "Неизвестная ошибка Chromium: 0", вероятно, вам нужно уточнить разрешения доступа в файле config.xml. Я исправил свою проблему и описал ее здесь.
Быстрое и грязное решение. Использование может использовать скрытый скрытый iframe, например:
<iframe src="http://www.yourwebsite.com/userControls/GoogleAnalytics.html?param=extraParamHere" style="visibility: hidden"></iframe>
И каждый раз, когда вы запрашиваете страницу в приложении PhoneGap, перезагрузите этот iframe для инициализации дорожки.
Вы можете использовать библиотеку GALocalstorage, и она отлично работает на мобильных устройствах
Легко настроить
<script type="text/javascript" src="js/libs/GALocalStorage.js"></script>
<script>
ga_storage._setAccount('UA-37167XXX-1'); //Replace with your own
ga_storage._trackPageview('/index.html');
</script>
и это он, никаких изменений или чего-либо еще.
Вам нужно создать
Website AccountвGoogle analytics, чтобы использовать эту библиотеку
ПРИМЕЧАНИЕ. Идентификатор клиентского трафика Google Analytics, созданный для мобильной платформы, поддерживает только IOS и Android. Если вы хотите отслеживать свою аналитику Google, убедитесь, что создали ее для веб-сайта. Только идентификатор отслеживания для работы на сайте с разрывом телефона во всех приложениях платформы. Затем вы можете просто загрузить GALocalStorage из ниже ссылки, а затем поместить его в папку js в папке www
www
|__
js
|__
GALocalStorage.js
Затем напишите нижеприведенный код под вашим <head> , и его запуск показывает активных пользователей Realtime в ваших информационных панелях.
https://github.com/ggendre/GALocalStorage
<script>
ga_storage._setAccount('UA-XXXXXXXX-X'); //Replace with your own
ga_storage._trackPageview('Home Screen');
</script>
Для меня оказалось, что плагин не нужен! У меня есть приложение Angular 8 в Cordova (такой же вариант использования, как и в Ionic) Я зарегистрировал новый веб-сайт в Google Analytics. Я изменил кодовую форму GA, чтобы она выглядела так:
const gaScript = document.createElement('script');
gaScript.src = "https://www.google-analytics.com/analytics.js";
gaScript.type = "text/javascript";
document.getElementsByTagName('head')[0].appendChild(gaScript);
gaScript.onload = (ev: Event) => {
const GA_LOCAL_STORAGE_KEY = 'ga:clientId';
window['ga']('create', 'XXXX-XXXXX', {
'storage': 'none',
'clientId': localStorage.getItem(GA_LOCAL_STORAGE_KEY)
});
window['ga'](function(tracker) {
localStorage.setItem(GA_LOCAL_STORAGE_KEY, tracker.get('clientId'));
});
// THIS IS FOR FILE URL SUPPORT
window['ga']('set', 'checkProtocolTask', function(){ /* noop */});
console.log('GA OK!')
}
И тогда я могу использовать GA обычным способом: window ['ga'] ('send', 'pageview', screenName); Это связано с тем, что при обслуживании по протоколу file://отсутствует автоматическое отслеживание изменений страницы.
Это решение очень удобно, так как оно СУХОЕ, потому что у меня есть только один способ встроить Google Analytics в мое приложение как для гибридной, так и для размещенной версий.