Настраиваем и тестируем цели сервисов Яндекс Метрики и Google Analitics.

Цели Яндекс Метрики

Настройка и установка целей Яндекс Метрики это довольно несложная процедура. Для установки цели на сайте нужен номер счетчика (общий для всех целей на сайте) и наименование идентификатора (лучше латинскими буквами).

Добавление цели для обычной ссылки (можно устанавливать на любой объект):

<a href="/price.zip" onclick="yaCounterXXXXXX.reachGoal('ORDER'); return true;">Прайс</a>

Если у ссылки уже есть параметр onclick, то лучше повесить событие через js. Пример:

$('a.notranslate').click(function() {
   yaCounter66285164.reachGoal('clickeng'); return true;
});

Добавление цели для формы

<form onsubmit="yaCounter33638554.reachGoal('zakaz'); return true;" >

Отправка формы через функцию jQuery

$(document).on('submit','form#requestcard_second',function(){
   yaCounter56638906.reachGoal('request_send_second'); return true;
});

Установка целей для объектов которых не было изначально в структуре DOM:

$(document).ready(function () {
    $("body").on("click", "#rc-phone-button", function () {
          yaCounter88899777.reachGoal('red'); return true;
    });

    $("body").on("click", "#jvlabelWrap", function () {
          yaCounter88899777.reachGoal('jivo'); return true;
    });
});

Как вешать цель на отправку формы Contact Form 7

Тестирование целей Яндекс Метрики

Протестировать цели Яндекс на работоспособность можно таким образом:

1. добавляем к url странице с целью запрос/?_ym_debug=1
2. открываем инструменты разработчика, вкладку Console
3. там будет содержаться созданная цель и при успешной активации цели будет выводиться строка Reach goal

Цели Google Аналитики

Рассмотрим создание целей по событию (Администратор > Цели). При создании целей важны два первых параметра Категория (например form) и Действие (например click), которые в последствии и будут прописываться как идентификаторы цели.

ga('send', 'event', 'Категория', 'Действие'); // образец
ga('send', 'event', 'form', 'click'); // пример

Важный нюанс: код отслеживания Google Аналитики в последнее время выглядит так:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-144115302-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-144115302-1');
</script>

При установке данного кода цели работать не будут.

Нужно устанавливать именно код Google Analitics с нужным идентификатором (UA-XXXXX-Y):

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('require', 'displayfeatures'); 
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

Установить цель Google на кнопку:

<a href="#Link" onclick="ga ('send', 'event', 'form', 'click');">Link</a>

Установка целей и для Яндекс и для Google:

onclick="ga ('send', 'event', 'Категория', 'Действие'); yaCounterXXXXXXX.reachGoal('id'); return true;"

Установить цель Google на действие через js:

$(document).ready(function(){
    $('.sendbtn').on('click', function(){
		ga('send', 'event', 'form', 'click');
    });
});

Проверка работы целей Google

Делать это можно либо с помощью браузерного приложения Google Tag Assistent, либо в админке Google Analitics > Отчет в реальном времени > События.

События Pixel Facebook

Чтобы установить на сайт скрипт Pixel Facebook и отслеживать базовые события интернет-магазина поможет плагин WooCommerce Conversion Tracking (20 000). Минимум настроек (ID Pixel и указать какие события отслеживать). В бесплатной версии отслеживает не все события, а только основные (Add to Cart, Initiate Checkout, Purchase, Complete Registration).

Для отслеживания события Search, я добавил скрипт в шаблон woocommerce.php

<?php elseif ( is_shop() ) : ?>
	<?php if ( is_search() ) : ?>
	<script>fbq('track', 'Search');</script>
	<?php endif; ?>
<?php endif; ?>

Отследить цель один раз за загрузку

Некоторые цели ставятся на кнопку, которую могут нажимать не один раз, например для раскрытия чего-либо. Ранее я вешал на эту кнопку атрибут onclick

<div onclick="ga ('send', 'event', 'nomer_mob', 'clickbron_mob'); yaCounter33555999.reachGoal('clickbron_open_mob'); return true;" id="bron-mobile">

А скриптом убирал его при первом нажатии

$('#bron-mobile').click(function() { $(this).removeAttr("onclick") });

Но есть более изящный способ jQuery, без прописывания атрибута onclick

$("#bron-mobile").one('click', function(){
	ga ('send', 'event', 'nomer_mob', 'clickbron_mob'); 
	yaCounter33555999.reachGoal('clickbron_open_mob'); return true;
});

Цели Woocommerce

// Yandex.Metrika goals
jQuery( document ).ready( function ($) {
    $( 'body' ).on( 'click', '.single_add_to_cart_button', function () { yaCounter88888888.reachGoal('korzina'); } );
    $( 'body' ).on( 'click', 'a.checkout, a.checkout-button', function () { yaCounter88888888.reachGoal('oformlenie-zakaza'); } );
    $( 'body' ).on( 'click', '#place_order', function () { yaCounter88888888.reachGoal('podtverdit-zakaz'); } );
});

Последнюю цель нужно делать по url. Url успешного заказа выглядит так:

https://site.ru/checkout/order-received/8177/?key=wc_order_JeoHlwq0KdlKr

т.е. вот эта часть является постоянной /checkout/order-received/

Разные интересные цели

Клик по виджету Calltouch (кнопка перехода в WhatsApp)

jQuery(document).ready(function () {
	window.ct('modules', 'widgets', 'subscribeToEvent', [{
	   object: 'button',
	   action: 'click',
	   callback: function(event) {
		  if (event.data.widgetType=='whatsapp-messenger'){ 
			ym(55775577,'reachGoal','whatsapp');
		  }
	   }
	}]);
});

Пользователь долистал до самого низа (чаще применительно для лэндингов)

// Событие долистал до самого низа
jQuery(window).scroll(function() {
    if  (jQuery(window).scrollTop() == jQuery(document).height() - jQuery(window).height()) {
        ym(55775577,'reachGoal','endland');
    }
});

Поделиться в соц. сетях: