You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today.

Нужно отслеживать конверсии со строннего iFrame? Вот пример реализации

Аналитика

Добрый день, уважаемые подписчики. К нам обратилась туристическая компания "Экскурсариум", которая занимается организацией экскурсий для школьников по Москве и Московской области.


Им необходимо было настроить цели о записи на экскурсию для метрики и аналитики, но сложность заключалась в том, что запись происходит на сплошном JavaScript, а также заявки передаются через iFrame при помощи сервиса exaoffice.


В этом случае невозможно отследить события, которые происходят внутри iFram. Мы связались с сервисом exaoffice, чтобы уточнить возможность передачи событий в системы аналитики, но такой возможности у них не оказалось. Но есть возможность встроить любой скрипт, через личный кабинет. Это то, что нам нужно, и теперь расскажу подробно про этапы работ и про наш пример реализации отслеживания целей систем аналитики для стороннего iFrame :

Установка счетчиков, целей и GTM на сайт

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


Начнем с рассмотрения кода отправки заявки для внедрения в iFrame:

На странице с формой на сайте в момент успешной отправки формы (после клика на кнопку "Подтвердить заказ") вызываем следующую JavaScript функцию:

function sendMyData() {
try {
var postObject = JSON.stringify({
event: 'leadForm',
data: 'submit'
});
 
parent.postMessage(postObject, 'Домен');
} catch (e) {
window.console && window.console.log(e);
}
}

Для приема этих событий в GTM создаем тег с названием "Слушатель событий iFrame":

  • Тип тега будет "Пользовательский HTML"
  • Сам скрипт выглядит вот так:
  • <script type="text/javascript">

        (function (window) {

            addEvent(window, 'message', function (message) {

                try {

                    var data = JSON.parse(message.data);

                    var dataLayer = window.dataLayer || (window.dataLayer = []);

                    if(data.event) {

                        dataLayer.push({

                            'event': data.event,

                            'postMessageData': data

                        });

                    }

                }

                catch (e) {}

            });

            

            function addEvent(el, evt, fn) {

                if(el.addEventListener) {

                    el.addEventListener(evt, fn);

                }

                else if (el.attachEvent) {

                    el.attachEvent('on' + evt, function (evt) {

                        fn.call(el, evt);

                    });

                }

                else if (typeof el['on' + evt] === 'undefined' || el['on' + evt] === null) {

                    el['on' + evt] = function (evt) {

                        fn.call(el, evt);

                    }

                }

            }

        })(window);

    </script>

  • Триггер активации у нас будет "All Pages"

  • Настройка целей для Метрики и Аналитики

    Переходим непосредственно к настройки целей. Триггер на события будет общий, и он выглядит вот так:


    Цель для Метрики:


    Цель для Аналитики:


    На этом в принципе все. Работоспособность целей мы проверяем отправкой тестовой заявки, и проверяем ее в Аналитике в отчете "Конверсии в реальном времени"


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

    Поделитесь этим постом

    Автор

    Семёнов Александр

    Профессионал в области интернет рекламы и коммерции. Делюсь своими наработками с другими в этом блоге.

    Комментарии:

    Комментарии пока отсутствуют.

    Напишите комментарий