Как поставить цель на кнопку
Сервисы веб-аналитики позволяют с точностью отслеживать действия пользователей на сайте и на основе полученных данных делать выводы о качестве настройки контекстной рекламы, размещенного контента, выпускаемого продукта и так далее. Владение этой информацией помогает грамотно оптимизировать и сайт, и работу фирмы в целом.
Помимо данных о посещениях и длительности просмотров, сервисы аналитики Google Analytics и Яндекс Метрика предоставляют сведения о том, какой процент ваших посетителей заполняет формы обратной связи, нажимает кнопки «купить», «оформить», «подписаться» и совершает иные взаимодействия с сайтом. Для получения таких данных вам необходимо настроить цель JavaScript-событие и установить ее на соответствующую кнопку вашего сайта.
В этой статье мы поговорим о том, что собой представляет событие JavaScript, как его настроить и как отслеживать целевые действия пользователей через работу JS-кода.
JavaScript-событие – что это?
Данный тип взаимодействия посетителя с сайтом означает, что пользователь совершил целевое действие, в результате которого URL страницы не изменился.
В этом случае вы не можете проследить действия потенциального клиента посредством целей «Количество просмотров» или «Посещение страниц», поскольку в них фиксируется смена адресов при переходе пользователя по страницам. При нажатии кнопки «купить», «подписаться», при заполнении формы заявки пользователь остается на той же странице – то есть адрес не меняется, однако целевое действие совершено. Как же тогда контролировать выполнение медиаплана? Для отслеживания таких действий и используется цель «JavaScript-событие».
Цель JavaScript считается достигнутой в том случае, если в результате действия пользователя на странице срабатывает специальный код. С помощью JS информация о совершенном действии передается на сервис веб-аналитики и фиксируется.
Настраиваем JavaScript-событие в Яндекс Метрике
JavaScript-события помогают отслеживать на страницах сайта целевые действия, при которых не происходит перехода пользователя на какой-то другой адрес. С их помощью вы можете делать аналитику точнее и даже экономить деньги. Рассказываем и показываем, как.
Представьте ситуацию. Рекламодатель настраивает в Директе оплату за конверсии и в качестве одной из целей указывает переход пользователя на страницу благодарности. Это страница, на которую пользователь перенаправляется, когда он совершил полезное действие, например, зарегистрировался, купил что-то или отправил заявку.
Пользователь совершает полезное действие, попадает на страницу благодарности, после чего оставляет ее открытой. И далее в течение нескольких дней обновляет ее, допустим, три раза. Система засчитывает три конверсии вместо одной, рекламодатель оплачивает все. Почему так происходит?
Система считает одним визитом все взаимодействия пользователя с сайтом в течение 30 минут. То есть, если он закроет вкладку со страницей благодарности и обновит ее или откроет из закладок через 29 минут, рекламодатель заплатит за одну конверсию. А если через 31 минуту — будет учтено уже два визита. И при оплате за конверсии будет оплачено две конверсии.
Яндекс не делает возвратов за такие списания, ведь с точки зрения работы Метрики система работает корректно: она регистрирует каждое посещение страницы благодарности.
Как избежать подобных казусов? Настроить JavaScript-события!
Дарим кампании в Директе для старта
Всем, кто впервые запускает рекламу в Директе через eLama, бесплатно настроим рекламную кампанию для поиска или сетей
Настройка цели «JavaScript-событие» позволяет отслеживать события, которые происходят без изменения URL сайта — например, нажатие на кнопку, заполнение формы, переходе на определенную страницу сайта, просмотр видео или скачивание файла.
С ее помощью можно исключить ошибочные списания, потому что цель будет считаться достигнутой только тогда, когда событие, совершенное пользователем, обратится к определенному фрагменту кода на сайте. Этот код не получится воспроизвести обновлением страницы, то есть каждая конверсия будет уникальной.
Чтобы настроить цель в Метрике, предварительно нужно создать и настроить счетчик. Как это сделать, мы рассказывали в инструкции.
Настраиваем цель в Яндекс Метрике
Чтобы настроить цель, в левом меню аккаунта Метрики перейдите в раздел «Цели» и нажмите «Добавить цель».
Во всплывающем окне укажите название цели и отметьте тип условия: «JavaScript-событие».
Далее выберите условие отслеживания цели и придумайте идентификатор цели — из латинских букв и цифр с нижними подчеркиваниями вместо пробелов.
Условий отслеживания цели — три на выбор.
- Совпадает: достижение цели засчитывается, если в коде события указан полный идентификатор. Подходит, если вы настраиваете на сайте только одну цель «JavaScript-событие».
- Содержит: в этом случае в поле «Идентификатор цели» вы указываете часть идентификатора, который будете использовать в коде сайта. Подходит, если вы настраиваете несколько целей на сайте, и у них всех есть общие символы в названии.
Идентификаторы цели для этих двух условий не должны содержать символы / \ & # ? = «. Знак + замените символами: %2B.
- Регулярное выражение. Подходит, если достижением цели должно считаться срабатывание кода, который повторяется в событиях на сайте. Для этого условия можно указать несколько идентификаторов с оператором ИЛИ, а также задать еще более тонкие условия срабатывания цели. Подробнее об этом условии можно почитать в справке Яндекса.
Как только вы придумаете и введете идентификатор цели, система отобразит в отдельном поле код цели для сайта. Скопируйте его, он понадобится при настройке цели на сайте.
Здесь же вы можете указать доход, который приносит вам выполнение цели — чтобы в статистике правильно подсчитывались ROMI и ROI. Это опциональная настройка, которая будет перезаписана, если при достижении цели придет другое значение.
Когда всё готово, жмите на «Добавить цель». Когда на сайте цель будет настроена, Метрика начнет сбор статистики по ней.
Настраиваем цель на сайте
Чтобы цель, которую вы только что создали, начала работать, нужно добавить на сайт код, который будет сообщать в Яндекс Метрику о том, что настроенная цель выполнена.
После установки на сайт счетчика Метрики вы получаете доступ к методам — с их помощью в Метрику можно передавать определенные данные с сайта. Метод, который отвечает за передачу информации о выполнении JavaScript-цели, называется reachGoal — его название можно видеть в коде цели для сайта. Подробнее о нем читайте в справке.
Чтобы при клике по кнопке, заполнении формы или переходе на определенную страницу сайта вызывался метод reachGoal, можно воспользоваться одним из трех способов.
- HTML-атрибуты — здесь вам понадобится доступ к исходному коду сайта.
Инструкции по установке цели в исходный код сайта — в справке Яндекса. Если вы настраиваете событие на отправку формы, код цели нужно будет установить так, чтобы событие совершалось именно в момент отправки формы (подробнее об этом в Гиде по Метрике). Для установки цели понадобится тот самый код цели для сайта, который вы скопировали в Метрике.
- Библиотека jQuery для языка JavaScript — требует умения работать с фреймворками.
- Диспетчер тегов Google Tag Manager.
Остановимся подробнее на последнем варианте. Чтобы использовать этот способ, нужно зарегистрироваться в Google Tag Manager и установить счетчик метрики через него. О том, как это делается, вы узнаете из записи вебинара от евангелиста eLama Никиты Кравченко.
Далее в Google Tag Manager перейдите в раздел «Переменные» во вкладке «Рабочая область».
В правом верхнем углу карточки «Встроенные переменные» нажмите на «Настроить». Это необходимо, чтобы включить параметры, связанные с нужными вам действиями пользователя на сайте, например, с отправкой формы.
В открывшемся меню вы увидите список переменных, доступных по умолчанию. Пролистайте его и отметьте переменные, связанные с формами.
Далее перейдите в раздел «Теги» и нажмите «Создать» в правом верхнем углу.
Во всплывающем окне, которое появится, кликните на поле «Конфигурация тега».
Пролистайте список и выберите в нем вариант тега «Пользовательский HTML».
Затем в поле HTML введите код цели для сайта, ранее скопированный из Яндекс Метрики.
Промотайте страницу вниз и нажмите на «Триггеры».
На экране выбора триггера кликните на + справа вверху, чтобы создать новый.
В поле создания триггера нажмите на «Настройка триггера».
Промотайте открывшееся меню до раздела «Взаимодействия пользователей» и выберите «Отправка формы».
В настройках нового триггера укажите «Некоторые формы». В качестве активатора выберите Form ID — равно — и укажите идентификатор формы на сайте.
Сохраните триггер кнопкой справа вверху и дайте ему название. Повторите процедуру с тегом.
Новый тег с настроенным триггером отобразится в списке тегов.
Проверяем, работает ли цель
Когда цель создана в Яндекс Метрике и интегрирована на сайт, остается только проверить ее. Для этого, находясь на сайте, нажмите сочетание клавиш Ctrl+Shift+J для Windows или ⌥+⌘+J для Mac OS и в верхней части открывшегося окна выберите Console. После выполнения действия, на которое вы настроили срабатывание цели JavaScript-событие, в консоли разработчика в одной из строк должно отобразиться Reach goal.
Через 15-20 минут после этого перейдите в Яндекс Метрику. В левом меню выберите отчет «Конверсии». Если в нем появились данные о совершенных действиях, значит, всё настроено правильно.
Точной и эффективной вам рекламы!
eLama , специалист Службы Заботы
Как создать цель javascript событие
Куда прописывать созданную строку по джава-скрипт событию? Без этого цель работать не будет.
Ответ разработчика:
Спасибо за комментарий!
Цель добавляется в HTML-кода объекта. Например, для кнопки «Купить» нужно добавить примерно такой код:
Редактор кода шаблона доступен в разделе Дизайн → Редактор HTML/CSS/JS. Если вы не знакомы с HTML, то обратитесь в техподдержку для внедрения событий.
Все о целях в Яндекс.Метрике: какие выбрать и как правильно настроить
Первое, что проверяет маркетолог в начале рабочего дня — системы веб-аналитики. Сколько пользователей пришли за сутки, откуда они, какие целевые действия совершили и были ли они вообще. За последний пункт отвечают цели.
Цель — определенное действие, которое пользователь должен совершить на сайте: отправить заявку, посмотреть страницу и т.д. Вы сами задаете действие, которое считается значимым. Достигнутая цель говорит о том, что действие выполнено, реклама и сайт работают хорошо.
Технически настроить цели несложно (мы покажем это ниже), а вот выбрать, какие цели настраивать на сайте — проблема.
Типы целей в Метрике
В Яндекс.Метрике есть четыре основные цели:
- Количество просмотров страниц.
- Посещение страниц.
- JavaScript-событие.
- Составная цель.
При этом в сентябре 2020 Яндекс отдельно вынес три важные для бизнеса цели:
- Клик по номеру телефона.
- Клик по email.
- Отправку формы.
Раньше их можно было настроить через JavaScript-событие, но для этого требовалось внести изменения в код сайта. Теперь настройка этих целей стала проще и помощь программистов больше не нужна.
В статье мы разберем все варианты целей в Яндекс.Метрике: сначала рассмотрим классические цели, потом дополнительные, потому что их нельзя использовать при создании составной цели.
Как выбрать правильный тип цели, чтобы не испортить аналитику, как их настроить и какие выводы можно сделать на их основе? Читайте ��
Конверсионные и ретаргетинговые цели в Метрике — в чем разница?
Каждый из типов может быть конверсионным или ретаргетинговым.
Разница в том, что ретаргетинговые цели можно использовать в Яндекс.Директе (показывать контекстную рекламу только тем, кто достиг цели), а конверсионные — нельзя.
Чтобы сделать цель ретаргетинговой, поставьте галочку в соответствующем чекбоксе в настройках цели.
Эту галочку можно поставить и позже, если вы ее пропустили.
Теперь давайте изучим сами цели.
Настройка целей
«Количество просмотров»
Здесь задается количество страниц, которые должен посмотреть пользователь.
Пригодится блогам, СМИ, развлекательным и обучающим порталам и везде, где нужно оценить вовлеченность.
На корпоративных сайтах, где есть большой каталог товаров, эту цель можно использовать как микроконверсию — «Просмотрел Х страниц» будет говорить о заинтересованности пользователя. Его можно «догнать» с помощью ретаргетинга в Яндекс.Директ.
Нюансы:
За «просмотр» Метрика считает не только переход, но и обновление страницы. Если пользователь, находясь на странице, обновит ее, это засчитается за 2 просмотра. По нашему опыту, таких «просмотров» в статистику попадает много. Поэтому не стоит считать просмотр 2-3 страниц за вовлечение. Для этой цели выбирайте просмотр минимум 4-5 страниц.
«Посещение страниц»
Здесь задается страница (или набор страниц), посещение которых вы считаете значимым.
Можно задать несколько условий. Тогда между ними будет действовать оператор ИЛИ (посетил или эту страницу, или эту).
Допустим, нам нужно отследить, сколько человек совершили оплату на сайте. Для этого зафиксируем переход на Thank you page — страницу, на которую клиент попадает только после оплаты. При этом у нас есть 4 условия:
url: содержит: цель будет достигнута, если пользователь посетит любую страницу, в url которой есть слово done. Для нашей задачи тактика неудачная — вдруг появятся еще страницы с таким словом?
url: совпадает: цель будет достигнута, если адрес страницы полностью совпадет с указанным в цели. К задаче подходит, если на странице нет динамического параметра (например, номера заказа или id пользователя в системе).
url: начинается с: цель будет достигнута, если пользователь посетит любую страницу, начинающуюся с заданной части url. Начало из нашего примера тоже не подходит — оно может быть не только у страницы после заказа, но и у страницы оформления заказа.
url: регулярное выражение: здесь можно подставить в url специальный параметр, который будет автоматически собирать в одну цель разные страницы по заданным условиям. Звучит сложно, но в этом стоит разобраться. Все параметры и как они работают смотрите в помощи Яндекса.
Вернемся к примеру. Допустим, после оплаты в url подставляется номер заказа: order_id=1234. Чтобы зафиксировать переходы на каждую из страниц, добавляем вместо цифр параметр — /d<4>. /d означает, что на этом месте стоит число, а <4>, что оно состоит из четырех цифр.
Нюансы:
Популярная ошибка — настроить цель «Перешел на страницу Контакты». Перешел — не значит позвонил или написал. О конверсионности такая цель может говорить только в случаях, если контакты больше не написаны ни на одной другой странице.
«JavaScript-событие»
С помощью этой цели можно зафиксировать нажатие на кнопку, отправку заполненной формы и другие действия, связанные непосредственно с кликом.
Здесь понадобится доступ в код вашего сайта.
Нажатие на кнопку
Узнаем, сколько пользователей нажали на кнопку «Заказать».
- Пропишите идентификатор цели в Метрике.
Изначальный код может выглядеть так:
Добавляем нужный параметр:
На месте единиц нужно указать номер вашего счетчика Метрики, на месте zakazat — ваш идентификатор.
Готово. Теперь цель будет считаться достигнутой, когда посетитель нажмет на кнопку.
Отправка формы
Другая ситуация — посчитаем количество отправленных заявок. Считать клики по кнопке здесь нельзя, иначе цель будет считаться достигнутой, даже если форма не отправится (сломалась, не все заполнено и т.д.).
Поэтому нам нужен другой параметр — onsubmit.
- Пропишите идентификатор цели в Метрике. Оставим «zakazat».
- Добавьте параметр к элементу в коде сайта. Форму можно найти по фразе form action.
Добавляем параметр:
На месте единиц — номер вашего счетчика, на месте zakazat — ваш идентификатор.
Нюансы:
- Важно не перепутать параметры onclick и onsubmit. В первом случае вы отследите факт клика, даже если форма не заполнена, во втором — успешную отправку формы.
- Некоторые кнопки находятся внутри сторонних сервисов — онлайн-консультанта, виджета обратного звонка и т.д. Чтобы передавать цель о том, что пользователь совершил действие в них, нужно настроить синхронизацию сервиса с вашим счетчиком Метрики — в большинстве случаев это однокнопочная синхронизация. Цели при этом создадутся автоматически (например, такие цели передает Callibri). Учтите это при выборе сервиса — если он не передает данные в Метрику, вы не сможете отслеживать конверсионные действия пользователей — сообщения, заказ звонка и др.
«JavaScript-событие» на Tilda
Для сайтов на Tilda цели «клик на кнопку», «отправка заявки» и т.д. настраиваются через «Посещение страниц».
Для каждого поп-апа (всплывающего окна), кнопки и формы Тильда генерирует виртуальную страницу, у которой есть свой url. Чтобы получить его, зайдите в настройки элемента и поставьте галочку в чекбоксе «Отправлять данные о клике в систему аналитики».
Для форм галочку ставить не нужно — данные о них передаются автоматически.
Чтобы отслеживать клики и отправки форм, скопируйте url виртуальной страницы из настроек элемента и вставьте его в условие «url совпадает» в цели «Посещение страниц»:
«Составная цель»
С помощью составной цели можно узнать, на каком шаге регистрации, оформления заказа или другого процесса уходит пользователь.
Ее можно составить из целей «Посещение страниц» и «JavaScript-событие». Всего можно задать до 5 шагов.
Все настройки производятся в соответствии с типом цели.
Чтобы цепочка работала правильно, шаги нужно выбирать так, чтобы каждый последующий шаг был невозможен без предыдущего. Например, нельзя перейти в корзину без клика на «Заказать», нельзя попасть на Thank you page без оплаты и т.д.
«Клик по email»
Эта цель позволяет отследить пользователей, которые кликнули на электронный адрес на вашем сайте. Особенно актуально для B2B-сферы, где основная часть коммуникации проходит именно по электронной почте.
quot;клик по emailquot; позволяет зафиксировать пользователей, которые хотели написать на вашу почту»>» target=’_blank’> О том, как цель на копирование email или клик по нему помогает увеличить количество лидов, и почему нельзя ориентироваться только на эту цель, читайте в кейсе агентства Toogarin.
«Отправка формы»
Вы можете объединить все формы на сайте в одну цель, а также создать по отдельной цели для каждой формы. В этом случае цель настраивается в несколько шагов:
- Выберите вариант «Конкретная форма» и укажите адрес страницы сайта, где находится нужная форма:
- По кнопке «Перейти и выбрать форму» откроется визуальный редактор Метрики, в котором подсвечены все найденные формы:
- Кликните на форму, для которой хотите создать цель. Система сама определит идентификатор для нее:
Обратите внимание! Если настроить цель для отслеживания заявок с формы этим способом, засчитываться будет каждый клик по кнопке «Отправить». То есть цель может считаться достигнутой, даже если заявка не отправлена. Мы говорили об этом выше.
Как настроить цель на успешную отправку формы, если вы не знаете JavaScript?
Еще один способ передавать данные о новых заявках в Яндекс.Метрику — подключить сервис, который зафиксирует полученные заявки и передаст цель в системы веб-аналитики.
Например, так может МультиТрекинг Callibri. Для этого в сервисе есть специальный инструмент — «Перехватчик форм», он собирает заявки со всех форм на сайте, чтобы они попадали напрямую в отдел продаж. Связывает новую заявку с сессией пользователя и показывает, с какой рекламы он перешел на сайт.
Но самое главное — возможность настроить интеграцию с Яндекс.Метрикой, чтобы передавать цели, когда получено новое обращение. Чтобы настроить передачу целей в Метрику, нужно просто передвинуть слайдер и выбрать тип обращений, в нашем случае заявки:
Вы можете создать отдельную цель для отслеживания новых заявок с сайта или объединить заявки с другими типами обращений. Если вы фиксируете не только клики, но еще и звонки (об этом в следующем разделе), вы сможете добавить в ретаргетинговую кампанию всех, кто кликнул по телефону на сайте, но так и не позвонил.
«Клик по кнопке»
Мы уже описали выше, как можно отследить клики по кнопкам через JavaScript-событие. Однако с 1 апреля 2021 года Яндекс позволил отслеживать клики по любому кликабельному элементу сайта без вмешательства в код.
Как это делается?
Откройте вкладку с целями в Яндекс.Метрике и создайте новую цель:
- Пропишите название цели;
- Выберите тип «Клик по кнопке»;
- Пропишите адрес сайта и нажмите «Перейти и выбрать кнопку».
Вам перенаправит на сайт, где вы выберите нужный элемент, в нашем примере это кнопка «Регистрация». Внизу кликаем на «Отслеживать клики». «Координаты» кнопки появятся в Метрике, установите доход и нажмите «Добавить цель». Готово. Новая цель появится в списке. Теперь цель будет считаться достигнутой, когда посетитель нажмет выбранную кнопку. Подробнее о нюансах возможности читайте в блоге Яндекса.
Как отслеживать звонки в Яндекс.Метрике
Метрика может отслеживать только действия на сайте, а звонок — это действие в офлайн: пользователь видит номер с компьютера, а звонок совершает с телефона (если он не зашел на сайт с мобильного, конечно). Да, вы можете настроить отслеживание кликов по номеру и email-адресу на сайте, но клик или копирование еще не значит, что посетитель сайта вам позвонил. Поэтому сами звонки нужно считать отдельно — без них статистика не будет достоверной.
Считать звонки помогает коллтрекинг — система отслеживания телефонных звонков.
Коллтрекинг подменяет ваш реальный номер на сайте и показывает каждому пользователю уникальный номер телефона. Когда пользователь звонит, коллтрекинг фиксирует все данные о визите: источник, UTM-метки и многое другое. Вы сможете изучить все данные по звонкам прямо внутри сервиса, но и цель «Звонок» в Метрику он тоже передаст, нужно только настроить синхронизацию.