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

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

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

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

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

  • "Переход в корзину" url: содержит http://demo.moguta.ru/cart
  • "Страница оформления заказа" url: совпадает http://demo.moguta.ru/order
  • "Создан новый заказ" url: содержит http://demo.moguta.ru/order?creation=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, который вы задали Яндекс.Метрике при создании цели.


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

Если вам требуется отследить цели при нажатии на любой элемент на странице, необходимо сначала в верстке страницы добавить уникальный класс к этому элементу , например <button class="actioner_1">Целевая кнопка</button > Тогда в 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.