Нам понадобится ВСЕГО ОДНА строчка кода.
Но начнем с основ, чтобы вы смогли самостоятельно выполнить задачу вне зависимости от сайта.
Нам поможет особое свойство, которое есть у полей ввода, — value. Допустим, на странице есть поле ввода input:
<input type="text">
Откроем консоль разработчика. Сделать это можно нажав на поле ввода правой кнопкой мыши и нажать “показать код”. Далее открывается консоль разработчика.
Находим в коде элемент сайта.
Самое сложное остается с помощью команды document.querySelector() обратиться к поисковой строке.
Ссылка с дополнительной информацией
Больше информации про селекторы
Если мы обращаемся через class (например, class=”class-example”), то в команде перед названием класса добавляем точку ".".
Пример команды document.querySelector(“.class-example”)
Если к id элементу обращаемся id=”id-example”, в таком случае добавляем “#”, document.querySelector(“#id-example”)
Если обращаемся к самому элементу, то дополнительные знаки не требуются, document.querySelector(“p”)
Возвращаемся к сайту, на котором хотела бы показать пример решения вопроса.
Обратите внимание на то, что я использую класс элемента и в команде я ставлю точку.
В данном шаге мы только обратились к элементу. Далее нам нужно получить значение, которое вводят в эту строку.
Здесь нам поможет свойство value
Здесь мы сделали все необходимое и теперь переходим в GTM
В google tag manager нам нужно создать переменную, которая и будет получать значения из поисковой строки.
Для этого нам нужно написать функцию. Не пугайтесь, это очень просто.
В данном коде нам нужно будет подставить актуальную команду document.querySelector и все. Все остальное остается неизменным.
Переменную создали, теперь проверяем, что GTM подтягивает нужное нам значение
Включили предварительный просмотр, написали рандомный запрос в поисковой строке и нажали Enter.
Важный момент!
GTM по разному понимаем какое событие произошло в зависимости от сайта. Где-то это будет событие “Click”, где-то будет “Form Submit” как на данном сайте. После того как вы нажмете Enter проверьте в логе событий, какое именно событие подтянуло значение из поисковой строки.
На основе его мы и будем строить дальнейшую работу.
Мы видим что значение поисковой строки передается при отправке формы Form Submit,но не каждое событие Form Submit решает нашу задачу. Нам нужно сделать срабатывание события, когда значение имеет слово или цифры.
Теперь создаем триггер, который будет срабатывать при использовании поисковой строки. Мы будем использовать регулярные выражения. Просто повторяйте за мной:
1. Создаем триггер Отправка формы
2. Выбираем созданную нами переменную ранее Поиск по сайту
3. Соответствует регулярному выражению(без учета регистра)
4. Добавляем регулярное выражение (^[а-я]|^[0-9])
Теперь переходим к созданию тегов для передачи события в Яндекс.Метрику и Google Analytics 4
Дополнительные параметры в Яндекс.Метрике — справка
Как посмотреть результаты в Яндекс.Метрике
Как посмотреть результаты в Google Analytics 4
Это весь процесс настройки!
Если эта статья была полезная для вас — поставьте, пожалуйста, лайк :)