Веб-аналитика виртуальных туров, созданных в Pano2VR

 Работа в Pano2VR | Создание VR-панорам и виртуальных туров, Редактор оформления (Skin editor)
 15.11.2021 |  11:50 |  1.2k |  0.0/0 |  02.11.2023
 Время на чтение: ... |  Комментировать |  Напечатать
Содержание статьи
 Пользователи Pano2VR
В своем сообществе ВКонтакте работает чат, созданный специально для пользователей конвертера панорамных изображений Pano2VR. В нем мы решаем проблемы, возникающие в работе с Pano2VR, обмениваемся опытом и просто общаемся.
 Нас уже ...
Возможно, Вас заинтересуют эти материалы
Самое читаемое
Статья об аналитике взаимодействия пользователей с виртуальным туром на примере популярных систем веб-трекинга, как Яндекс.Метрика и Google Analytics.

Веб-аналитика виртуальных туров, созданных в Pano2VR

Изображение

Введение

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

В данной статье речь пойдет не об аналитике сайта, а об аналитике взаимодействия пользователей с виртуальным туром на примере популярных систем веб-трекинга, как Яндекс.Метрика и Google Analytics.

Виртуальный тур может в себе содержать кнопки управления, различные информационные блоки, точки перехода, окна вывода изображений и видеороликов, карты и планы этажей и другие элементы интерфейса. Целью аналитики является определение, с каким функционалом взаимодействуют пользователи и насколько он удобен для них. Например, добираются ли они до карты (плана) или стоит ли сделать кнопку показа карты более заметной и с подсказкой, пользуются ли они кнопками приближения/отдаления или это самый невостребованный функционал.

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

Яндекс.Метрика

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

Создание счетчика

В левом вернем углу расположена кнопка добавления счетчика. После нажатия на неё мы попадаем на страницу настроек.

1. Кнопка добавления счетчика.

Здесь нужно дать осмысленное название счетчику, ввести название домена, согласиться с условиями Пользовательского соглашения и нажать кнопку «Создать счетчик».

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

2. Настройка счетчика.

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

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

На данном этапе создадим несколько целей, которые будут регистрироваться счетчиком. Перейдем в раздел «Цели» и добавим первую цель. Она будет учитывать факт перехода в новый узел (вне зависимости от способа перехода: хотспот, меню или кнопки, например, «Назад» и «Вперед").

3. Раздел управления целями.

В окне создания цели зададим осмысленное название цели. Тип события указываем «JavaScript-событие». Такой тип события регистрируется вызовом метода reachGoal c передачей идентификатора цели, который вы придумываете и вводите в поле ниже.

4. Окно добавления/редактирования цели.

Добавим еще несколько целей. Их названия и предназначения вы увидите на рис. 5.

5. Созданные цели.

На этом настройка счетчика завершена. Теперь перейдем к настройкам проекта и компонента.

Настройка конфигурации оформления

Если вы добавили компонент в оформление, то в настройках экспорта активируется кнопка редактирования конфигурации (рис. 6).

6. Кнопка доступа к редактору конфигурации.

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

7. Окно конфигурации.

Номер счетчика отображается справа от названия счетчика, а также на странице списка счетчиков и в GET-параметре id в адресной строке браузера.

8. Номер счетчика.

Теперь откроем редактор оформления и создадим действия для регистрации каждого факта достижения целей.

Добавление отслеживающих действий

В готовом компоненте в списке действий для примера добавлено одно действие для регистрации факта перехода по туру. Вам остается только добавить действия «Go To URL», передав в параметр «URL» JavaScript-коды для конкретной цели, которые вы найдете ниже.

9. Редактирование сценария.

Регистрация факта перехода. Добавляется в списке действий компонента Яндекс.Метрика с событием «Mouse Click».

javascript:ym(player.getVariableValue('YM_COUNTER_NUMBER'),'reachGoal','CHANGE_NODE');

Регистрация факта перехода. Добавляется в списке действий кнопки управления с событием «Mouse Click».

javascript:ym(player.getVariableValue('YM_COUNTER_NUMBER'),'reachGoal','CONTROL_BTN_PRESS');

Регистрация факта перехода. Добавляется в списке действий активной зоны (хотспота) с событием «Mouse Click».

javascript:ym(player.getVariableValue('YM_COUNTER_NUMBER'),'reachGoal','HOTSPOT_NODE_CLICK');

Регистрация факта перехода. Добавляется в списке действий компонента Яндекс.Метрика с событием «Fullscreen Enter».

javascript:ym(player.getVariableValue('YM_COUNTER_NUMBER'),'reachGoal','FULLSCREEN');

После проделанных действий сохраняем файл оформления и экспортируем проект и запускаем на отладку в браузере.

Для отслеживания событий в консоли разработчика добавьте после index.html символ «?» и после него добавьте параметр «_ym_debug=1». Совершите навигацию по туру, понажимайте на кнопки, хотспоты, войдите в полноэкранный режим. После всех этих действий откройте раздел «Конверсии» (рис. 10) созданного счетчика. Должны появиться графики. Учтите, что данные появляются не сразу, должно пройти как минимум 10 минут.

10. Отчет Яндекс.Метрики по достижениям целей (Конверсии).

Google Analytics

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

Создание аккаунта

Сервис Google Analytic имеет ступенчатую (древовидную) структуру интерфейса. После регистрации на сервисе необходимо создать аккаунт, а уже в нем создать ресурс. На этом этапе нужно запомнить идентификатор отслеживания, который имеет формат «UA-XXXXXXX-X». Получать код отслеживания и устанавливать его на сайт не нужно. Он уже есть в готовом компоненте, который вы можете скачать. Вам нужно только подставить свой идентификатор в настройках конфигурации оформления.

На последнем этапе в своем ресурсе необходимо создать представление и настроить цели.

11. Путь от создания аккаунта до создания представления.

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

В настройках представления откроем раздел «Цели» (рис. 11 / 4). Затем нажмем на большую кнопку «+ЦЕЛЬ», чтобы создать новую цель.

12. Кнопка добавление цели.

На первом этапе выбираем шаблон цели. Опускаемся в самый низ списка предложенных шаблонов и выбираем «Собственная». Нажимаем кнопку «Далее» и попадаем во второй этап настройки.

13. Первый этап настройки цели – установка.

Здесь задаем имя цели и выбираем тип «Событие». Имя цели будет использоваться в дальнейшем в редакторе оформления.

14. Второй этап настройки цели – описание.

И наконец, третий этап. Здесь нужно задать условия цели. Хотя бы одно, например, категорию. В поле «Категория» можно указать любую строку, например, имя тура. Эту строку нужно будет указать в настройках конфигурации.

15. Второй этап настройки цели – подробные сведения.

Аналогичным образом создадим еще несколько целей.

16. Созданные цели.

Когда цели созданы, перейдем к настройкам конфигурации оформления.

Настройка конфигурации оформления

В окне редактирования конфигурации оформления заполняем поля «Идентификатор отслеживания» и «Категория».

17. Окно конфигурации.

Добавление отслеживающих действий

Добавление действий аналогично тому, как мы делали это для Яндекс.Метрики. Отличие только в JavaScript-коде. При желании вы можете указать в передаваемом в функцию gtag() объекте поля event_action и value.

Регистрация факта перехода. Добавляется в списке действий компонента Google Analytics с событием «Mouse Click».

javascript:gtag('event', 'Node Change', {
 'event_category': player.getVariableValue('UA_CATEGORY'),
 'event_label': player.userdata.title
});

Регистрация факта перехода. Добавляется в списке действий кнопки управления с событием «Mouse Click». В параметре «event_label» нужно указать имя конкретной кнопки (вместо «info»).

javascript:gtag('event', 'Control Button Press', {
 'event_category': player.getVariableValue('UA_CATEGORY'),
 'event_label': 'info'
});

Регистрация факта перехода. Добавляется в списке действий активной зоны (хотспота) с событием «Mouse Click». В параметре «event_label» нужно указать имя конкретного хотспота (вместо «info»).

javascript:gtag('event', 'Hotspot Click', {
 'event_category': player.getVariableValue('UA_CATEGORY'),
 'event_label': 'info'
});

Регистрация факта перехода. Добавляется в списке действий компонента Google Analytics. В параметре «event_label» нужно указать «fullscreen_enter» с событием «Fullscreen Enter» и «fullscreen_exit» с событием «Fullscreen Exit».

javascript:gtag('event', 'Fullscreen', {
 'event_category': player.getVariableValue('UA_CATEGORY'),
 'event_label': 'fullscreen_enter'
});

После проделанных действий сохраняем файл оформления и экспортируем проект и запускаем на отладку в браузере. Открываем в новой вкладке Google Analytics с отчетом в реальном времени (Отчеты → Отчет в реальном времени → События). Пробуем совершать какие-либо целевые действия и наблюдаем это отражение в отчете.

Отчет по всем событиям находится по адресу Отчеты → Поведение → События (рис. 18).

18. Отчет Google Analytics по событиям.

Материал подготовлен на основе статьи в блоге Garden Gnome Software.

Теги:  Панорама 360, Виртуальный тур, Яндекс.Метрика, веб-аналитика, Pano2VR, Google Analytics
Об авторе

Сергей Дишук, фотограф-любитель и профессионал. Занимаюсь пейзажной, архитектурной, интерьерной, репортажной фотосъемкой, а также другими видами фотосъемки. Связал жизнь с IT, увлекаюсь программированием и разработкой программного обеспечения.

Занимаюсь панорамной фотосъемкой и созданием виртуальных 3D-туров более 8-ми лет. Имею опыт работы в программах Pano2VR, PTGui, Photomatix, Adobe Photoshop, Lightroom и других.

Реализовал некоторые фичи в проектах Pano2VR задолго до их официального появления. За всё время помог разобраться с Pano2VR более 5k пользователям, из них более 200 лично.

Оцените материал
Поделитесь материалом в социальных сетях
Материалы по теме статьи

У Вас остались вопросы по статье? Задавайте. Буду рад ответить на них в комментариях.

Если этот материал совсем не то, куда Вас привел поисковик, попробуйте выполнить поиск по сайту или введите запрос в строку ниже. Также Вы можете посмотреть другие материалы в разделе статьи.

Нет комментариев
Сейчас просматривают
Связь со мной и соцсети
Telegram
Viber
LinkedIn
ВКонтакте
 
Одноклассники
 
Instagram
 
Опрос
Оцените ваши впечатления от сайта?
Всего проголосовавших: 40
Онлайн всего: 5
Гостей: 5
Пользователей: 0