Отслеживание "пустых результатов" поиска в Google Analytics 4

В материале, посвященному настройке поиска по сайту для Google Analytics 4, вы узнали, как с помощью событий типа Улучшенная статистика автоматически отслеживать события в тот момент, когда пользователь выполняет поиск на вашем сайте, и передавать эту информацию в GA4, включая сам запрос поиска. В этой статье разберем отслеживание событий поиска, которые не привели к результатам.

Встроенный функционал Google Analytics 4 предоставляет нам возможность узнать не только, как часто пользователи выполняют поиск по сайту, какие запросы вводят и насколько сильно они вовлечены в этот процесс, но и помогает понять и ответить на следующие вопросы:

• почему пользователь вообще обращается к строке поиска?
• какие запросы в поиске на сайте являются наиболее популярными?
• есть ли проблемы в навигационном меню или нашим посетителям непонятна структура сайта?

В этом руководстве мы с вами разберем отслеживание событий поиска по сайту в GA4 с помощью Google Tag Manager, которые не дали результатов.

Например, вот так выглядит моя страница результатов поиска по запросу Matomo Analytics, когда ничего не найдено:

И задача такая - передать событие о Ничего не найдено (Nothing found) в Google Analytics 4. Но отслеживать не просто факт совершения данного события, а еще и сам запрос, который ввел пользователь.

В зависимости от того, как у вас на сайте реализован данный функционал, существует несколько способов настройки:

• когда на странице есть сам запрос и уведомление о "пустом результате";
• когда на странице есть уведомление о "пустом результате", а сам запрос присутствует в URL-адресе в качестве параметра;
• когда ничего нет, но очень хочется настроить такое событие.

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

Уведомление и сам запрос есть на странице

Первый вариант, как правило, является самым распространенным. И это то, что реализовано у меня на сайте:

Когда пользователь вводит запрос, он попадает на страницу с пустым результатом. А уведомление По вашему запросу ничего не найдено как раз свидетельствует об этом. Это сообщение может являться условием активации тега, который отправит событие в Google Analytics 4. Другими словами, мы можем настроить триггер на срабатывание в тот момент, когда пользователь попадает на страницу, содержащую данную фразу. А поскольку вряд ли на сайте есть какая-либо другая страница с таким же текстом, это условие будет уникальным и означать, что по запросу пользователя ничего не было найдено.

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

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

В моем примере у выделенной фразы есть класс not-found. Его я в дальнейшем могу использовать в качестве дополнительного условия активации триггера. Для вашего сайта класс будет другим. Он может как быть, так и отсутствовать вовсе. В этом случае вам нужно использовать или идентификатор, или селектор выбранного элемента фразы, или сам текст, извлеченный с помощью пользовательской переменной Элемент DOM. Чуть ниже я опишу различные сценарии настройки.

Триггер "Видимость элемента"

Скопировав найденное значение, перейдите в свой контейнер Google Tag Manager и создайте триггера типа Видимость элемента (Element Visibility). Вы можете задать один из двух методов выбора: Идентификатор или Селектор CSS:

Идентификатор используется только в том случае, если у вашего элемента для "пустых результатов" поиска есть конструкция типа id=... В этом случае вы можете использовать значение идентификатора в настройках триггера. Во всех остальных ситуациях выбирайте Селектор CSS.

Подробнее о том, как их находить у конкретных элементов, смотрите в моей лекции по CSS-селекторам:

А также прочитайте несколько материалов, связанных с селекторами, поскольку без фундаментальных основ работы вам будет сложно выполнить валидацию полей для своей формы:

• CSS-селекторы в Google Tag Manager. Часть I
• Селекторы в jQuery. Часть II
• Регулярные выражения в CSS-селекторах и GTM
• CSS Selector Tester и его аналоги
• Google Tag Manager и jQuery

Таким образом, моя конструкция class="not-found" трансформируется в такой селектор - .not-found (каждый класс, если их несколько, разделяется точкой, и в начале класса тоже ставится точка) с методом выбора Селектор CSS:

Чтобы убедиться в том, что вы указали верную конструкцию селектора, используйте специальное расширение CSS Selector Tester или его аналог CSS and XPath checker. Оно подсветит вам HTML-элемент на странице после ввода его селектора CSS в строку:

У триггера Видимость элемента несколько правил запуска - один раз на страницу, один раз на элемент или при каждом появлении элемента на экране:

Поскольку нашей задачей является регистрация события на странице, то вы можете оставить настройку Один раз на страницу по умолчанию. Для опции Минимальный процент видимости (то есть какой процент выбранного элемента должен быть виден на экране для срабатывания триггера) вы можете установить свое собственное значение. Поскольку настройка производится для уведомления По вашему запросу ничего не найдено, то для его срабатывания достаточно минимального процента видимости. Можно задать 5-20%. Не забудьте, что пользователи будут осуществлять поиск по вашему сайту с мобильных устройств, поэтому процент видимости задавайте исходя из того, как ваша страница с пустыми результатами будет отображаться на таких девайсах.

Еще в настройках триггера вам может потребоваться установка галочки Регистрация изменений DOM. Она отслеживает элементы, которых изначально нет на странице и которые подгружены динамически и могут не входить в изначальную структуру DOM-дерева. В моем примере сообщение Ничего не найдено появляется сразу, поэтому данную опцию я включать не буду.

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

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

Какое? Например, дополнительное условие по URL-адресу. Когда пользователь вводит запрос и переходит на страницу с результатами выдачи, то в адресной строке браузера появляется дополнительный параметр отслеживания:

Именно по такому параметру GA4 благодаря улучшенной статистики автоматически регистрирует события поиска по сайту. В моем примере таким параметром запроса является s. У вас это может быть другой параметр. Например, у поисковой системы Google - это параметр q, у Яндекса - text, у Yahoo - p и т.д. Все зависит от реализации на вашем сайте. Иногда веб-разработчики целенаправленно скрывают все передаваемые переменные и их значения с помощью метода POST. И тогда вместо привычного вида ссылки https://site.ru/index.php?page=4&id_artpage=4 вы будете видеть что-то похожее на https://www.site.ru/search.php. Попросите вашего программиста передавать ключевые параметры запроса в конце URL. Если это сделать невозможно, тогда в триггере Видимость элемента просто не указывайте дополнительное условие активации.

Если в вашем URL присутствует параметр запроса, тогда вы можете добавить дополнительное условие. Например, Page URL содержит ?s=

Сохраните триггер, задав ему название.

Указать условие для метода выбора Селектор CSS в триггере можно было и по-другому. Проинспектировав ту же самую надпись, выделите ее левой кнопкой мыши, а затем нажмите правой и скопируйте селектор через Copy - Copy selector:

При таком копировании сам селектор будет выглядеть иначе, но он так же будет подсвечивать нужный HTML-элемент при проверке с помощью расширения:

Эту же конструкцию вы можете использовать в триггере Видимость элемента в методе выбора Селектор CSS вместо предыдущей:

И тот и другой способ задания селектора является корректным. Для своего сайта вы можете использовать любой из них. Если нет ни идентификатора, ни класса, копирование селектора будет для вас приоритетным.

Триггер "Модель DOM готова"

Другой способ отслеживания "пустых результатов" поиска - это использование триггера Модель DOM готова (DOM Ready). Если у вас не получается настроить триггер на видимость элемента, то вы можете попытаться использовать данный тип настройки.

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

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

Вернитесь в диспетчер тегов Google и создайте переменную типа Элемент DOM. Назначьте метод выбора Селектор CSS, а в поле Селектор элементов вставьте скопированное значение селектора:

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

Задайте переменной имя и сохраните ее. Уже на этом шаге вы можете проверить настройки данной переменной, воспользовавшись режимом предварительного просмотра GTM. Активируйте режим отладки и перейдите на страницу с пустыми результатами поиска. На шкале событий выберите Container Loaded, DOM Ready или Window Loaded. Перейдите на вкладку Variables (Переменные). Найдите в общем списке только что созданную переменную Элемент DOM. Ей должно быть присвоено значение текстового содержимого вашего сообщения По вашему запросу ничего не найдено:

Как видите, данной переменной присваивается верное значение. Теперь эту переменную можно использовать в качестве дополнительного условия для триггера Модель DOM готова. Вернитесь в свой контейнер GTM и создайте такой триггер.

Я рекомендую использовать такие условия активации:

1. с переменной Элемент DOM (укажите условие с тем текстом, который отображается на вашей странице "пустых результатов");
2. с URL-адресом, в котором содержится параметр запроса (если на вашем сайте есть такая реализация).

В моем примере я могу указать с переменной часть уведомления ничего не найдено, а какое условие нужно задать для URL-адреса вы уже знаете:

Примечание: если у вас одностраничное приложение (SPA-сайт), то данный триггер у вас работать не будет, поскольку на таких сайтах контент подгружается динамически без перезагрузки страницы. Следовательно, регистрации нового просмотра страницы не будет и URL-адрес в адресной строке не изменится. Попробуйте использовать триггер Изменение в истории или настроить Специальное событие с использованием уровня данных (dataLayer).

Параметр запроса для события

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

• из параметра запроса в URL-адресе;
• из части URL-адреса в адресной строке;
• с помощью переменной Элемент DOM;
• с помощью собственного кода JavaScript.

Если на вашем сайте в URL-адресе присутствует параметр запроса:

То вы можете воспользоваться пользовательской переменной типа URL для извлечения значения. Создайте ее, указав в настройках:

• Тип компонента - Запрос;
• Ключ запроса - свой собственный (в моем примере - s).

В режиме отладки такая переменная будет принимать нужное нам значение:

В том случае, когда у вас поисковый запрос находится в URL-адресе, но не имеет отдельного параметра, а является частью пути, вы можете воспользоваться этой статьей моего блога для извлечения части URL из ссылки. Для этого используйте пользовательскую переменную типа Собственный код JavaScript.

Пример кода, который может быть вам полезен:

Например, если у вас есть ссылка вида osipenkov.ru/search/Matomo+Analytics/ , то вы можете использовать встроенную переменную Page Path для возвращения пути к странице в текущем URL, а также метод split(), чтобы разделить строку на подстроку. Мы задаем знак / как разделитель (separator), а в квадратных скобках указываем элемент по счету, который хотим извлечь. Для ссылки в моем примере - это 2 ([0]osipenkov.ru/[1]search/[2]Matomo+Analytics/):

Еще один способ, благодаря которому вы можете извлечь значение параметра запроса - это использовать переменную Элемент DOM. Подробно мы с ней познакомились чуть выше. Ее реализация возможна тогда, когда на странице "пустых результатов" поиска данный параметр присутствует в качестве отдельного HTML-элемента.

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

В диспетчере тегов Google создайте переменную типа Элемент DOM. Назначьте метод выбора Селектор CSS, а в поле Селектор элементов вставьте скопированное значение селектора:

В режиме предварительного просмотра эта переменная будет принимать нужное нам значение:

Еще извлекать значение запроса со страницы можно с помощью специального расширения GTM Variable Builder. Утилита очень помогает в тех ситуациях, когда у элемента нет какого-то отдельного идентификатора, класса или когда при копировании селектора и извлечении значения добавляется какая-то ненужная часть от другого элемента. И тогда необходимо использовать специальные условия с регулярными выражениями.

GTM Variable Builder может сам составить вам нужную конструкцию с регулярным выражением всего за 1 клик. Для этого установите его к себе в браузер, а затем откройте консоль разработчика (клавиша F12 в Google Chrome). Перейдите на вкладку Console. Выделите на странице элемент с запросом и нажмите на иконку GTM Variable Builder:

В консоли появится две строчки:

• PASTE THIS INTO THE CONSOLE TO TEST – код для проверки нашей переменной;
• FOR USE IN A GTM CUSTOM JAVASCRIPT VARIABLE – код, который нужно скопировать и вставить в Google Tag Manager в переменную типа Собственный код JavaScript.

Чтобы проверить код переменной, скопируйте первую строчку, вставьте ее в консоль и нажмите Enter:

Должен вернуться тот же результат. Если это так, копируйте вторую строчку с function () { и вставьте данный код в пользовательскую переменную Собственный код JavaScript. Это будет выглядеть так:

Сохраните переменную. Чтобы проверить, действительно ли в данную переменную подставляется полученное значение, все так же воспользуйтесь режимом предварительного просмотра Google Tag Manager. Перейдите на вкладку Variables. Там вы увидите значение переменной, сформированной с помощью расширения GTM Variable Builder:

После того, как вы создали переменную для извлечения запроса поиска, пришло время создать тег события Google Analytics 4.

Тег события Google Analytics 4

Перейдите в раздел теги и создайте тег типа Google Аналитика: событие GA4. Задайте следующие настройки:

• Тег конфигурации - идентификатор вашего веб-потока GA4;
• Названия события - произвольное (например, search_nothing_found);
• Добавьте к событию параметр события, задав ему название search_term. В качестве значения используйте переменную, созданную на предыдущему шаге;

В качестве триггера активации используйте один из тех, что мы разобрали с вами выше (Видимость элемента или Модель DOM готова). Итоговый тег события GA4 у вас может выглядеть так:

Задайте название тега и сохраните его.

Режим отладки

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

В зависимости от выбранного триггера активации, на шкале событий вы должны увидеть событие, которое активирует ваш тег:

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

В самом Google Analytics 4 вы можете перейти в отчет В реальном времени и в карточке событий найдите ваше событие:

Кликнув на него, вы провались внутрь события. Там вы увидите перечень доступных параметров событий. Найдите search_term (или то, которое указали вы в теге события GA4) и нажмите на него:

Вы увидите свой запрос, который не дал никаких результатов поиска.

Аналогичным образом вы можете проверить с помощью инструмента DebugView. Найдите на шкале событий событие search_nothing_found и кликнете на него. Справа откроются параметры этого события. Найдите в списке search_term и убедитесь, что в него передалось то же самое значение:

Примечание: если в качестве параметра события вы указали значение, отличное от search_term, не забудьте в своем счетчике Google Analytics создать специальный параметр.

После настройки события и создания специального параметра может пройти до 24 часов прежде, чем данные появятся в отчетах Google Analytics 4. В завершение не забудьте опубликовать контейнер.

Отчетность в Google Analytics 4

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

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

Уведомление на странице, а сам запрос в URL

В этом случае используйте вышеприведенные настройки, а именно:

• для уведомления на странице вы можете создать как триггер Видимость элемента, так и триггер Модель DOM готова;
• для извлечения запроса из URL воспользуйтесь разделом Параметр запроса для события;

Все остальные настройки идентичны.

На странице ничего нет

Поскольку на странице нет никаких элементов и отличительных знаков, этот вариант требует привлечения сторонней помощи. Его можно использовать и для одностраничных сайтов (Single Page Application). Все, что от вас нужно - это попросить разработчика добавить событие с уровнем данных (dataLayer) в исходный код сайта и сделать так, чтобы оно срабатывало в момент отображения "пустых результатов" поиска.

Пример кода представлен ниже:

Примечание: параметр search_term должен динамически принимать то значение, которое вводит пользователь.

После того, как ваш программист реализует такой сценарий на сайте, вам необходимо будет создать пользовательскую переменную типа Переменная уровня данных с именем search_term:

И триггер типа Специальное событие с названием search_nothing_found:

Их вы и будете использовать в теге события GA4: