Дано: Интернет магазин под управлением WordPress + WooCommerce.
Задача: Отследить успешное добавление товара в корзину пользователем и передать эту информацию для аналитики в Яндекс Метрику.
Решение: решить подобную задачу можно разными способами: на стороне клиента, исключительно за счёт JavaScript и на стороне сервера — на PHP.
Требования к сайту
При создании цели важно учитывать:
- Форма должна быть создана с помощью тега form. Если форма сделана через теги div, она отслеживаться не будет.
- Отправка формы должна выполняться через элементы button type=»submit» и input type=»submit». Если отправка реализована через элемент button type=»button», цель достигаться не будет.
- Элементы button type=»submit» и input type=»submit» должны находиться внутри элемента form.
Если форма обрабатывается с помощью JavaScript, цель будет работать только для стандартного события onSubmit.
https://yandex.ru/support/metrica/simple-goal/form.html
Так как вёрстка в разных шаблонах оформления может быть разная, то своё решение мы начнём с исследования нашей кнопки в объектной модели документа (DOM), для того что бы понять удовлетворяет ли наш сайт описанным условиям.
Мы видим элемент кнопки (button) и наличие атрибутов, которые могут помочь «зацепиться» за этот элемент и «повешать» на него нужное нам событие. Также наша кнопка находится в теге <form> , что говорит о соответствии условиям описанных в документации Яндекс Метрики.
Забегая вперёд отмечу, что для точности передачи данных лучше вешать это событие на отправку формы, а не на клик по кнопки (хотя для некоторых задач подойдет именно клик, например, когда вы хотите просто проверить интерес к чему либо, к новому разделу на сайте).
Пример того, как делать не стоит!
<form action="" method="POST" type="submit">
<input name="name" placeholder="Ваше имя" required> <br>
<input type="email" name="mail" placeholder="Ваш email" required> <br>
<input type="button" onclick="yaCounterXXXXXX.reachGoal('form2'); return=true;" value="Отправить">
</form>В этом случае в Метрику будет отправлена информация по всем кликам, совершенным по кнопке “Отправить” — даже если посетитель не заполнил форму.
https://yandex.ru/blog/metrika-club/kak-pravilno-nastroit-reachgoal-v-formakh
Добавление цели в Яндекс Метрики
Первым делом, нам нужно создать цель в личном кабинете Яндекс Метрики:
Выбираем JavaScript-событие и присваиваем этому событию уникальное имя для дальнейшего отслеживания. В примере ниже, мы можем наблюдать, как после создания идентификатора цели ниже, мы можем наблюдать готовую строку кода, который необходимо будет вызвать на наше событие:
Готово! Часть задачи мы выполнили. В личном кабинете Яндекс Метрики создана наша цель:
Решение на JavaScript
Теперь, мы можем смело приступать к дальнейшей реализации на стороне сайта.
В качестве селектора (выбираемого из DOM элемента) у нас выступает тег form с классом «cart». Наш скрипт может выглядеть примерно так:
Вариант №1
document.addEventListener("DOMContentLoaded", (event) => {
const cartForm = document.querySelector("form.cart");
if(cartForm){
cartForm.addEventListener('submit', function () {
ym(XXXXXX, 'reachGoal', 'TARGET_NAME');
});
}
});- XXXXXX — номер вашего счетчика.
- TARGET_NAME — идентификатор цели.
Пояснение: мы получили наш элемент формы и наблюдем через подписку на событие submit за её успешной отправкой (добавление в корзину — это и есть в нашем случае отправка формы)
Вариант №2
...
<form action="" method="get" onsubmit="ym(XXXXXX, 'reachGoal', 'TARGET_NAME'); return true;">
...
</form>
...Если приглядеться к примеру указанному на сайте Яндекс Метрике, то мы можем заметить, что можем разместить вызов функции Яндекс Метрики (ym) прописав его в атрибут onsubmit нашей формы добавления товара в корзину.
В этом случае наш код немного изменится:
document.addEventListener("DOMContentLoaded", (event) => {
const cartForm = document.querySelector("form.cart");
if(cartForm){
cartForm.setAttribute("onclick", "ym(XXXXXX, 'reachGoal', 'TARGET_NAME'); return true;");
}
});- XXXXXX — номер вашего счетчика.
- TARGET_NAME — идентификатор цели.
Ну вот и всё!
Если вы всё сделали правильно, то при исследовании элемента непременно должны увидеть добавленный атрибут (справедливо для варианта №2)
Теперь в Яндекс Метрике, в разделе Конверсии, мы можем ожидать результат её выполнения:
Вот так выглядит выполнение скрипта (цель отработала):
Обращу внимание, что можно было воспользоваться методом автоматического добавления цели «Отправка формы»:
В этом случае событие отправки будет распознано автоматически и после статистики нашей конкретной цели, ниже мы можем наблюдать фиксацию автоматической.
На этом всё! Парам-Парам-Пам!
