Интеграция виджетов с Google Аналитикой

Для интеграции вам потребуется Google-аккаунт, личный кабинет в Google Analytics, личный кабинет в Google Tag Manager, доступ к разделу "Виджеты" в Mobifitness и доступ к редактированию вашего сайта.

Создание и настройка личного кабинета в Google Analytics.

Создайте аккаунт Google. После этого перейдите на сайт и войдите с помощью вашего Google-аккаунта. Нажмите кнопку "Настроить".


После этого нажмите на кнопку "Создать аккаунт".

Придумайте любое название аккаунта и поставьте галочку напротив пункта «Продукты и сервисы Google» — это позволит получать улучшенные отчеты. Потом нажмите "Далее".


Затем Google попросит создать ресурс и дать информацию о нем.

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


В информации о компании — сферу деятельности, число сотрудников и цели, для которых вы будете использовать Google Analytics 4. Эти параметры не участвуют в отчетности, они нужны Google для сбора собственной внутренней статистики.



На следующем этапе нужно выбрать тип источника, по которому планируете собирать аналитику. В данном случае это сайт, поэтому выберите раздел "Веб".


Далее вы увидите новую страницу по настройке веб-потока. Здесь нужно указать URL вашего сайта и название потока. Название вы можете указать любое. После нажмите "Создать и продолжить".

После этого нажмите "Далее".

Система выдаст вам идентификатор, его нужно будет встроить на ваш сайт с помощью Google Tag Manager.


Создание и настройка личного кабинета в Google Tag Manager

Для создания аккаунта в Google Tag Manager перейдите по ссылке и нажмите "Создать аккаунт".

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


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

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


Вставка кода Google Tag Manager на сайт

После согласия с правилами GTM вы увидите 2 кода — сначала понадобится фрагмент для раздела на вашем сайте там, где установлен ваш виджет (например, виджет расписания). Вставьте его в раздел <head>.

После этого нужно скопировать вторую часть кода и вставить ее на ваш сайт после тега <body> там, где установлен ваш виджет (например, виджет расписания).

После вставки кода опубликуйте ваш сайт и проверьте, что зрительно на нем ничего не изменилось. Если все в порядке, на сайте Google Tag Manager нажмите "Ок".


Создание и настройка тега Google

Тег Google нужен для того, чтобы дальнейшая интеграция с Mobifitness работала корректно.

В кабинете Google Tag Manager нажмите "новый тег".

Далее выберите "Конфигурация тега".

Во всплывающем окне нажмите "Google Аналитика".

Далее "Тег Google".

Откройте страницу Google Аналитики на отдельной вкладке, и в меню слева перейдите в раздел "Администратор".

Потом выберите "Потоки данных".

И нажмите на созданый вами поток данных.

В открывшемся окне спуститесь ниже и в разделе "Тег Google" Нажмите "Настройка тега".

Это идентификаторы вашего тега. Если он у вас в списке не один, скопируйте тот идентификатор, который стоит первым.

Возвращайтесь в Google Tag Manager (но не закрывайте страницу с Google Аналитикой, она в дальнейшем еще понадобится) и вставляйте скопированный идентификатор тега.

Нажмите на серый кружок в разделе "Триггеры" и в открывшемся окне выберите "All Pages".

После этого нажмите кнопку "Сохранить" в правом верхнем углу.

Теперь необходимо добавить теги для виджета. В инструкции указано создание одного тега для виджета расписания.

Создание и настройка тега Mobifitness

В личном кабинете Google Tag Manager в меню слева нажмите на раздел "Триггеры" и в правом верхнем углу нажмите на кнопку "Создать".

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

В новой вкладке браузера откройте административную панель Mobifitness и перейдите в раздел "Виджеты"-"Виджет расписания"-"Интеграция".

Скопируйте название цели. В данном примере это mobifitness_event_booking.

Вернитесь в Google Tag Manager. В строку "Название события" вставьте скопированную цель mobifitness_event_booking. Убедитесь, что фраза вставилась без пробелов.

В условиях активации триггера переключитесь на некоторые специальные события. В условиях ниже из выпадающего списка выберите "Event" и "равно", затем вставьте скопированную цель mobifitness_event_booking, убедитесь что цель вставилась без пробелов. После этого нажмите кнопку "Сохранить".

После этого в Google Tag Manager перейдите в раздел "Теги" и в правом верхнем углу нажмите "Создать".

Наверху введите название тега, можно точно такое же "Запись на групповое занятие". В конфигурации тега нажмите на серый кружок и в открывшемся окне выберите "Google Аналитика".

Далее выберите "Google Аналитика: событие GA4".

После этого перейдите на вкладку браузера с Google Аналитикой. В меню слева выберите "Администратор".

Далее нажмите на "Потоки данных".

И нажмите на тот поток, который вы создавали ранее.

В открывшемся окне скопируйте идентификатор потока данных.

Вернитесь обратно на вкладку с Google Tag Manager (но не закрывайте вкладку с Google Аналитикой, далее она вам понадобится). Вставьте скопированный идентификатор в поле "Идентификатор потока данных". Рядом с ним у вас должна появиться зеленая галочка с надписью "В этом контейнере найден тег Google". В название события вставьте цель из Mobifitness, в данном случае это mobifitness_event_booking. Убедитесь, что цель вставилась без пробелов.

Прокрутите окно вниз и в разделе "Триггеры" нажмите на серый кружок.

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

И после в правом верхнем углу нажмите кнопку "Сохранить".


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

Перейдите на вкладку с Google Аналитикой. В меню слева нажмите "Администратор" и в открывшемся меню слева выберте "Настройки ресурса"-"Просмотр данных"-"События".

В правом верхнем углу нажмите "Создать событие" и затем еще раз в открышемся окне нажмите кнопку "Создать".

В открывшемся окне в название события введите цель из Mobifitness, в данном случае это mobifitness_event_booking и в условиях совпадение выберите параметр "event_name" Оператор "Равно" и значение mobifitness_event_booking.

Далее нажмите кнопку "Сохранить".

Событие может пропасть из списка событий, но оно создано, просто в данный момент не активно. Оно появится там через 24 часа.

После этого в течение 24 часов статистика по записи на групповое занятие в вашем виджете на сайте появится в вашем кабинете в Google Аналитике.

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