Настраиваем и тестируем цели сервисов Яндекс Метрики и 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
Тестирование целей Яндекс Метрики
Протестировать цели Яндекс на работоспособность можно таким образом:
- добавляем к url странице с целью запрос/?_ym_debug=1
- открываем инструменты разработчика, вкладку Console
- там будет содержаться созданная цель и при успешной активации цели будет выводиться строка 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');
}
});
[site-socialshare]
// Yandex.Metrika goals
yaCounter88888888 тут надо написать номер счётчикаИ какие цели в яндекс метрике надо вешать на эти события?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'); } );
});Подскажите пожалуйста где вставить этот код?