Продающие лендинги от отдела
дизайна LPgenerator

Используем технологии:
4U, AIDA, ХПВ, психология влияния Р. Чалдини, управление взглядом
  • 4U
  • AIDA
  • ХПВ
  • психологии влияния Р. Чалдини
  • управления взглядом
  • нейромаркетинг
Готовность от 7 дней

Как подключить Яндекс Метрика к целевым страницам LPgenerator?

Метрика

Внимание! В данной статье предложены фрагменты кода для копирования. Чтобы скопировать код, наведите на него курсор мышки, в появившемся в правом верхнем углу окошке нажмите на первой иконке. После этого код будет скопирован в буфер обмена. Чтобы вставить его в редактор платформы LPgenerator, используйте сочетание клавиш Ctrl+V или щелчок правой кнопкой мыши → вставить.

Метрика — это бесплатный сервис от Яндекс, предназначенный для оценки ключевых показателей эффективности веб-страниц, анализа поведения online посетителей, эффективности рекламных кампаний и входящего SEO-трафика.

Платформа LPgenerator предоставляет все необходимую статистику для качественной работы и оптимизации landing pages, но если для вас принципиально использовать аналитику от Яндекс, то вашему вниманию предлагается подробное руководство.

Шаг 1. Настроить специальный код счетчика Яндекс.

Для этого:

1. Перейдите по ссылке: https://metrika.yandex.ru/

2. Нажмите "Перейти"

Перейти

Введите данные вашей учетной записи в Яндекс (пароль и логин совпадают с учетными данными Яндекс.Почты и прочих сервисов Яндекса).

Если у Вас нет аккаунта, нажмите кнопку “Зарегистрироваться”.

метрика

3. После входа в метрику, нажмите «Добавить счетчик»:

1

4. Далее произвольно назовите счетчик и введите название домена, на котором находится ваш лендинг, в поле «Домен сайта».

Обратите внимание:

  • Метрика не принимает название со слешами, например, www.mysite.ru/name. То есть необходимо ввести только название домена, например, www.mysite.ru
  • Вводить нужно адрес с www
  • Отметьте галочкой опцию "Принимать данные только с указанных доменов". Это позволит не учитывать просмотры страницы, когда она открыта в режиме предпросмотра из редактора LPgenerator.

В итоге должно получится следующее:

2

5. Поставьте галочку «Я принимаю условия Пользовательского соглашения» и нажмите «Продолжить».

3

Далее откроется окно. Здесь можно задать необходимые настройки счетчика перед  установкой его кода на страницу:

Настройки

Перейдите в раздел "Код счетчика" и укажите галочками функции, которые будете использовать.

Код

Краткое описание каждой из функций находится под иконкой вопроса. Для стандартной настройки достаточно отметить только то, что указано на скриншоте.

При желании можно установить галочку «Асинхронный код»:

Код

В этом случае код счетчика Метрики будет загружаться без приостановки других скриптов. В случае использования данной настройки код счетчика потребуется установить на лендинг в положение внутри тега <HEAD>:

положение

Подробнее об установке кода на страницу читайте ниже.

Отдельных пояснений требует настройка инструмента «Вебвизор»:

  • Вебвизор записывает и анализирует поведение online посетителей. Для использования данного инструмента, необходимо активировать его на вкладке «Вебвизор». По умолчанию он выключен и записывать данные не будет.

Вебвизор

Выберите способ записи содержимого вебвизора :

  • Из браузера: код счетчика берет содержимое уже загруженной страницы непосредственно из браузера посетителя. Этот вариант менее ресурсоемок, но содержимое страницы может записаться с искажениями.
  • Загружать с сайта: код счетчика осуществляет отдельную загрузку страницы во время ее просмотра посетителем и отправляет ее содержимое в Метрику. Этот вариант позволяет записывать более точную копию того, что видел посетитель, но создает дополнительную нагрузку на сайт.

Впишите адрес страницы с www

Остальные настройки можно оставить по умолчанию.

Вебвизор

Для справки:

  • Настройка «Архивировать страницы с сайта» означает, что робот Яндекс будет периодически сохранять изменившиеся страницы вашего сайта.
  • Настройка «От имени анонимного посетителя» означает, что в плеер будет загружаться такая же страница, какую увидел бы новый посетитель, впервые пришедший на сайт.

Не забудьте сохранить настройки:

Вебвизор

Шаг 2. Скопировать настроенный код счетчика и вставить его на страницы LPgenerator.

Используйте данный код на страницах, для которых вы хотите учитывать статистику.

Целевые страницы должны находится на одном домене. Например: если www.testmetrika.ru — домен, то страницы должны иметь название www.testmetrika.ru/название страницы.

Итак, после настроек параметров счетчика вам нужно скопировать сгенерированный код в разделе "Настройка" - "Код счетчика".

Для этого кликните в нижнее поле с кодом и скопируйте его:

код

Далее откройте необходимую целевую страницу в редакторе платформы LPgenerator и нажмите инструмент «Скрипты».

скрипты

Нажмите кнопку «Добавить скрипт» и вставьте скопированный код после тега <BODY>. Сохраните изменения.

Положение скрипта

Обратите внимание:

  • данные по вашей странице начнут отображаться не сразу после установки кода счетчика. На обновление кэша Яндекс порой требуется несколько часов. Особенно это касается данных по вебвизору;
  • после внесения изменений в настройки Метрики счетчик нужно пересохранять, а его код копировать и добавлять на страницу заново.

Шаг 3. Просмотр и анализ собранных данных.

1. Для того, чтобы начать работать с счетчиком (если вышли из Метрики), кликните по нему:

Статистика

2. обратите внимание, статус счетчика должен быть зеленым. Это означает, что боты Яндекс могут посещать страницу

Обратите внимание, если статус красный: 

  • проверьте наличие кода счетчика на странице (не забудьте сохранить лендинг после добавления кода)
  • проверьте наличие www в адресе домена в настройках счетчика
  • подождите некоторое время, статус обновляется не сразу

Подробнее о статусах счетчика вы можете прочитать здесь

3. Далее кликните по названию счетчика. Откроется свода статистики за определенный период.

Сводка

Здесь также можно настроить фильтр по срокам статистики:

Фильтры

4. В метрике доступно множество отчетов, в которых можно увидеть различные статистические данные, собранные роботами Яндекс.

Отдельно вынесена информация по записям  Вебвизора:

Вебвизор

5. При попытке просмотреть записи, вы, вероятно, увидите сообщение:

«Нет данных с выбранными условиями или вебвизор не подключен в настройках счетчика».

Причины может быть две:

  • данные о посещениях еще не загрузились, для загрузки данных вебвизора иногда требуется несколько часов;
  • вебвизор не включен и не отмечен в настройках счетчика.

Возвращаемся в настройки счетчика и проверяем параметры Вебвизора. Напомним, должен быть выбран способ «Из браузера» либо «Загружать с сайта».

Вебвизор

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

Подробнее о вебвизоре и остальных инструментах Яндекс.Метрики вы можете прочитать здесь.

Если данные для вебвизора загрузились, то вы увидите список записей. Нажмите «Воспроизвести посещение», чтобы увидеть как вел себя посетитель на странице.

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

Вебвизор

Шаг 4. Цели Яндекс.Метрики.

Итак, с основными инструментами мы разобрались, теперь поговорим о настройке целей.

Цель — это желаемый результат проведения рекламной кампании, событие на лендинге, которое является для вас индикатором успешности рекламной кампании (клик по кнопке, заполнение лид-формы или переход по ссылке).

Подробнее о видах целей читайте здесь.

Как настроить цель Метрики?

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

1. Зайдите в настройки счетчика и кликните раздел "Цели":

Цели

2. Нажмите «Добавить цель»:

Цель

3. Перейдите во вкладку «JavaScript Событие».

  • Введите название для цели. Название может быть произвольным.
  • Введите идентификатор цели. Называть идентификатор можете как угодно, но рекомендуем прописать ORDER.

Внимание: для каждой цели должно быть задано свое уникальное название идентификатора!

Именно этот идентификатор мы потом будем использовать в скрипте для целей.

Цель

4. Нажмите кнопку «Добавить цель» и сохраните изменения в счетчике:

Сохранить

5. Далее скопируйте наш код, представленный ниже, используя кнопку.

Копировать код

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

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

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

<!--Отслеживание цели Метрики для статичных лид-форм с показом сообщения-->
<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)) {
                    yaCounterИДСЧЕТЧИКА.reachGoal('ORDER');
                    // ЗАМЕНИТЬ ИДСЧЕТЧИКА - на номер вашего счетчика
                    // ЗАМЕНИТЬ ORDER - на идентификатор вашей цели
                }
 
                timerName255 = setInterval(function(){
                    // ЗАМЕНИТЬ 255 на id формы
                    if (jq_144('#form_submit_message').css('display') == 'block') {
                        clearInterval(timerName255); // ЗАМЕНИТЬ 255 на id формы
                    }
                }, 100);
        });
    });
 </script>

Если хотите, чтобы после отправки данных с формы посетитель направлялся на страницу благодарности, то скопируйте этот код (обратите внимание на строки со словом ЗАМЕНИТЬ):

<!--Отслеживание цели Метрики для статичных лид-форм с переходом на стр.благодарности-->
<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)) {
                yaCounterИДСЧЕТЧИКА.reachGoal('ORDER');
// ЗАМЕНИТЬ ИДСЧЕТЧИКА - на номер счетчика
// ЗАМЕНИТЬ ORDER - идентификатор цели
            }
 
            timerName255 = setInterval(function() {
                if (jq_144('#form_submit_message').css('display') == 'block') {
                    clearInterval(timerName255); 
           //ЗАМЕНИТЬ 255 на id Вашей формы
                    document.location = '//myurl.com'; 
// ЗАМЕНИТЬ myurl.com на адрес вашей страницы благодарности
                }
            }, 1000);
        });
    });
 </script>

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

Установите результатом действия формы показ сообщения.

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

Результат формы

После этого нужно добавить скопированный скрипт на страницу. Приведем пример с первым скриптом.

Нажмите на инструмент «Скрипты» в редакторе и вставьте скопированный код перед тегом </BODY>. Не забудьте назвать и сохранить скрипт.

6. Далее в скрипте нужно изменить параметры:

block-new2 — это идентификатор формы, для которой будет учитываться цель.

Идентификатор можно посмотреть в расширенных свойствах формы справа. Кликните один раз по полям формы:

идентификатор

Меняем в коде:

код

ИДСЧЕТЧИКА — номер вашего счетчика в Яндекс.Метрике.

Посмотреть номер счетчика можно в его настройках:

ИД

Полностью заменяем надпись ИДСЧЕТЧИКА в коде на номер счетчика:

метрика

ORDER — если у Вас одна цель и ее идентификатор ORDER (как указано в нашем примере), то переименовывать ее не нужно.

Идентификатор цели уточните в настройках счетчика, в разделе «Цели»:

Цель

Меняем в коде. В нашем примере название - идентификатор цели - ORDER в скрипте и счетчике совпадают:

Идентификатор цели

4. Готово. Теперь если посетитель заполнит данные и отправит их через форму, в Яндекс.Метрике отобразится цель.

Статистические данные отображаются в "Стандартных отчетах", в разделе "Конверсии":

Отчет

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

Цель

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

Шаг 5. Настройка целей для нескольких лид-форм.

Обратите внимание: в Яндекс.Метрике количество созданных целей должно быть равно количеству лид-форм, статистику которых вы хотите отслеживать. То есть каждая цель будет использоваться для отдельной лид-формы.

Для отслеживания одной цели с одной формы используется скрипт, описанный выше. Для того, чтобы отследить цель с еще одной формы, продублируйте скрипт и вставьте его перед тегом </BODY>. Замените в скрипте ID формы, номер счетчика и идентификатор цели (block-new2, ИДСЧЕТЧИКА, ORDER ) так, как это было описано выше.

Шаг 6. Настройка целей для кликов по ссылкам и кнопкам.

Если вам необходимо отслеживать такие конверсионные действия как клик по кнопке или ссылке без отправки данных с форм, то выполните действия, описанные ниже.

Сразу поясним — принцип отслеживания кликов по элементам такой же:

необходимо добавить в Яндекс.Метрике нужные цели, вставить новый скрипт, заменить в скрипте параметры ( ID элемента, номер счетчика и идентификатор цели).

Информацию о том, где посмотреть номер счетчика и идентификатор цели, смотрите выше, в разделе «Цели Яндекс.Метрики», шаг 4.

Итак, необходимо скопировать скрипт: 

<!--Отслеживание цели Метрики для клика по кнопке-->
<script>
      jq_144('#block-new38 a').click(function() { //ИЗМЕНИТЬ ID ЭЛЕМЕНТА
      yaCounterИДСЧЕТЧИКА.reachGoal('ORDER'); // ЗАМЕНИТЬ НОМЕР СЧЕТЧИКА 
                                              // И ИДЕНТИФИКАТОР ЦЕЛИ
     });
</script>

Положение скрипта установить «Перед тегом </BODY>»:

3. Меняем в скрипте номер вашего счетчика ИДСЧЕТЧИКА:

4. Меняем идентификатор цели ORDER.

Если идентификатор вашей цели в Яндекс.Метрике называется ORDER, то менять его в скрипте не нужно.

5. Меняем ID элемента, по которому будет отслеживаться статистика: #block-new38.

6. Для учета цели для каждого элемента предназначен свой скрипт. Поэтому, если хотите учитывать цели с нескольких элементов, надо вставить скрипт несколько раз и прописать в каждом скрипте ID элемента, идентификатор цели. Номер счетчика остается прежним.

7. Сохраняем скрипт и страницу. Обратите внимание: данные в Яндекс.Метрике могут отобразиться не сразу.

Напоминаем, статистические данные целей отображаются в разделе «Отчеты» в подпункте «Конверсии»:

Отчеты

Шаг 7. Настройка целей для виджета “ Popup “

Разница в настройках будет зависеть от результата действия формы. Результатом может быть показ сообщения или переход на страницу благодарности.

1. Если результатом заполнения формы стоит показ сообщения.

Попап

Показать сообщение

А) Скопируйте данный код:

 

<!--Отслеживание цели Метрики для попап форм с показом сообщения-->
<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')) {
                        yaCounterИДСЧЕТЧИКА.reachGoal('ORDER');
                        // ИДСЧЕТЧИКА - номер счетчика.
                        // ORDER - идентификатор цели
                        clearInterval(timerName255);
                        // меняем 255 на id формы
                    }
                }, 1000);
            });
        });
    });
</script>

Б) Далее откройте страницу в редакторе LPGenerator. Нажмите инструмент “Скрипты”. Добавьте новый скрипт, назовите его. Установите положение скрипта “Перед тегом </BODY>”. Сохраните изменения.

Цель попап

В) Далее в скрипте нужно измените параметры, отмеченные на скриншоте:

Замена в коде

Красным цветом выделены идентификаторы, вместо которых нужно вставить ID Вашей формы popup.

Узнать его можно здесь:

Идентификатор элемента

Обратите внимание: вставлять нужно не весь идентификатор #block-new32, а только его числовой номер 32.

Желтым цветом в коде выделен номер счетчика в Яндекс.Метрике. Вместо выделенного номера вставьте номер Вашего счетчика.

Синим цветом выделен идентификатор цели в Яндекс.Метрике. Он должен соответствовать идентификатору Вашей цели в Метрике. ( Если в Метрике он указан, как ORDER3, то в коде, соответственно, должно быть указано значение ORDER3 ).

Г) Готово! Осталось сохранить изменения в редакоре страницы.

Обратите внимание: данные в Яндекс.Метрике могут отобразиться не сразу.

2. Если результатом заполнения формы должен быть переход на страницу благодарности.

А) Скопируйте данный код:

 

<!--Отслеживание цели Метрики для попап форм с переходом на стр.благодарности-->
<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')) {
 
                        yaCounterИДСЧЕТЧИКА.reachGoal('ORDER');
                        //ИДСЧЕТЧИКА - номер счетчика.
                        // ORDER - идентификатор цели
                        $('#overlay-block-new255').hide();
                        var secondsToRedirect = 1;
                        //секунд -1 до перенаправления
 
                        timerToRedirect = setInterval(function() {
                            if (secondsToRedirect <= 0) {
                                clearInterval(timerToRedirect);
                                document.location = 'Адрес страницы благодарности';
//адрес страницы благодарности, на который будет происходить переход
                            }
                            jq_144('#seconsLeft').text(secondsToRedirect);
                            secondsToRedirect--;
                        }, 1000 /*задержка между тиками отсчёта в миллисекундах .*/ );
                        clearInterval(timerName255);
                        //timerName255 - меняем 255 на id формы
                    }
                }, 100);
            });
 
        });
    });
</script>

 

Б) Вставьте данный код так же, как и предыдущий, в том же положении - "Перед тегом </BODY>".( См. Пункт Б первого действия )   В) В данном коде измените следующие параметры:

Замена в коде

Красный цветом выделены идентификаторы, вместо которых нужно вставить ID Вашей формы popup. (Действие аналогично пункту В предыдущей настройки ).

Зеленым цветом в коде выделен номер счетчика в Яндекс.Метрике. Вместо выделенного номера вставьте номер Вашего счетчика.

Фиолетовым цветом выделен идентификатор цели в Яндекс.Метрике. Он должен соответствовать идентификатору Вашей цели в Метрике. ( Если в Метрике он указан, как ORDER5, то в коде, соответственно, должно быть указано значение ORDER5).

Синим цветом выделен адрес страницы благодарности, на которую должен осуществляться переход.

Адрес должен быть вида: //mysite.ru/thanks/, то есть ссылка на страницу, скопированная из адреса страницы в браузере:

Адрес

Г) Для кнопки запуска “Попап”, в свойствах, результатом действия необходимо поставить - показ сообщения.

 

Результат формы

Переход на страницу благодарности будет осуществляться при помощи кода. 

Д) Готово! Осталось сохранить изменения в редакоре страницы. 

На этом краткий обзор возможностей Яндекс.Метрики и алгоритма ее интеграции на целевые страницы платформы LPgenerator можно считать завершенным. Надеемся, что данная информация была полезной для вас. По любым вопросам обращайтесь в службу техподдержки по адресу support@lpgenerator.ru.

11-02-2014

LPgenerator — профессиональная Landing Page платформа для увеличения продаж вашего бизнеса

  • Более 500 шаблонов в галерее
  • Инструменты оптимизации конверсии
  • Статистика и сквозная аналитика
  • CRM для работы с заявками и телефония
  • Визуальный редактор с расширенным функционалом
  • Быстрая техническая поддержка
  • Множество интеграций
  • Окупаемость инструмента — от 7 дней
blog comments powered by Disqus
copyright © 2011–2017 by LPgenerator LLC. Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "ЛПгенератор".