База знаний
по возможностям платформы

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

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

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

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

Шаг 1 

Установите код счетчиков и настройте цели конверсии в интерфейсе Яндекс.Метрика и 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)) {
                    ga('send', 'event', 'lead_form', '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)) {
                    ga('send', 'event', 'lead_form', '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')) {
                    ga('send', 'event', 'lead_form', '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-new68').on('submit', 'form', function() {
            var $form = $(this);
            timerName68 = setInterval(function() {
                if ($form.siblings('.confirmation').hasClass('show')) {
                    ga('send', 'event', 'lead_form', 'action_submit'); 
                     // lead_form - категория ранее созданной цели Analytics
                     // action_submit - действие цели Analytics
                     // параметры 'send' и 'event' оставляем неизменными
                }
                if ($form.siblings('.confirmation').hasClass('show')) {
                    yaCounter34158410.reachGoal('ORDER');
                    //COUNTER_ID - номер счетчика Метрики
                    // ORDER - идентификатор цели Метрики
                    $('#overlay-block-new68').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(timerName68);
                    // в timerName255 замените 255 на ID отслеживаемой формы
                }
            }, 100);
        });
    });
});
</script>

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

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

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

Шаг 3

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

Например:

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

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

Была ли эта статья полезной?
Пользователи, считающие этот материал полезным: 2 из 2
Еще есть вопросы? Отправить запрос

Комментарии

  • Avatar
    andrey

    что то не понятно в аналитикс всего одна цель создается ?

  • Avatar
    Сергей Мызин

    Здравствуйте, Андрей.

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

  • Avatar
    Борис

    Добрый день! Непонятно место в коде "в timername255 замените 255 на id формы". Где посмотреть этот id?

  • Avatar
    Сергей Мызин

    Здравствуйте, Борис.

    Имеется в виду идентификатор формы, который вы указываете в первой строчке скрипта. Например, если идентификатором формы является `#block-new82`, то `timerName` также должен быть `timerName82`.

    Посмотреть идентификатор элемента можно в правом меню редактора, перейдя на вкладку "Расширенные" - http://i.imgur.com/ZmKMnXK.jpg

  • Avatar
    Борис

    Понял, спасибо!

  • Avatar
    Никита

    Чтобы сделать несколько целей в гугле что нужно вместо "lead_form" и "action_submit" писать при создании новой цели?

  • Avatar
    Сергей Мызин

    Здравствуйте, Никита.

    Вы можете указать любое название категории и действия, при создании новой цели в Google Analytics.

    Т.е. вы можете вместо `lead_form` (название категории цели) для одной формы указать `lead_form1`, для второй формы `lead_form2` и т.д. Тоже самое касается и названия действия (`action_submit`). Оно может быть любым и также быть указано для одной формы `action_submit1`, для второй формы `action_submit2` и т.д.

    Подробное описание по созданию и настройке целей в Google Analytics вы можете найти в соответствующем руководстве: https://lpgenerator.zendesk.com/hc/ru/articles/200902503

    Если у вас остались какие то трудности или сложности в настройке целей, то вы всегда можете обратиться к нам на почту - support@lpgenerator.ru

На базе технологии Zendesk