Интеграция виджетов с 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".