Категории

Подпишись
на новые статьи

Просто введи свой e-mail:

Автособытие GTM при успешной отправке формы на Ajax JQuery

Довольно часто приходится настраивать события для форм, где данные передаются при помощи Ajax с использованием библиотеки JavaScrip - JQuery. Простой скрипт поможет Вам настроить такое отслеживание без вмешательства в код страницы.

Для этого создаем пользовательский тег Google Tag Manager в который вставляем код:

<script> 
$(document).ajaxSuccess(function(event, request, settings) {
   dataLayer.push({
          'event': 'ajaxSuccess',
          'ajaxSuccessData': {
            'url': settings.url || '',
            'data': settings.data || '',
            'responseText': request.responseText || ''
          }
        });
});
</script>

Тег должен активироваться на нужной странице по готовности DOM. Создайте для этого соответствующий триггер.

Если у Вас Ajax используется только для формы заявки, то достаточно настроить триггер на пользовательское событие ajaxSuccess.

Если страница более сложная, например есть диманимеский контент или еще что-то, что использует ajax, то более подробную информацию вы пожете получить из переменной  уровня данных ajaxSuccessData

url - url куда отсылались данные ajax

data - данные, которые отсылались

responseText - ответ, который пришел от сервера

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

Автор: Дата создания:

Комментарии (14)

  1. Андрей:
    ноя 18, 2016 at 12:52

    А как все это передать в аналитикс? Можно поподробней пожалуйста.

    Ответить

    1. admin:
      ноя 19, 2016 at 08:16

      На событие ajaxSuccess делаете триггер, делаете переменную уровня данных с теми данными, по которым хотите определить нужную отправку данных. Например, если вы получаете ответ от сервера "ок" после успешной отправки формы, то создаете переменную ajaxSuccessData.responseText. Допустим переменную назвали response, В условии активации триггера аналитики с событием указываете, что response должно быть равно "ок"

      Ответить

  2. Татьяна:
    дек 13, 2016 at 01:00

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

    Ответить

    1. Андрей:
      дек 13, 2016 at 01:28

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

      Ответить

      1. Татьяна:
        дек 13, 2016 at 01:51

        http://strategy2017.constructor.biz.ua/
        буду благодарна, если поможете разобраться. а то мы тут вместе с разработчиками уже сходим с ума...

        Ответить

        1. Андрей:
          дек 13, 2016 at 04:46

          Посмотрел не с телефона, но предположу, что проблема из-за асинхронности очереди в GTM и не только на айфоне. Сразу за проверкой формы и отправкой post запроса изменяется url на страницу "спасибо", и событие GTM в браузере айфона может просто не успеть отработать - на момент, когда браузер доходит до этой строчки кода в dataLayer есть еще только последний "клик". Попросите разработчиков строку window.location.href = o.link; файла all.js, изменить на setTimeout(function() {window.location.href = o.link;}, 0);
          Но раз при успешной отправки формы происходит переход на другую страницу, то можно цель настроить просто на посещение страницы "спасибо".

          Ответить

          1. Татьяна:
            дек 13, 2016 at 05:27

            получилось! спасибо большое!
            необходимо было именно решение на событие успешной отправки)

            Ответить

            1. Андрей:
              дек 13, 2016 at 08:34

              Отлично, рад был помочь

  3. Анастасия:
    фев 24, 2018 at 01:45

    Добрый день!
    Подскажите пожалуйста что делать в этом случае.
    Для того, чтобы узнать какую переменную тянуть, в консоли отправила запрос на уровень данных и получила пустые объекты, не к чему подвязать ссылку:
    dataLayer
    (3) [{…}, {…}, {…}, push: ƒ]
    0
    :
    {gtm.start: 1519467262378, event: "gtm.js", gtm.uniqueEventId: 0}
    1
    :
    {event: "gtm.dom", gtm.uniqueEventId: 2}
    2
    :
    {event: "gtm.load", gtm.uniqueEventId: 3}
    push
    :
    ƒ ()
    length
    :
    3
    __proto__
    :
    Array(0)

    Ответить

    1. Алексей:
      фев 27, 2018 at 05:24

      Такая же фигня. Пустые объекты.

      Ответить

  4. Алексей :
    мар 12, 2018 at 04:57

    Присоединяюсь к вопросу. Аналогичная ситуация.

    Ответить

    1. admin:
      сен 25, 2018 at 12:53

      Пришлите ссылку на страницу

      Ответить

  5. Анатолий:
    апр 24, 2018 at 07:50

    Добрый день!
    Та же проблема - пустые обьекты!

    Ответить

    1. admin:
      сен 25, 2018 at 12:53

      Пришлите ссылку на страницу

      Ответить







Разрешённые теги: <b><i><br>Добавить новый комментарий: