Просмотров: 15 431

Яндекс Метрика 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-атрибутов не является единственным и самым хорошим решением во всех ситуациях. Для того, чтобы научиться более гибко настраивать цели на вашем сайте, рекомендую вам изучить этот курс.

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

  • http://qualitypapers.review Get your documents written perfectly

    Best Editing Service

    The amount of written content has been growing exponentially recently, and it’s no wonder. For students, writing is an inseparable part of college and university assignments; for businesses, online publishing is a way to reach customers. The need for…

  • http://seo-today.ru/archives/811 SEO-Дайджест № 101

    […] индексирование приложений для Google?firebase.apptractor.ru Яндекс Метрика javascript цель на кнопку. Метод HTML-атрибута.webgyry.info Как Google оценивает и ранжирует страницы со […]

  • https://www.facebook.com/app_scoped_user_id/484344888582294/ Виктор Меньшиков

    Так это стандартный метод из самой подсказки Яндекса. Нюанс только в том, что считает через два раза. У нас в магазине например в день 5-6 заказов, а по метрике кликов по кнопке купить от силы 1-2. А сколько еще не окончивших заказ? Так что фигня этот метод от яндекса. Правда, другого то и нет.

    • http://vk.com/id18397417 Дмитрий Ченгаев

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