Google Analytics цели

Прежде, чем приступить к подключению счетчика создайте свой аккаунт в https://analytics.google.com/analytics/web/ если у вас его еще нет.

Настройка ресурса

Если вы создаете аккаунт впервые, то во втором шаге вы настраиваете ресурс. Ресурсом называется сайт или приложение, для которого Google Analytics будет собирать данные.

1. Введите название ресурса, укажите часовой пояс, валюту вашего сайта и нажмите кнопку Далее.
   
   
2. Заполните информацию о компании и нажмите кнопку Создать. После появится всплывающее окно в котором нужно поставить галочки, если вы согласны с политикой Google Analytics.
   
   
3. После создания ресурса перейдите на вкладку Потоки данных и выберите источник данных - Веб.
   
   
4. Укажите адрес своего сайта и название потока. После этого нажмите Создать поток.
   
   
5. Скопируйте код Глобальный тег (gtag.js)
   
   
   И добавьте его в Настройках страницы, в разделе Плагины создав новый плагин - Произвольный код. Сам код согласно инструкции от Google нужно разместить в поле HEAD
   
   
6. После этого откройте сайт в режиме инкогнито, а в Google Analytics перейдите в раздел "Отчет в реальном времени". Если все настроено верно, вы увидите в течение 5-10 минут первого посетителя. Если в отчете так и не показался посетитель проверьте шаги из инструкции снова.
   
   

Настройка событий с помощью Google Tag Manager

Диспетчер тегов Google позволяет отслеживать настраиваемые события.

1. Перейдите по ссылке https://tagmanager.google.com/ и нажмите Создать аккаунт. Заполните все поля и создайте аккаунт. После нажатия на кнопку Создать появится окно с принятием Политики использования с которым нужно согласится.
   
   
2. Далее вам нужно скопировать код GTM и установить его в плагине Произвольный код, по аналогии с глобальным тегом.
   
   
   Обратите внимания код состоит из двух частей. Первая часть кода добавляется в поле HEAD
   
   
   Вторая часть кода в BODY. Не забудьте сохранить.
   
   
3. Создаем новый тег. Нажмите Новый тег → Конфигурация тега и выберите Конфигурация GA4. В поле Идентификатор потока данных мы вставляем значение из аналитики. В поле триггер выбираете Просмотр Страницы
   
   
4. Переходим во вкладку Переменные, чтобы добавить переменные, которые могут пригодиться нам в дальнейшем.
   
   

Как настроить событие при клике на кнопку?

1. Перед тем как настроить событие в GTM необходимо в редакторе задать class для кнопки, нажатие которой нужно отслеживать. Для этого у кнопки нажмите на значок гаечного ключа → вкладка Содержимое и оберните текст кнопки в тег span, например: <span class="mybtn2">Кнопка</span> class вы задаете любой, который нужен.
   
   
2. Переходим во вкладку Триггеры и нажимаем Создать → Настройка триггера → Клик/Все элементы.
   
   
   В условиях активации триггера выбираем Некоторые клики, после этого появится поле для заполнения. При использовании класса ваше условие всегда будет выглядеть следующим образом: 
   Click Classes -> Содержит -> <ваш класс>
   
   
   Задаем название триггеру (по желанию) и нажимаем Сохранить в правом верхнем углу.
   
3. Перейдите во вкладку Теги и нажмите Создать. В конфигурации тега вы выбираете Событие GA4. В поле Тег конфигурации выбираем свою аналитику, которую создали в инструкции выше. В поле название события задаем любое название для дальнейшего отслеживания. Т.к. мы отслеживаем кнопку можно задать название btnclick. В поле триггеры выбираем триггер который создали выше. Задаем название тегу и нажимаем сохранить.
   
   
4. После того как создали нужный тег нажимаете Отправить → Опубликовать.
   
   
5. Чтобы проверить правильность установленного события воспользуйтесь опцией Предварительный просмотр.
   
   
   В новой вкладке Tag Assistant впишите домен сайта, а затем кликните на Connect.
   
   После этого должна открыться новая вкладка с указанным сайтом, на котором вам нужно выполнить заявленное целевое действие. В данном случае - это клик на кнопку. После выполнения обязательного действия появится информация о событии и успешной активации тега.
   
   

Отслеживание отправки форм

В настройках страницы, в разделе Плагины → Произвольный код (можно использовать новый или имеющийся плагин), разместите код указанный ниже в поле BODY

<script>
cr.api(function (page) {
    page.waitForAppear('.cr-form', function (el) {
        page.getComponent(el).on('submit', function (event) {
            window.dataLayer = window.dataLayer || [];
			window.dataLayer.push ({'event': 'formSuccess'});
        });
    });
});
</script>

Отслеживать отправку формы можно с помощью триггера Пользовательское событие. Для отслеживания отправки нам потребуется код выше.

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

С настройками на Платформе LP закончили, переходим в GTM

Настройка триггера

Перейдите во вкладку Триггеры → Создать → Настройка триггера → Специальное событие

В появившемся триггере нужно заполнить поле Название события, в нашем варианте это будет formSuccess из кода выше

Настройка тега

Перейдите во вкладку Теги → Создать

В конфигурации тега выбираете событие GA4

В поле Тег конфигурации выбираете GA4, которую настраивали ранее, так же нужно заполнить поле Название события

Теперь необходимо в поле Триггеры выбрать триггер Специальное событие и сохранить тег

Итоговый вид тега:

Осталось Отправить → Опубликовать настроенный тег

В предварительном просмотре событие formSuccess появится только после успешной отправки формы