Вешаем яндекс цель на кнопку в Elementor

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

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

Установка яндекс цели на кнопку в Elementor.

 Суть метода в том, что вместо готового виджета кнопки в элементоре, мы будем использовать виджет вставки html кода и в нем создадим кнопку вручную. И там же сразу повесим цель. 

Особых знаний кода для этого не нужно в реальности все сводится к операции вставки и копирования. И так в том месте где нам нужно вставить кнопку мы используем не виджет кнопки, а виджет html. Если можете пишете сами кнопку и стилизуете ее. Можно прямо там же в виджете, но лучше css кнопки все же вывести в файл стилей. Если сами не можете написать нужную кнопку, не беда. В интернете полно генераторов кнопок с любыми стилями. Ищете генератор кнопок через инет, создаете там кнопку, копируете код и вставляете его в html виджет. Дальше задача уже сводится к тривиальной.

Добавляете в код вашей кнопки следующий код. Где вместо XXXXXXXX — номер вашего счетчика яндекс, а вместо test — идентификатор цели который вы указали при создании цели в Яндекс метрике.
onClick="yaCounterXXXXXXXX.reachGoal('test'); return true;"
Цель конечно нужно предварительно создать в метрике, и код метрики должен быть уже установлен на сайте.

Update!!!!

И снова здравствуйте. Еще один способ для нашей задачи, теперь немного проще.

Этот способ подойдет также если вы используете на странице кнопки созданные с помощью дополнений к Элементору, например Jet Elements. Собственно решение. Вам понадобится код  для отслеживания целей.

jQuery( document ).ready(function( $ ){
//Buttons
$( '#knopka' ).on('click', function(){
yaCounterXXXXXXX.reachGoal('target-name');
});
});

Этот код нужно вставить в футер сайта. Это удобно делать с помощью плагина Simple Custom CSS and JS. Вместо #knopka можете написать свой идентификатор, его вам нужно будет вставить в расширенных настройках виджета кнопки в поле CSS ID, только уже без решетки. ХХХХХ — заменяем на номер нашего счетчика, а target-name на название вашей цели в яндекс метрике. На этом в общем то все. Будут вопросы пишите, постараюсь помочь.