CocoonJS — это отличная платформа, которая позволит вам выпустить ваше HTML5 приложение в Google Play или App Store, а так же во многих других магазинах приложений. Для себя я решил, что буду делать свою следующую игру на нем. Используя контейнер CocoonJS, вы получаете великолепную скорость выполнения без необходимости переписывать код. Хотя я практически уверен, что первый билд вашего приложения на CocoonJS будет не последним.

Одной из проблем, в которую я недавно уперся при разработке на CocoonJS, была невозможность использовать Google Analytics. Для своей работы Google Analytics нуждается в использовании протоколов HTTP или HTTPS.
Одним из решений было захостить файл analytics.js где-нибудь у себя, и, может быть, чуть изменить его. Я не буду описывать этот метод, так как мне не понравилась идея хранить этот файл у себя и я пошел другим путем.

Вместо этого я использовал одну из крутых фич CocoonJS: возможность загрузить что-либо в стандартный webview одновременно с Canvas+. Вы можете почитать об этом здесь.

На самом деле идея проста. Нам необходимо захостить простую страницу с трекингом Google Analytics и обращаться к ней через CocoonJS API. Мы будем просить эту страницу слать запросы в Google Analytics. Можно назвать это прокси-страницей для Google Analytics.

Вот примерный код страницы:

<!DOCTYPE html>
<html>
	<head>
		<script src="cocoon.js"></script>
		<script>
			// сделаем, чтобы с этой страницы можно было логировать
			// в наш контейнер CocoonJS
			CocoonJS.App.proxifyConsole();

			// загружаем Google Analytics
			(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','//www.google-analytics.com/analytics.js','ga');

			// когда страница загрузилась нам нужно уведомить Canvas+ о том,
			// что уже можно слать трекинг-информацию
			console.log('GA interface ready, informing parent');
			CocoonJS.App.forward('window.gaInterfaceIsReady()');
		</script>
	</head>
	
	<body>
	</body>
</html>

Как я уже говорил, страница только инициализирует Google Analytics и уведомляет нашу главную страницу — приложение, что можно начинать трекинг.

Как только вы подготовите страницу, вам нужно захостить ее и подключить в приложение. Наше прокси готово, и мы можем начинать дергать его.

Как я полагаю, вы собираетесь выпустить свое приложение и для веба. Поэтому мы сделаем еще одну, подменную функции ga(), которая будет обращаться к нашей прокси-странице. Для обычного веб-приложения будем использовать Google Analytics как обычно.

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

Еще одна тонкость заключается в том, что неправильно ждать сообщения от CocoonJS о загрузке прокси-страницы. Нужно дождаться, пока она сама не уведомит нас о своей готовности. Дело в том, что я неоднократно замечал выполнение обработчиков загрузки до самой загрузки страницы. Если вы посмотрите на код прокси, то увидите эту строчку:

CocoonJS.App.forward('window.gaInterfaceIsReady()');

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

if(!navigator.CocoonJS){
	// стандартный код Google Analytics
	(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','//www.google-analytics.com/analytics.js','ga');
}else{
	var interfaceReady = false;
	var queue = [];

	var flushQueue = function(){
		var cmd;
		while(cmd = queue.shift()){
			forwardCmd(cmd);
		}
	};

	var forwardCmd = function(cmd){
		CocoonJS.App.forwardAsync(cmd);
	};

	var addToQueue = function(cmd){
		queue.push(cmd);
		if(interfaceReady){
			flushQueue();
		}
	};
	
	// вызов этой функции будет являться сигналом о загрузке прокси
	window.gaInterfaceIsReady = function(){
		interfaceReady = true;
		flushQueue();
	};
	
	// загружаем нашу прокси-страницу в стандартный webview
	console.log('Creating GAI interface');
	CocoonJS.App.loadInTheWebView("http://path.to/your/proxy.html");

	// подменный объект GA 
	window.ga = function(){
		var args = '';
		for(var i = 0 ; i < arguments.length ; i++){
			if(i > 0){
				args += ',';
			}
			args += JSON.stringify(arguments[i]);
		}

		var cmd = 'window.ga(' + args + ')';
		addToQueue(cmd);
	};
}

// здесь вызываем ga, как обычно

Вроде бы все. Если вы читали мои пояснения, то код должен быть вам понятен.

Заметьте, что мы не показываем webview с прокси-страницей. Javascript на ней будет работать даже без показа содержимого. Таким образом вы можете общаться с различными сервисами, предназначенными для браузерных приложений, и даже добавить слой DOM в ваше приложение. Но помните, что одновременно может быть запущен только один webview, так что вам будет необходимо собрать все на одной странице.

Надеюсь, эта статья окажется вам полезной!

Данная статья является переводом. Автор оригинальной статьи Remi Vansteelandt.

Использование Google Analytics вместе с CocoonJS