Блог
Все рубрики
  • Все рубрики
  • Бизнес
  • Вы спрашивали
  • Кейсы
  • Маркетинг
  • Продуктивность
  • Что нового

Как правильно настроить Google Analytics для поп-апа LeadPages

Кейсы

В статье рассмотрим как настроить и вставить аналитику от Google в поп-ап от сервиса LeadPages. Если вы собираете email-адреса с помощью LeadBox и ставите в настройках обычный код отслеживания, то теряете всю ценную информацию – откуда пришел человек и как нашел вашу форму подписки. Мы это исправим!

Окно редактирования поп-апа LeadBox
Окно редактирования поп-апа LeadBox

В чем проблема Google Analytics и LeadBox?

Рассмотрим на примере. У вас есть сайт со страницей подписки, где за оставленный в поп-апе email вы, например, отправляете несколько первых глав своей книги в PDF.

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

Тогда вы сможете определить качественные источники трафика и получать еще больше подписчиков! Все что вам нужно, это отметить UTM-метками ссылки и смотреть на поведение посетителей на сайте. На практике не все так просто, и вот почему:

  1. Ваш сайт размещен, скажем, на сайте primer.ru
  2. Поп-ап создан на Leadpages и его адрес primer.leadpages.co
  3. Хотя поп-ап заполняется у вас на странице, фактически форма сбора подписчиков хранится на сервере Leadpages (используется механизм iframe). Посетитель в одном окне браузера взаимодействует с содержимым от двух разных веб-адресов.

А что Google Analytics? Как вы уже поняли, поп-ап живет своей жизнью по адресу primer.leadpages.co. Поэтому,  с точки зрения кода отслеживания GA, человек, который пришел на страницу подписки и заполнил форму  – 2 разных посетителя. 

В настройках LeadBox в разделе Tracking code есть поля для вставки кода аналитики
В настройках LeadBox в разделе Tracking code есть поля для вставки кода аналитики

Код на вашем сайте зафиксирует UTM-метки для отчетов и проследит путь посетителя до страницы подписки. Потом срабатывает код GA, который вы прописали в настройках LeadBox. С этого момента в отчетах возникает еще один посетитель, уже без истории поведения на вашем сайте.

С точки зрения кода отслеживания GA, человек, который пришел на страницу подписки и заполнил форму – 2 разных посетителя.

Как настроить аналитику для LeadBox и видеть полный путь подписчика

Шаг 1. Добавить адрес LeadPages в список исключаемых источников.

Войдите в свой аккаунт Google Analytics. Сверху выберите вкладку Администратор. В настройках ресурса нужно выбрать пункт Код отслеживания и подпункт Список исключаемых источников перехода.

В аккаунте Google Analytics
В аккаунте Google Analytics

Нажмите кнопку Добавить исключения источников переходов, чтобы добавить адрес LeadPages в список. Уточнить его вы можете можете в личном кабинете на сервисе, в разделе Custom Domains.

Добавили поддомен на сервисе Leadpages в список
Добавили поддомен на сервисе Leadpages в список

Теперь переходы со страниц созданных на LeadPages не будут расцениваться как реферальный трафик (переходы с внешних сайтов).

Шаг 2. Изменить код отслеживания на сайте.

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

ga('create', 'UA-XXXXX-Y', 'auto');

Теперь изменим эту строчку и добавим еще две (вместо primer.ru и primer.leadpages.co используйте ваши домены):

ga('create', 'UA-XXXXX-Y', 'auto', {allowLinker: true});
ga('require', 'linker');
ga('linker:autoLink', ['primer.ru', 'primer.leadpages.co']);

Шаг 3. Добавить JavaScript, который передает уникальный идентификатор клиента (посетителя) в iframe с поп-апом.

Найдем эту стандартную строку

ga('send', 'pageview');

и перед ней добавим следующие строки:

ga(function(tracker) {
  var clientId = tracker.get('clientId');

  setTimeout(function() {
    var iframes = document.getElementsByTagName('iframe');

    for (var i = 0; i < iframes.length; i++) {
      var iframe = iframes[i];
      var iframeSrc = iframe.src;

      if (iframeSrc.indexOf('primer.leadpages.co') !== -1) {
        iframe.contentWindow.postMessage({
          clientId
        }, iframeSrc);
      }
    }
  }, 3000);
});

Шаг 4. Добавить JavaScript для отслеживания в LeadBox. Вместо создания нового идентификатора, принимаем уникальный идентификатор клиента созданный на вашем сайте.

Перейдем на сервис LeadPages, где откроем поп-ап в режиме редактирования. В поле Extra head в разделе Tracking code ставим такой код:

ВАЖНО: вместо primer.ru используйте свой домен, вместо UA-XXXXX-Y – свой идентификатор отслеживания

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  window.addEventListener('message', function(event) {
    var origin = event.origin || event.originalEvent.origin;
    var data = event.data;

    if (
        origin !== 'http://primer.ru' ||
        data === null || 
        typeof data !== 'object' || 
        !data.hasOwnProperty('clientId')
      ) {
      return;
    }

    ga('create', 'UA-XXXXX-Y', 'auto', {clientId: data.clientId}, {'allowLinker': true});

    ga('require', 'linker');
    ga('linker:autoLink', ['primer.ru', 'primer.leadpages.co']);

    ga('send', 'pageview', 'Название поп-апа');
  });
</script>

Выполнив эти шаги, вы получите более корректную картину поведения подписчика.

Как проверить? Создайте уникальную utm-метку для теста. Зайдите на свой сайт и воспользуйтесь формой подписки. В аналитике в отчете по тестовой кампании, вы должны увидеть что на сайт был ОДИН пользователь, ОДНА сессия и соответствующее число просмотренных страниц (поп-ап считается за просмотр).

Показать комментарии