COCOON.IO и подключение аналитики, рекламы, игровых сервисов

уроки, мануалы, советы по Construct 2

Сообщение COCOON.IO и подключение аналитики, рекламы, игровых сервисов
» 14 авг 2015, 14:38

С появлением нового сервиса Cocoon.IO от Ludei появилась возможность подключать плагины от Cordova.
Я опишу, как подключать MoPub, Google Play Games (лидербоард и ачивки) и Google Analytics.
Отдельное спасибо StWolf89 за то, что подвиг меня на написание, и за уроки http://c2community.ru/forum/viewtopic.php?f=4&t=7044

 Подключение Google Play Games Social API (лидербоард и ачивки)
Скачиваем Cocoon plugins for Construct 2 (https://github.com/CocoonIO/cocoon-plugins-c2). Этот же плагин нам понадобится для подключения рекламы. Обратите внимание, что в плагине есть объекты для шаринга, социальной интеграции и встроенных покупках. Но сейчас пока только о лидерборде :)
На самом GitHub проекта достаточно подробно расписано, как его подключать к Construct 2 и пользоваться объектами и функциями. Если вы не знаете, куда закидывать плагины, то путь следующий: CONSTRUCT_2_INSTALLATION_FOLDER\exporters\html5\plugins. Не забудьте перезагрузить Construct 2.
Далее в самом проекте подсоединяем объект Cocoon Google Play Games:

Изображение

В нужном нам месте подключаем функцию Request Login данного объекта к сервису Google Play Games:

Изображение

Изображение

Я ее подключил в обработчик события нажатия кнопки, но вы можете подключить куда угодно, например, на событие старта лейаута, и тогда у вас к сервисам приложение будет подключаться автоматически.

Изображение

В объекте присутствуют события "удачное подключение" и "неудачное подключение", на которые удобно вешать обработчики, когда необходим реагировать на эти события:

Изображение

Результатом логирования (у меня это нажатие кнопки) будут следующие действия на экране, прилагаю скриншоты результатов после запуска вышеуказанных действий.

ИзображениеИзображениеИзображение

Для работы с лидербоардом и ачивками мы будем использовать функции объекта:

Изображение

Для этого в Консоли Разработчика Гугла необходимо создать игровые сервисы и подключить к ним игру(ы). Подключить можно не только игру в состоянии релиза, но также и в режиме альфы и бете. В игровом сервисе создаются Рейтинг Игрока и Достижения. У каждого подключения к сервису, а также у Рейтингов и Достижений есть свои коды, которые мы будем использовать при подключении плагинов к облачному сервису CocoonIO и в качестве аргументов функций объекта Google Play Games плагина для Construct 2. См. скрин.

Изображение

Когда мы определились с количеством очков, которое игрок набрал в игре и захотели произвести запись в лидербоард, то мы вызываем функцию объекта Submit Score, у которой два аргумента: количество очков и идентификатор Рейтинга Игроков:

Изображение

Если же мы хотим посмотреть результаты из лидербоарда, то вызываем функцию Open Leaderboard, с одним лишь аргументом... правильно, с идентификатором Рейтинга Игроков. :)

Изображение

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

Изображение

Осталось только экспортировать игру под Cordova, запаковать ее в *.zip архив, выгрузить в CocoonIO сервис и подключить нужный плагин. Подключаем плагин Google Play Games Social API и в его параметрах (справа, внизу) указываем идентификатор сервиса (не перепутайте с идентификатором Рейтингов и Достижений):

Изображение

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

 Подключение MoPub
Скачиваем плагин https://github.com/CocoonIO/cocoon-plugins-c2, если вы до сих пор его не скачали. Сбрасываем его в плагины C2.
Подключаем объект Cocoon Ads
Изображение
Настраиваем объект, который в проекте, вставив коды баннеров, взяв из MoPub или AdMob (у меня прописан только межстраничный):

Изображение

Изображение

Изображение

Изображение

Обратите внимание на то, что вы вписываете разные идентификаторы в зависимости от того, каким сервисом хотите пользоваться как конечным - MoPub или AdMod.

Предварительно на первом лейауте подгружаем баннер, который будем показывать (например, у меня на скрине показано, что я подгружаю межстраничный), иначе, если просто будем показывать баннер, то он не будет подгружен и мы увидим пустую страницу MoPub:

Изображение

Я прописал его на событии старта лейаута и проверке канваса, но можно прописать просто на событии лейаута:

Изображение

Далее в нужном месте вызываем показ баннера:

Изображение

Изображение

Компилируем под Cordova, загружаем в CocoonIO наш *.zip файл и подключаем нужный нам плагин. Будьте внимательны: в зависимости от того, какой идентификатор баннера вы проставили (MoPub или AdMob), вы подключаете нужный плагин.

Изображение

Изображение

Когда доходим до нужного места, то видим мопабовское тестовое окно (приложение в альфа тестинге или полноценное окно рекламы AdMob)

Изображение

Изображение

 Google Analytics
Плагин для C2, который мы будем использовать для подключения аналитики является плагином-оберткой для кордовского плагина аналитики, написанного Дэном Уилсоном (Dan Wilson) (https://github.com/danwilson/google-analytics-plugin). Плагин Дэна Уилсона является одним из двух стандартных плагинов аналитики, подключаемых в облачном компиляторе Cocoon.io. Плагин приятный и интуитивно понятный. Для того, чтобы использовать его в C2 я создал враппер для четырех его функций: trackView, trackEvent, trackException, trackTiming. Их вполне достаточно для работы. (Пока :)). Об остальных функциях я напишу в самом конце спойлера. Итак...

Скачиваем сам плагин для C2 из проекта https://github.com/CaptainCrocus/constr ... ics-plugin. Ссылка на скачку: https://github.com/CaptainCrocus/constr ... master.zip

Папку googleanalyticswrapper закидываем по след. пути: CONSTRUCT_2_INSTALLATION_FOLDER\exporters\html5\plugins. Перезагружаем C2, если он был открыт, или просто загружаем его. В открытом проекте добавляем новый объект, выбирая Google Analytics Wrapper.

Изображение

Из окна Projects выбираем наш добавленный объект и в свойствах его, отобразившихся в Properties в свойстве Tracking ID проставляем Идентификатор своего ресурса мобильного приложения (именно мобильного приложения) из Google Analytics.

Изображение

Изображение

Далее, там, где нам нужно вставить функции объекта, привычным способом выбираем объект Google Analytics Wrapper

Изображение

В списке функций выбираем функцию Track View. Я использовал ее в событиях On Start of Layout.

Изображение

Функция настраиваемая и принимает один параметр - название Layout (View), собственно. Конечно, можно было бы подставить вместо параметра выражение, вычисляющее текущий лейаут, но я не стал этого делать, и оставил это на "ввод ручками".

Изображение

Вот как функция выглядит в списке присоединенных к событию акшнов.

Изображение

Далее проделаем те же операции для отслеживания событий. Присоединяем функцию Track Event

Изображение

Функция принимает четыре параметра:
    1. категория события
    2. действие, вызвавшее событие
    3. ярлык
    4. и номер события (дань старой школе :biggrin: )

Изображение

Далее используем функцию Track Timing для тайминга. Алгоритмы расчета времени для тех или иных действий, разумеется, вы реализовываете сами, функция лишь отсылает время данных действий, которое вы ввели как параметр, т.е., вы будете вставлять туда результат выражения расчета времени или переменную. По сути, это то же событие, но с другими параметрами в данной реализации.

Изображение

Функция также принимает четыре параметра (заполненные значениями по умолчанию)
    1. категория
    2. время в миллисекундах (по умолчанюи 1000, т.е., одна секунда)
    3. ярлык
    4. переменная

Изображение

Ну и как она выглядит в списке акшнов:

Изображение

Последняя функция Track Exception отслеживание Исключений. Как вы будете реализовывать в C2 механизм обработки исключений try...catch...finally, я не знаю, официального мануала я нашел, может, плохо искал. В любом случае, возможно, есть реализация на уровне плагинов, поэтому функцию для комплекта и аналитики я тоже обернул.

Изображение

Функция принимает два параметра:
    1. описание
    2. статус (булева переменная, указывающая на фатальность ошибки, или нет.)

Изображение

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

Функция в коде:

Изображение

Напоследок подключаем перед компиляцией в Cocoon.io указанный плагин Дэна Вилсона.

Изображение

И наконец, чтобы было ясно, ради чего городился огород, и в качестве подтверждения, что все это работает, прилагаем скрины из Google Analytics

Изображение

Изображение

Изображение

Изображение

Изображение

На данный момент это версия плагина v0.0.2. Не реализованы еще функции-обертки для следующих функций:
    · addTransaction
    · addTransactionItem
    · addCustomDimension
    · setUserId (вот это я постараюсь реализовать в первую очередь)
    · debugMode (пока тупо не знаю, для чего она)

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

Если я что-то забыл, то допишу позже.


Я приветствую конструктивную критику, дельные предложения, мудрые советы и исправления ошибок. ;)
Последний раз редактировалось CapCrocus 26 авг 2015, 21:24, всего редактировалось 4 раз(а).
Аватара пользователя

Участник
Сообщений: 77
Я тут с 05 дек 2014
Репутация 17 [ ? ]

Сообщение COCOON.IO и подключение рекламы, игровых сервисов, аналитики
» 14 авг 2015, 15:09

Молодец! Все хорошо и наглядно. Для полноты урока было бы здорово добавить пару скринов с описанием по ачивкам. Жду аналитику :good:
(Здесь рыбы нет!)
Аватара пользователя

Игродел
Сообщений: 838
Я тут с 21 фев 2015
Откуда: Владимир
Репутация 189 [ ? ]

Сообщение COCOON.IO и подключение рекламы, игровых сервисов, аналитики
» 14 авг 2015, 15:10

StWolf89 писал(а):Молодец! Все хорошо и наглядно. Для полноты урока было бы здорово добавить пару скринов с описанием по ачивкам. Жду аналитику :good:


Спасибо. Обязательно расширю ачивками попозже... после аналитики :)
Аватара пользователя

Участник
Сообщений: 77
Я тут с 05 дек 2014
Репутация 17 [ ? ]

Сообщение COCOON.IO и подключение рекламы, игровых сервисов, аналитики
» 15 авг 2015, 17:17

как открыть достижение? в phonegap было действие unlock и дальше писался номер ачивки, а тут как?
______________________________________
Мои игры: Think Faster
Аватара пользователя

Участник
Сообщений: 317
Я тут с 14 июн 2015
Откуда: Беларусь, Гомель
Репутация 6 [ ? ]

Сообщение COCOON.IO и подключение рекламы, игровых сервисов, аналитики
» 15 авг 2015, 17:42

mrmegawatts, submit achivment.
(Здесь рыбы нет!)
Аватара пользователя

Игродел
Сообщений: 838
Я тут с 21 фев 2015
Откуда: Владимир
Репутация 189 [ ? ]

Сообщение COCOON.IO и подключение рекламы, игровых сервисов, аналитики
» 16 авг 2015, 00:10

StWolf89, у меня просят выбрать какой-то тип картинки, может что с плагинами не так? Просто при запуске с2 ошибка вылазит из-за плагинов cocoon.io, не знаю в чем проблема, дважды переустанавливал, на чистый с2 ставил плагины - все равно ошибка
______________________________________
Мои игры: Think Faster
Аватара пользователя

Участник
Сообщений: 317
Я тут с 14 июн 2015
Откуда: Беларусь, Гомель
Репутация 6 [ ? ]

Сообщение COCOON.IO и подключение рекламы, игровых сервисов, аналитики
» 16 авг 2015, 00:24

mrmegawatts, c2 то может и чистый, но в нем изначально есть плагин от cocoonjs. Его нужно удалить. Про картинку не знаю, не углублялся пока в этот плагин, но команда точно эта.
(Здесь рыбы нет!)
Аватара пользователя

Игродел
Сообщений: 838
Я тут с 21 фев 2015
Откуда: Владимир
Репутация 189 [ ? ]

Сообщение COCOON.IO и подключение рекламы, игровых сервисов, аналитики
» 16 авг 2015, 00:58

StWolf89, да вроде как удален он
p.s. все проверил, ошибка где-то именно в плагине coocond google play, все остальные работают норм
______________________________________
Мои игры: Think Faster
Аватара пользователя

Участник
Сообщений: 317
Я тут с 14 июн 2015
Откуда: Беларусь, Гомель
Репутация 6 [ ? ]

Сообщение COCOON.IO и подключение аналитики, рекламы, игровых сервисов
» 18 авг 2015, 14:24

CapCrocus, спасибо за аналитику! разобраться бы еще с ней :biggrin:
(Здесь рыбы нет!)
Аватара пользователя

Игродел
Сообщений: 838
Я тут с 21 фев 2015
Откуда: Владимир
Репутация 189 [ ? ]

Сообщение COCOON.IO и подключение аналитики, рекламы, игровых сервисов
» 18 авг 2015, 14:29

StWolf89 писал(а):CapCrocus, спасибо за аналитику! разобраться бы еще с ней :biggrin:


Там все не просто, а очень просто. Поверь ))))
Аватара пользователя

Участник
Сообщений: 77
Я тут с 05 дек 2014
Репутация 17 [ ? ]



Вернуться в Уроки по Construct 2

Сейчас эту тему просматривают

Зарегистрированные пользователи: нет зарегистрированных пользователей

Наверх