Найти в Дзене

Unity WebGL. Метрика. Составные цели

Оглавление

И опять по просьбам трудящихся делаю небольшой гайд в этот раз по настройке составных целей в Яндекс Метрике для игр HTML5.

Предполагается, что читатель уже знаком как создать проект на Unity под платформу WebGL. В статье будет использоваться файл Index.html

Нужно скомпилировать проект как минимум 1 раз проект. Тогда в папке с билдом появится нужный нам файл.

Что такое составные цели

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

Выглядит отчет вот так:

-2

Подключаем счётчик

Если вы пишите игру для портала Яндекс Игры, то при создании черновика автоматически генерируется и привязывается к игре счётчик. Однако, почему-то этот счётчик некорректно собирает и/или обрабатывает информацию. Поэтому приходится делать новый.

Итак, идём в Яндекс Метрику и добавляем новый счётчик

-3

Теперь заполняем название счётчика и все остальные поля как показано на скриншоте. Для простоты я указываю для всех игр в качестве адреса сайта - адрес общего субдомена game.yandex.ru

-4

Далее копируем код счётчика

-5

И вставляем его в index.html файл у нашей игры

-6

Сохраняем и всё. Счётчик установлен. Далее будем настраивать цели.

Настройка цели

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

-7

Далее создадим шаг 2. Этот шаг активируется когда игра у нас загрузилась. Т.е. игрок не ушёл и дождался её запуска.

-8

И шаг третий. Он укажет счётчику, допустим, когда игрок успешно закончит уровень.

-9

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

Нажимаем кнопку "Добавить цель" и, мои поздравления первая составная цель готова.

-10

Активируем цель из игры

Сейчас у нас готова цель, состоящая из 3х шагов. Но она пока не работает, потому что счётчику нужно послать сигнал об активации какого-либо шага.

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

-11

Обратите внимание на выделенную строчку. Этим методом мы можем вызвать событие, которое сообщит счётчику, что сработал шаг 1. Код написан на языке JavaScript и выполняется он либо внутри тегов <script type="text/javascript" > .... </script> в файле index.html или из отдельного файла, который нужно подключить к index.html. Здесь мы воспользуемся первым способом.

-12

Копируем строчку и вставляем сюда.

-13

Точку с запятой лучше добавить лишний раз.

Первый шаг теперь всегда будет активироваться после активации счётчика на странице игры.

Второй и третий шаги вам придётся запускать уже из самой игры, но Unity не умеет выполнять код JavaScript. Поэтому придётся из Unity обратиться к браузеру, а браузер уже отработает нужную функцию.

Для полного понимания как Unity может общаться с браузером рекомендую почитать вот здесь.

Здесь я приведу примитивный пример, как это можно сделать. Вы можете в последствии, уже понимая принцип работы написать свой код более универсальный.

Открываем проект в Unity и создаём папку "Plugins", а в ней файл Metrika.jslib. Файл лучше создать из проводника.

-14

Кстати, для редактирования файлов .html, .js, .jslib я использую программу Visual Studio Code. Маленькая и удобная.

Вот содержимое файла Metrika.jslib

-15

Как видно по скриншоту я сделал две функции и внутри каждой просто вставил коды из Метрики.

Теперь у нас есть файл .jslib, к которому можно обратиться непосредственно из Unity. Давайте создадим скрипт, который это будет делать. Далее вы уже сможете разнести функции из этого скрипта в нужные места игры и дёргать цели откуда вам нужно

Как обычно создаём папку и скрипт

-16

Код скрипта:

using UnityEngine;
using System.Runtime.InteropServices;

public class Metrika : MonoBehaviour
{
#if !UNITY_EDITOR && UNITY_WEBGL
[DllImport("__Internal")]
private static extern void Loaded();

[DllImport("__Internal")]
private static extern void LevelComplete();
#endif

private void Start()
{
OnLoaded();
OnLevelComplete();
}

private void OnLoaded()
{
#if !UNITY_EDITOR && UNITY_WEBGL
Loaded();
#else
Debug.Log("Metrika.Laded");
#endif
}
private void OnLevelComplete()
{
#if !UNITY_EDITOR && UNITY_WEBGL
LevelComplete();
#else
Debug.Log("Metrika.LevelComplete");
#endif
}
}

В скрипте я использую директивы такие как "#if !UNITY_EDITOR && UNITY_WEBGL". Внутри них код будет выполняться только при определённых условиях, в данном случае если приложение выполняется НЕ из редактора и платформа приложения - WebGL. Это нужно для того, чтобы редактор не пытался дёргать функции браузера, если код выполняется из него.

Почитать про директивы компилятора можно тут.

Давайте ещё раз откроем Metrika.jslib и добавим временно пару строк:

-17

Теперь можно компилировать и запустить наш проект.

Не забывайте, что файл index.html лучше сохранить отдельно и если Unity его заменит, то восстановить из резервной копии. Также можно настроить свой шаблон, но это уже тема другой статьи.

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

-18

Теперь можете удалить эти две строчки, которые мы добавили, они нужны были только для теста, чтобы удостовериться, что Unity действительно отработала js скрипты.

Далее через некоторое время проверьте счётчик метрики тут:

-19

Вот и всё. Если есть какие-нибудь вопросы или уточнения всё пришите в комментариях.