Цели Яндекс.Метрики и Google.Analytics на одной странице

Здравствуйте, дорогие друзья!

Данное руководство предназначено для тех, кто настраивает цели конверсии и использует на своей странице сразу два сервиса для сбора статистики, а именно: Яндекс.Метрику и Google Analytics.

Отличия от стандартного использования только одного сервиса начинаются в настройке скриптов для учета целей. Расскажем об этом детальнее.

Шаг 1 

Установите код счетчиков и настройте цели конверсии в интерфейсе Яндекс.Метрика и Google Analytics по руководствам:

• Яндекс.Метрика
• Google Analytics

Если счетчики уже добавлены, а цели созданы, сразу приступайте ко второму шагу.

Шаг 2

Обратите внимание: цели на странице устанавливаются с помощью скриптов. В каждом из них есть моменты, которые вам потребуется отредактировать в соответствии с настройками вашего счетчика и целей.

После строк, в которые необходимо внести правки, добавлен символ двойного слеша (//) и подсказка, что именно требуется сделать. Подсказки, кстати, дополнительно мы пометили зеленым цветом. Будьте внимательны.

Определите тип настраиваемой цели конверсии:

Лид-форма с показом сообщения
Лид-форма с переходом на страницу благодарности
Попап (всплывающая) форма с показом сообщения
Попап (всплывающая) переходом на страницу благодарности
Цель для клика по кнопке или ссылке

Лид-форма с показом сообщения

Если после отправки данных с лид-формы вы хотите, чтобы осуществлялся показ сообщения, то скопируйте код и переходите к шагу 3: 

<!--Отслеживание цели Метрики+Analytics для статичных лид-форм с показом сообщения-->
<script>
    jq_144('#block-new2').on('submit', '.our_form', function() {
        // block-new2 - id формы
        var form = jq_144(this);

        jq_144('#lp_form_target').on('load', function() {

                if (!window.frames.lp_form_target.data_json ||
                    (window.frames.lp_form_target.data_json.length == 0)) {
                    yaCounterCOUNTER_ID.reachGoal('ORDER');
                    // ЗАМЕНИТЬ COUNTER_ID - номер вашего счетчика Метрики
                    // ЗАМЕНИТЬ ORDER - идентификатор вашей цели Метрики
                }
 if (!window.frames.lp_form_target.data_json ||
                    (window.frames.lp_form_target.data_json.length == 0)) {
                    gtag('event', 'send', { 'event_category': 'lead_form', 'event_action': 'action_submit' });
               // lead_form - категория ранее созданной цели Analytics
                // action_submit - действие цели Analytics
                // параметры 'send' и 'event' оставляем неизменными
}
                timerName255 = setInterval(function(){
                    // ЗАМЕНИТЬ 255 на id формы
                    if (jq_144('#form_submit_message').css('display') == 'block') {
                        clearInterval(timerName255); // ЗАМЕНИТЬ 255 на id формы
                    }
                }, 100);
        });
    });
	</script>

Лид-форма с переходом на страницу благодарности

Если хотите, чтобы после отправки данных с формы посетитель направлялся на страницу благодарности (или другую страницу), то 

- откройте в редакторе LPgenerator целевую страницу, на которой будут отслеживаться цели.

- установите результатом действия формы показ сообщения (вне зависимости от того, какой код вы будете использовать, результат действия формы должен быть именно такой):

- скопируйте этот код и переходите к шагу 3:

<!--Отслеживание цели Метрики+Analytics для статичных лид-форм с переходом на страницу 
благодарности-->
<script>
    jq_144('#block-newID').on('submit', '.our_form', function() {
        // block-newID - id формы

        var form = jq_144(this);

        jq_144('#lp_form_target').on('load', function() {

            if (!window.frames.lp_form_target.data_json ||
                (window.frames.lp_form_target.data_json.length == 0)) {
                yaCounterCOUNTER_ID.reachGoal('ORDER');
// ЗАМЕНИТЬ COUNTER_ID - номер счетчика Метрики
// ЗАМЕНИТЬ ORDER - идентификатор цели Метрики
            }
            if (!window.frames.lp_form_target.data_json ||
                (window.frames.lp_form_target.data_json.length == 0)) {
                    gtag('event', 'send', { 'event_category': 'lead_form', 'event_action': 'action_submit' });
               // lead_form - категория ранее созданной цели Analytics
                // action_submit - действие цели Analytics
                // параметры 'send' и 'event' оставляем неизменными
}
            timerName255 = setInterval(function() {
                if (jq_144('#form_submit_message').css('display') == 'block') {
                    clearInterval(timerName255); 
           //ЗАМЕНИТЬ 255 на id Вашей формы
                    document.location = 'http://myurl.com'; 
// ЗАМЕНИТЬ myurl.com на адрес вашей страницы благодарности
                }
            }, 1000);
        });
    });
</script>

Попап (всплывающая) форма с показом сообщения

Скопируйте код и переходите к шагу 3:

<!--Отслеживание цели Метрики+Analytics для попап форм с показом сообщения-->
<script>
jq_144(function($) {
    $(document).ready(function() {
        $('#overlay-block-new255').on('submit', 'form', function() {
            /* overlay-block-new255 - id формы, необходимо номер изменить на свой, 
            например, если у вас форма block-new11, 
            то значение должно выглядеть след. образом #overlay-block-new11
            */
            var $form = $(this);
            timerName255 = setInterval(function() {
                /* меняем 255 на номер своей формы, 
                например, если у вас форма block-new11, 
                то переменная должна выглядеть след. образом timerName11
                */
                if ($form.siblings('.confirmation').hasClass('show')) {
                    gtag('event', 'send', { 'event_category': 'lead_form', 'event_action': 'action_submit' });
                    // lead_form - категория ранее созданной цели Analytics
                    // action_submit - действие цели Analytics
                    // параметры 'send' и 'event' оставляем неизменными
                }
                if ($form.siblings('.confirmation').hasClass('show')) {
                    yaCounterCOUNTER_ID.reachGoal('ORDER');
                    // COUNTER_ID - номер счетчика Метрики
                    // ORDER - идентификатор цели Метрики
                    clearInterval(timerName255);
                    // меняем 255 на id формы
                }
            }, 1000);
        });
    });
});</script>

 Попап (всплывающая) переходом на страницу благодарности

- откройте в редакторе LPgenerator целевую страницу, на которой будут отслеживаться цели.

- установите результатом действия формы показ сообщения (вне зависимости от того, какой код вы будете использовать, результат действия формы должен быть именно такой):

- скопируйте этот код и переходите к шагу 3:

<!--Отслеживание цели Метрики для попап форм с переходом на стр.благодарности-->
<script>
jq_144(function($) {
    $(document).ready(function() {
        $('#overlay-block-new255').on('submit', 'form', function() {   /* в overlay-block-new255 заменить 255 на id формы */
            var $form = $(this);
            timerName255 = setInterval(function() {    /* в timerName255 заменить 255 на id формы */           
                if ($form.siblings('.confirmation').hasClass('show')) {
                    gtag('event', 'send', { 'event_category': 'lead_form', 'event_action': 'action_submit' }); 
                     // lead_form - категория ранее созданной цели Analytics
                     // action_submit - действие цели Analytics
                     // параметры 'send' и 'event' оставляем неизменными
                }
                if ($form.siblings('.confirmation').hasClass('show')) {
                    yaCounterCOUNTER_ID.reachGoal('ORDER');
                    //COUNTER_ID - номер счетчика Метрики
                    // ORDER - идентификатор цели Метрики
                    $('#overlay-block-new255').hide();
                    var secondsToRedirect = 1;
                    //секунд -1 до перенаправления

                    timerToRedirect = setInterval(function() {
                        if (secondsToRedirect <= 0) {
                            clearInterval(timerToRedirect);
                            document.location = 'http://myelochka.ru/stranitsa-527476/';
                            //адрес стр.благодарности, на который будет происходить переход
                        }
                        jq_144('#seconsLeft').text(secondsToRedirect);
                        secondsToRedirect--;
                    }, 1000 /*задержка между тиками отсчёта в миллисек .*/ );
                    clearInterval(timerName255);
                    // в timerName255 замените 255 на ID отслеживаемой формы
                }
            }, 100);
        });
    });
});
</script>

Цель для клика по кнопке

Скопируйте код и переходите к шагу 3:

<!--Отслеживание цели для Метрики+Analytics для клика по кнопке-->
<script>
      jq_144('#block-new38 a').click(function() { 
//ИЗМЕНИТЬ 38 на ID ЭЛЕМЕНТА
      yaCounterCOUNTER_ID.reachGoal('ORDER'); 
// ЗАМЕНИТЬ COUNTER_ID на НОМЕР СЧЕТЧИКА МЕТРИКИ 
// ORDER на ИДЕНТИФИКАТОР ЦЕЛИ МЕТРИКИ
               gtag('event', 'send', { 'event_category': 'lead_form', 'event_action': 'action_submit' });
               // lead_form - категория ранее созданной цели Analytics
                // action_submit - действие цели Analytics
                // параметры 'send' и 'event' оставляем неизменными
     });
</script>

Шаг 3

Откройте редактор страницы и с помощью инструмента «Скрипты» добавьте скопированный код на лендинг. Положение кода: «Перед тегом </BODY>».

Например:

Готово! Пересохраните страницу и проверьте учет целей.

Если что то не получилось напишите нам по адресу support@lpgenerator.ru