Как создать цель «JavaScript-событие» для Яндекс метрики

Цели в Яндекс метрике предназначены для отслеживания тех или иных действий на сайте.

Такая цель позволяет отслеживать события на сайте (нажатие кнопки, заполнение формы и пр.), при выполнении которых не меняется URL страницы.

Информация о достижении такой цели передается в Яндекс Метрику с помощью JavaScript. Таким образом можно отслеживать практически любые произвольные события.

Подробнее о целях вы можете почитать в справочнике.

Если вы пишите код для сайта вручную, то вы, наверное, не задаётесь вопросом, как повесить «JavaScript-событие» на форму. Но многие пользуются плагинами и сторонними сервисами, типа CRM форм Bitrix 24, которые не имеют идентификатора и возможности добавить в них что либо.

Для решения этой задачи мы будем использовать Java script. Давайте создадим динамический скрипт который будет добавлять событие onclick к любому элементу сайта.

<script>
document.addEventListener("DOMContentLoaded", function () {
    var buttons = [
        { selector: ".offers", goal: "sale" },
        { selector: "#call", goal: "call" },
    ];

    buttons.forEach(function(item) {
        var elements = document.querySelectorAll(item.selector);
        elements.forEach(function(element) {
            element.setAttribute("onclick", ym(XXXXXX, 'reachGoal', '${item.goal}'); return true;);
        });
    });
});
</script>

Здесь мы прописываем идентификаторы элементов (class или id) по которым будем отслеживать клики.

{ selector: ".offers", goal: "sale" },

В данном случае при клике по элементу с классом offers сработает цель sale.

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

Ситуация усложняется, когда вы не знаете идентификатор формы. Например, при использовании CRM форм Bitrix24 вы добавляете на сайт скрипт от битрикса, а форма формируется динамически и не имеет никаких идентификаторов.

Как же быть если вы создали несколько форм и хотите повесить на них разные цели при отправке формы?

Это возможно если вы знаете идентификатор контейнера (div) в котором будет находиться эта форма. Например, вы поместили скрипт от формы Bitrix в контейнер.

<div id="form1"></div>

Теперь мы точно знаем, что форма будет находиться в контейнере с идентификатором form1 и можем при помощи этого добавить событие onsubmit к этой форме.

<script>
document.addEventListener("DOMContentLoaded", function () {
    var forms = [
        { selector: "#form1", goal: "popup_form_submit" },
        { selector: ".offers", goal: "sale" },
    ];

    const observer = new MutationObserver(function (mutations, obs) {
        forms.forEach(function (item) {
            // Ищем контейнеры с указанным селектором
            var containers = document.querySelectorAll(item.selector);
            containers.forEach(function (container) {
                // Ищем форму на любом уровне вложенности в контейнере
                var form = container.querySelector("form");
                if (form && !form.getAttribute("onsubmit")) {
                    form.setAttribute("onsubmit", `ym(XXXXXXXX, 'reachGoal', '${item.goal}'); return true;`);
                }
            });
        });

        // Проверяем, все ли формы обработаны
        const allFormsProcessed = forms.every(item => {
            const containers = document.querySelectorAll(item.selector);
            return Array.from(containers).every(container => {
                const form = container.querySelector("form");
                return form && form.getAttribute("onsubmit");
            });
        });
        if (allFormsProcessed) {
            obs.disconnect();
        }
    });

    // Наблюдаем за изменениями в DOM
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
});
</script>