Яндекс Метрика javascript цель на кнопку. Метод HTML-атрибута.

Цель Яндекс Метрики на кнопку — одна из самых распространенных задач, которую приходится решать при настройке веб-аналитики сайта.

Предположим, что на вашем сайте или лэндинге есть какая-либо кнопка.

Например:

+ Кнопка «Купить»

+ Кнопка «Написать нам»

+ Кнопка «Регистрация», «Отправить», «Добавить в корзину» и.т.д.

Задача стоит следующая: нужно при клике по такого рода кнопка, передать данные о выполнении этого клика в систему Яндекс Метрика как выполнение цели.

Каким образом это можно сделать?

В этой заметке я хотел бы остановиться на самым простом методе, как это можно реализовать — методе использования HTML-атрибутов.

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

В то же время этот метод имеет целый ряд недостатков:

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

Другие способы, как можно настроить цель по клику на кнопку и передать эти данные в Яндекс Метрику в этом курсе. Способ установки с помощью HTML-атрибутов не является единственным.

Итак, давайте посмотрим, что нужно сделать, чтобы настроить выполнение цели Яндекс Метрики при клике по какой-либо кнопке на вашем сайте.

Шаг 1. Создаем новую Javascript-цель Яндекс Метрики в разделе «Настройки — Цели» и придумываем для этой цели какой-либо идентификатор.

К примеру, я создал цель с идентификатором «test».

Шаг 2. Находим исходный HTML-код той кнопки, на которую необходимо настроить цель Яндекс Метрики и готовимся к редактированию этого кода.

Чаще всего, если кнопка идет в составе HTML-формы ее исходный код может выглядеть вот так:

<input type="submit" value="Подать заявку">

Если кнопка является ссылкой, то ее исходный код может выглядеть так:

<a class="contact-btn" href="#" target="_blank" rel="nofollow noopener">Написать</a>

Шаг 3. Добавляем специальный HTML-атрибут, который называется onClick для кнопки, на которую нужно настроить Javascript-цель.

Для 1-го варианта:

<input type="submit" value="Подать заявку" onClick=""/>

Для 2-го варианта:

<a class="contact-btn" href="#" target="_blank" rel="nofollow noopener" onClick="">Написать</a>

Этот атрибут позволит нам в качестве его значения указать Javascript-код, который передаст данные о выполнении цели в Яндекс Метрику.

Буквально, атрибут onClick переводится как «при клике». Т.е. при клике по элементу, будет выполнен тот Javascript-код, который мы посчитаем нужным.

Пока значение этого атрибута у нас пустое.

Шаг 4. Вызываем специальный метод, который передаст данные о выполнении цели в систему Яндекс Метрика.

Метод, который отвечает за отправку данных о выполнении цели в систему Яндекс Метрика — это метод reacGoal.

Подробнее о нем в видео, которое является частью курса «Яндекс Метрика. Работа с целями».

Соответственно, если мы с вами добавим этот метод к нашему атрибуту onClick, то исходный код кнопки будет выглядеть так:

Где:

<input type="submit" value="Подать заявку" onClick="yaCounterXXXXXXXX.reachGoal('test'); return true;"/>

XXXXXXXX — идентификатор вашего счетчика Яндекс Метрики.
test — идентификатор Javascript цели, которую мы создали на шаге 1.

или так:

<a class="contact-btn" href="#" target="_blank" rel="nofollow noopener"onClick="yaCounterXXXXXXXX.reachGoal('test'); return true;">Написать</a>

Собственно, на этом все. Сохраните страницу и покликайте по кнопке в другом браузере, где вы не входили в свой аккаунт Яндекс Метрики.

Если все настроено корректно, то в отчете «Конверсии» вы увидите зафиксированные выполнения кликов по кнопке на вашем сайте.

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

Успехов в настройке целей Яндекс Метрики на кнопку и пусть эти данные покажут вам все те места, которые приносят вам доход и прибыль.