Яндекс Метрика

Дано: Интернет магазин под управлением 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)

Теперь в Яндекс Метрике, в разделе Конверсии, мы можем ожидать результат её выполнения:

Вот так выглядит выполнение скрипта (цель отработала):

Обращу внимание, что можно было воспользоваться методом автоматического добавления цели «Отправка формы»:

В этом случае событие отправки будет распознано автоматически и после статистики нашей конкретной цели, ниже мы можем наблюдать фиксацию автоматической.

На этом всё! Парам-Парам-Пам!

Метка: Яндекс Метрика

Как добавить цель «JavaScript-событие» на кнопку «Добавить в корзину» в WooCommerce?

Требования к сайту

Добавление цели в Яндекс Метрики

Решение на JavaScript

Вариант №1

Вариант №2