Как настроить цели Яндекс.Метрики и Google Analytics

Видео-инструкция: youtube.com

На примере сайта demo.moguta.ru настроим стандартные цели для интернет-магазина.

Первым действием необходимо убедиться что счетчики подключены к вашему сайту.
Для этого в разделе настроек магазина укажите их JS скрипты в соотетствующем поле "Коды счетчиков и виджетов".

Если опция поддерживается шаблоном, то этот код будет виден в просмотре исходного кода страницы. Посмотреть исходный код страницы в браузере можно горячими клавишами CTRL+U, или через контекстное меню.

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

Часто отслеживаемые цели

• "Переход в корзину" url: содержит http://demo.moguta.ru/cart
• "Страница оформления заказа" url: совпадает http://demo.moguta.ru/order
• "Попытка создать новый заказ" url: содержит http://demo.moguta.ru/order?creation=1 (Если в полях формы введен неправильный E-mail, то эта цель тоже сработает)
• "Успешно создан новый заказ" url: содержит  http://demo.moguta.ru/order?addOrderOk=1
• Клики на кнопку купить или другие элементы сайта.

Вместо demo.moguta.ru подставьте ваш домен.

Как повесить цель на кнопку купить

1. Открываем файл script.js в вашем шаблоне и в конец файла вставляем следующий код:

$(document).ready(function(){
  $("body").on("click", ".addToCart", function(){   
      alert('Сработал клик по кнопке купить');      
  });
});

2. Сбрасываем кэш сайта и кэш браузера.

3. Переходим в разделкаталога и кликаем на кнопку "купить", если при этом появилось сообщение 'Сработал клик по кнопке купить', значит все сделано верно.

4. Меняем в коде тестовую строчку 

alert('Сработал клик по кнопке купить');

на строчку с идентификатором счетчика

yaCounter15403XXX.reachGoal('название цели');

Должно получиться так:
 

$(document).ready(function(){
  $("body").on("click", ".addToCart", function(){   
      yaCounter15403XXX.reachGoal('название цели'); 
  });
});

yaCounter15403XXX - это ваш номер счетчика (узнать можно в Яндекс.Метрике).
'название цели' - идентификатор цели, например ya_1, который вы задали Яндекс.Метрике при создании цели.

Как повесить цель на нажатие любой кнопки

Если вам требуется отследить цели при нажатии на любой элемент на странице, необходимо сначала в верстке страницы добавить уникальный класс к этому элементу , например Целевая кнопка Тогда в js нужно написать следующий код 
 

$("body").on("click", ".actioner_1", function(){
  yaCounter15403XXX.reachGoal('ya_2');
});

ya_2 - это идентификатор цели созданной в Яндекс.Метрике.

Как настроить цели для Google Analytics

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

$("body").on("click", ".actioner_1", function(){
  gtag('event', 'ga_target_1', { 'event_category': 'cat_ga_target_1' });
});

ga_target_1 - идентификатор цели, который вы задали Яндекс.Метрике при создании цели.

Пример нескольких целей в одном обработчике

Чтобы цели по нажатию на кнопки срабатывали и фиксировались одновременно в Яндекс.Метрике и Google Analytics,  в в файле script.js в вашем шаблоне и в конце файла должен находить код аналогичный этому:

$(document).ready(function(){

	$("body").on("click", ".actioner_1", function(){
	  yaCounter15403XXX.reachGoal('ya_1');
	  gtag('event', 'ga_target_1', { 'event_category': 'cat_ga_target_1' });
	});

	$("body").on("click", ".actioner_2", function(){
	  yaCounter15403XXX.reachGoal('ya_2');
	  gtag('event', 'ga_target_2', { 'event_category': 'cat_ga_target_2' });
	});

});

actioner_1 - название CSS класса у HTML элемента клик по которому нужно отловить;
yaCounter15403XXX - идентификатор счетчика в метрике;
ya_1 - идентификатор цели в Яндекс.Метрике;
ga_target_1 - идентификатор цели в Google Analytics.