Array
(
    [0] => Array
        (
            [TEXT] => Услуги
            [LINK] => /development/
            [SELECTED] => 
            [PERMISSION] => R
            [ADDITIONAL_LINKS] => Array
                (
                )

            [ITEM_TYPE] => D
            [ITEM_INDEX] => 0
            [PARAMS] => Array
                (
                    [FROM_IBLOCK] => 
                    [IS_PARENT] => 1
                    [DEPTH_LEVEL] => 1
                )

            [DEPTH_LEVEL] => 1
            [IS_PARENT] => 1
        )

    [1] => Array
        (
            [TEXT] => Разработка сайтов
            [LINK] => /development/
            [SELECTED] => 
            [PERMISSION] => R
            [ADDITIONAL_LINKS] => Array
                (
                )

            [ITEM_TYPE] => D
            [ITEM_INDEX] => 1
            [PARAMS] => Array
                (
                    [DEPTH_LEVEL] => 2
                    [FROM_IBLOCK] => 
                )

            [DEPTH_LEVEL] => 2
            [IS_PARENT] => 
        )

    [2] => Array
        (
            [TEXT] => Интернет-маркетинг
            [LINK] => /internet-marketing/
            [SELECTED] => 
            [PERMISSION] => R
            [ADDITIONAL_LINKS] => Array
                (
                )

            [ITEM_TYPE] => D
            [ITEM_INDEX] => 2
            [PARAMS] => Array
                (
                    [DEPTH_LEVEL] => 2
                    [FROM_IBLOCK] => 
                )

            [DEPTH_LEVEL] => 2
            [IS_PARENT] => 
        )

    [3] => Array
        (
            [TEXT] => Бизнес-интеграция
            [LINK] => /business-integration/
            [SELECTED] => 
            [PERMISSION] => R
            [ADDITIONAL_LINKS] => Array
                (
                )

            [ITEM_TYPE] => D
            [ITEM_INDEX] => 3
            [PARAMS] => Array
                (
                    [DEPTH_LEVEL] => 2
                    [FROM_IBLOCK] => 
                )

            [DEPTH_LEVEL] => 2
            [IS_PARENT] => 
        )

    [4] => Array
        (
            [TEXT] => Брендинг и дизайн
            [LINK] => /branding/
            [SELECTED] => 
            [PERMISSION] => R
            [ADDITIONAL_LINKS] => Array
                (
                )

            [ITEM_TYPE] => D
            [ITEM_INDEX] => 4
            [PARAMS] => Array
                (
                    [DEPTH_LEVEL] => 2
                    [FROM_IBLOCK] => 
                )

            [DEPTH_LEVEL] => 2
            [IS_PARENT] => 
        )

    [5] => Array
        (
            [TEXT] => Работы
            [LINK] => /works/
            [SELECTED] => 
            [PERMISSION] => R
            [ADDITIONAL_LINKS] => Array
                (
                )

            [ITEM_TYPE] => D
            [ITEM_INDEX] => 5
            [PARAMS] => Array
                (
                    [HIDE_LINK] => Y
                )

            [DEPTH_LEVEL] => 1
            [IS_PARENT] => 1
        )

    [6] => Array
        (
            [TEXT] => Web-разработка
            [LINK] => /works/?s=web-razrabotka
            [SELECTED] => 
            [PERMISSION] => R
            [ADDITIONAL_LINKS] => Array
                (
                )

            [ITEM_TYPE] => U
            [ITEM_INDEX] => 0
            [PARAMS] => Array
                (
                    [FROM_IBLOCK] => 1
                    [IS_PARENT] => 0
                    [DEPTH_LEVEL] => 1
                )

            [DEPTH_LEVEL] => 2
            [IS_PARENT] => 0
        )

    [7] => Array
        (
            [TEXT] => Продвижение и реклама
            [LINK] => /works/?s=prodvizhenie-i-reklama
            [SELECTED] => 
            [PERMISSION] => R
            [ADDITIONAL_LINKS] => Array
                (
                )

            [ITEM_TYPE] => U
            [ITEM_INDEX] => 1
            [PARAMS] => Array
                (
                    [FROM_IBLOCK] => 1
                    [IS_PARENT] => 0
                    [DEPTH_LEVEL] => 1
                )

            [DEPTH_LEVEL] => 2
            [IS_PARENT] => 0
        )

    [8] => Array
        (
            [TEXT] => Автоматизация бизнеса
            [LINK] => /works/?s=avtomatizatsiya-biznesa
            [SELECTED] => 
            [PERMISSION] => R
            [ADDITIONAL_LINKS] => Array
                (
                )

            [ITEM_TYPE] => U
            [ITEM_INDEX] => 2
            [PARAMS] => Array
                (
                    [FROM_IBLOCK] => 1
                    [IS_PARENT] => 0
                    [DEPTH_LEVEL] => 1
                )

            [DEPTH_LEVEL] => 2
            [IS_PARENT] => 0
        )

    [9] => Array
        (
            [TEXT] => Компания
            [LINK] => /about/
            [SELECTED] => 
            [PERMISSION] => R
            [ADDITIONAL_LINKS] => Array
                (
                )

            [ITEM_TYPE] => D
            [ITEM_INDEX] => 6
            [PARAMS] => Array
                (
                    [HIDE_LINK] => Y
                )

            [DEPTH_LEVEL] => 1
            [IS_PARENT] => 1
        )

    [10] => Array
        (
            [TEXT] => О компании
            [LINK] => /about/
            [SELECTED] => 
            [PERMISSION] => R
            [ADDITIONAL_LINKS] => Array
                (
                )

            [ITEM_TYPE] => D
            [ITEM_INDEX] => 0
            [PARAMS] => Array
                (
                )

            [DEPTH_LEVEL] => 2
            [IS_PARENT] => 
        )

    [11] => Array
        (
            [TEXT] => Отзывы
            [LINK] => /about/reviews/
            [SELECTED] => 
            [PERMISSION] => R
            [ADDITIONAL_LINKS] => Array
                (
                )

            [ITEM_TYPE] => D
            [ITEM_INDEX] => 1
            [PARAMS] => Array
                (
                )

            [DEPTH_LEVEL] => 2
            [IS_PARENT] => 
        )

    [12] => Array
        (
            [TEXT] => Достижения
            [LINK] => /about/progress/
            [SELECTED] => 
            [PERMISSION] => R
            [ADDITIONAL_LINKS] => Array
                (
                )

            [ITEM_TYPE] => D
            [ITEM_INDEX] => 2
            [PARAMS] => Array
                (
                )

            [DEPTH_LEVEL] => 2
            [IS_PARENT] => 
        )

    [13] => Array
        (
            [TEXT] => Команда
            [LINK] => /about/team/
            [SELECTED] => 
            [PERMISSION] => R
            [ADDITIONAL_LINKS] => Array
                (
                )

            [ITEM_TYPE] => D
            [ITEM_INDEX] => 3
            [PARAMS] => Array
                (
                )

            [DEPTH_LEVEL] => 2
            [IS_PARENT] => 
        )

    [14] => Array
        (
            [TEXT] => Вакансии
            [LINK] => /about/job/
            [SELECTED] => 
            [PERMISSION] => R
            [ADDITIONAL_LINKS] => Array
                (
                )

            [ITEM_TYPE] => D
            [ITEM_INDEX] => 4
            [PARAMS] => Array
                (
                    [HIDE_IN_TOP] => Y
                )

            [DEPTH_LEVEL] => 2
            [IS_PARENT] => 
        )

    [15] => Array
        (
            [TEXT] => Блог
            [LINK] => /blog/
            [SELECTED] => 1
            [PERMISSION] => R
            [ADDITIONAL_LINKS] => Array
                (
                )

            [ITEM_TYPE] => D
            [ITEM_INDEX] => 7
            [PARAMS] => Array
                (
                )

            [DEPTH_LEVEL] => 1
            [IS_PARENT] => 
        )

    [16] => Array
        (
            [TEXT] => Вакансии
            [LINK] => /about/job/
            [SELECTED] => 
            [PERMISSION] => R
            [ADDITIONAL_LINKS] => Array
                (
                )

            [ITEM_TYPE] => D
            [ITEM_INDEX] => 8
            [PARAMS] => Array
                (
                    [HIDE_LINK] => Y
                )

            [DEPTH_LEVEL] => 1
            [IS_PARENT] => 
        )

    [17] => Array
        (
            [TEXT] => Контакты
            [LINK] => /contacts/
            [SELECTED] => 
            [PERMISSION] => R
            [ADDITIONAL_LINKS] => Array
                (
                )

            [ITEM_TYPE] => D
            [ITEM_INDEX] => 9
            [PARAMS] => Array
                (
                    [HIDE_LINK] => Y
                )

            [DEPTH_LEVEL] => 1
            [IS_PARENT] => 
        )

)

Продвинутое отслеживание форм в Диспетчере тегов Google

20 февраля 2015

Настройка отслеживания форм – непростая задача. Здесь многое может пойти неправильно, много факторов, показателей отслеживания, разных форм на одной странице и технологий, с помощью которых они создаются… Ну вы понимаете.

В этом руководстве освещены наиболее продвинутые кейсы использования отслеживания форм в GTM с примерами соответствующих макросов и правил GTM.

1. Отслеживание форм: основы

Чтобы отслеживать формы в Диспетчере тегов Google, лучше всего создать тег Прослушивания отправки форм. При условии, что события не блокируются несовместимыми скриптами, он будет передавать {{event}} равно gtm.formSubmit в уровень данных для последующей обработки.

Если эта тема вам не знакома, то для начала почитайте об основных понятиях: отслеживание автоматических событий, макросы и правила. Джастин Катрони написал отличную статью об отслеживании автоматических событий, в которой также освещены основные понятия отслеживания форм.

Итак, начнем.

  1. Создайте новый тег типа Прослушивание отправки форм.

  2. Задайте правило активации тега "Все страницы".

Form Submit Listener

Здесь можно импровизировать. Не обязательно устанавливать активацию на всех страницах. В целях оптимизации можно задать активацию только на страницах с формами.

Еще есть две функции, которые можно включить или выключить:

  • Ожидание тегов (Wait for tags). Вводит период ожидания Х миллисекунд (2000 по умолчанию) перед отправкой формы. Это дает возможность активироваться всем тегам, связанным с событием. Если время истечет до того, как связанные теги активируются, и событие отправки формы будет завершено, некоторые данные могут потеряться. И всё же не рекомендуется увеличивать время ожидания, потому что если связанные с событием теги не срабатывают в течение 2 секунд, то проблема в них, а не в Диспетчере или форме.

  • Проверка ошибок (Check for validation). Если форма не пройдет проверку на ошибки (т.е. функция проверки прервет отправку формы), тег не активируется. Эту функцию полезно активировать, если только нет каких-либо проблем с повторяющимися формами, возникающими, например, при использовании настраиваемых обработчиков отправки форм.

Тег Прослушивания отправки форм ожидает успешной отправки формы на странице. Как только это происходит, событие GTM gtm.formSubmit передается в уровень данных. Если у вас включена функция Ожидание тегов, то сначала активируются любые связанные с этим событием теги (в течение указанного времени), и только после этого отправка будет завершена. После этого можно использовать правило {{event}} равно gtm.formSubmit для любых тегов, которые должны активироваться при отправке формы.

Начало положено. Одинокий тег Прослушивания отправки форм, чье жалкое существование сведено к ожиданию отправки формы, готов выполнить обязанности, возложенные на него админом-садистом.

2. Полезные макросы

Исправная работа и польза Диспетчера тегов зависит от того, как вы используете макросы. Вот несколько макросов, которые могут оказаться вам полезны.

{{element}}

Тип макроса: Переменная автоматического события
Тип переменной: Элемент
Описание: Фиксирует объекты отправленных форм

{{element id}}

Тип макроса: Переменная автоматического события
Тип переменной: Идентификатор элемента
Описание: Фиксирует значение идентификатора элемента DOM отправленной формы.

{{element url}}

Тип макроса: Переменная автоматического события
Тип переменной: URL элемента
Описание: Фиксирует значение атрибута ACTION отправленной формы

{{field value}}

Тип макроса: Собственный код JavaScript
JavaScript:

1

2

3

4

function() {

   var inputField = document.getElementById("myFormField");

   return inputField.value || "";

}

Описание: Возвращает значение поля формы, ID которого равен myFormField (можно заменить при желании). Если поле оказалось незаполненым, то возвращает пустое значение.

{{selected item}}

Тип макроса: Собственный код JavaScript
JavaScript:

1

2

3

4

5

6

8

9

10

11

12

function() {

   var selectId = "mySelectList";

   try {

      var options = document.getElementById(selectId).options;

      for (var i = 0;i < options.length;i++){

         if(options[i].selected) {

            return options[i].value;

         }

      }

   } catch(e) {}

   return "";

}

Описание: Возвращает VALUE выбранной в раскрывающемся списке позиции, чей ID равен переменной selectId. (При желании можно указать свой ID.)

{{checked button}}

Тип макроса: Собственный код JavaScript
JavaScript:

1

2

3

4

5

6

7

8

9

10

11

12

function() {

   var radioName = "myRadioButtons";

   try {

      var buttons = document.getElementsByName(radioName);

      for (var i = 0;i < buttons.length;i++){

         if (buttons[i].checked) {

            return buttons[i].value;

         }

      }

   } catch (e) {}

   return "";

}

Описание: Возвращает VALUE выбранного элемента из радиокнопок, чей атрибут NAME равен переменной radioName

{{string of checked buttons}}

Тип макроса: Собственный код JavaScript
JavaScript:

1

2

3

4

5

6

7

8

9

10

function() {

   var inputs = document.getElementsByTagName("input"),

         selectedRadios = "";

   for (var i = 0;i < inputs.length;i++) {

      if (inputs[i].type==="radio" && inputs[i].checked) {

         selectedRadios += inputs[i].value +" ";

      }

   }

   return selectedRadios.replace(/\s$/,"");

}

Описание: Возвращает сцепленную строку (разделитель – пробел) всех значений выбранных радиокнопок на странице

{{array of checked buttons}}

Тип макроса: Собственный код JavaScript
JavaScript:

1

2

3

4

5

6

7

8

9

10

function () {

   var inputs = document.getElementsByTagName("input"),

         selectedRadios = [];

   for (var i = 0;i < inputs.length;i++) {

      if (inputs[i].type==="radio" && inputs[i].checked) {

         selectedRadios.push(inputs[i].value);

      }

   }

   return selectedRadios;

}

Описание: Возвращает значения выбранных радиокнопок на странице в виде массива

Последние два макроса также можно применить к чекбоксам с помощью inputs[i].type==="radio" to inputs[i].type==="checkbox".

3. Значение поля

Часто бывает необходимо отправить значение какого-либо поля в Google Analytics. Допустим, требуется разделить все события на тех, кто отправил значение 1 и тех, кто отправил значение 2. Или вам требуется использовать конкретное значение поля как правило блокировки или активации других тегов.

Retrieve value of input element

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

Внимание: отправка в Google Analytics персональных данных, таких как ФИО, электронных адресов или телефонных номеров запрещена!

Легкий способ

Легкий способ заключается в создании макроса {{field value}}, описанного в первой части статьи. Для этого необходимо, чтобы поле, из которого требуется извлечь информацию, имело уникальный ID, например, <input type="text" id = "lunch">.

Затем добавляете этот макрос в тег, который отправляет событие в GA (правило, тег просмотра страницы и пр.), и когда тег будет активироваться при {{event}} равно gtm.formSubmit, макрос передаст значение того элемента формы, идентификатор которого вы указали ранее.

PRO-способ

При большом количестве форм с уникальными полями (и уникальными идентификаторами), которые вам требуется отследить, не придется создавать макрос для каждой формы отдельно. Просто измените объявление переменной в макросе на var inputField = document.getElementById({{field ID lookup}});.

Затем создайте новый макрос Таблицы поиска, в которой можно вернуть ID того поля, значение которого вы хотите получить, в зависимости от того, находится ли пользователь на определенной странице, имеет ли форма определенный ID и тому подобное. Ниже пример, в котором идентификатор поля зависит от ID элемента DOM-формы:

Field value lookup table macro

Если у вас нет доступа к ID элемента, то придется включить фантазию. Скорее всего вам придется прибегнуть к ненадежным скриптам, поэтому желательно, чтобы разработчики указывали ID элементов формы. Тем не менее, вот несколько вариантов (в которых объявление переменной заменяется в первоначальном макросе {{field value}}).

Обратите внимание, что [0] после функций относится к первому индексу массива. Следовательно, если вас интересует второй элемент ввода, то вы выбираете [1], если третий, то [2] и так далее.

Первый элемент ввода отправленной формы:

var inputField = {{element}}.getElementsByTagName("input")[0];

В качестве атрибута NAME для первого элемента ввода возьмите "myInput" (<input type="text" name="myInput">):

var inputField = document.getElementsByName("myInput")[0];

В качестве атрибута CLASS для первого элемента ввода возьмите (<input type="text" class="myInput">):

var inputField = document.getElementsByClassName("myInput")[0];

И так далее. JavaScript дает простор воображению.

4. Значение(я) выпадающих списков

Чтобы получить значение, выбранное в выпадающем списке SELECT, понадобится макрос, который пройдет через все элементы OPTION в выпадающем списке, и вернет тот, что был отмечен. Используемый макрос был представлен выше ({{selected item}}).

Drop-down list

Легкий способ

Опять подразумевается использование атрибута идентификатора элемента SELECT. Например, список может быть таким:

1

2

3

4

<select id="myList">

   <option value="home">Home</option>

   <option value="work">Work</option>

</select>

Меняем объявление переменной в макросе {{selected item}} на var selectId = document.getElementById("myList");. Затем скрипт проходит по всем элементам OPTION в структуре SELECT и возвращает значение опции, которая была выбрана.

PRO-способ

Как и следовало ожидать, здесь вы легко можете применить ту же магическую формулу Таблиц поиска, которая описана выше для значения поля. Если элемент SELECT не имеет ID, нужно что-нибудь придумать. Вот несколько идей для объявления переменной.

Перейдите к первому списку SELECT на странице:

var selectId = document.getElementsByTagName("select")[0];

Перейдите к первому списку SELECT отправленной формы:

var selectId = {{element}}.getElementsByTagName("select")[0];.

5. Значение(я) выбранной радиокнопки

Интересно посмотреть на пример извлечения значения выбранных радиокнопок. Допустим, вам требуется, чтобы срабатывали разные теги (с разными пользовательскими показателями), в зависимости от того, что пользователь хочет застраховать: дом (Home) или жизнь (Health).

Radio buttons

Секрет в том, чтобы присвоить каждому элементу радиокнопок постоянный (и уникальный) атрибут NAME. Если каждая группа радиокнопок будет иметь уникальный атрибут NAME, скрипт будет работать идеально.

Легкий способ

Как ранее, используйте {{checked button}} и замените "myRadioButtons" значением атрибута NAME группы радиокнопок, которые нужно проанализировать.

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

PRO-способ

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

Соедините в строку все значения выбранных радиокнопок (макрос Собственной код JavaScript):

1

2

3

4

5

6

7

8

9

10

function() {

   var inputs = document.getElementsByTagName("input"),

         selectedRadios = "";

   for (var i = 0;i < inputs.length;i++) {

      if(inputs[i].type==="radio" && inputs[i].checked) {

         selectedRadios += inputs[i].value +" ";

      }

   }

   return selectedRadios.replace(/\s$/,"");

}

Этот скрипт проходит через все радиокнопки в форме и возвращает соединенную строку значений отмеченных кнопок, например, “пол муж. 30 дом” всех трех групп радиокнопок.

Сохраните значения в объекте для последующей обработки (макрос Собственный код JavaScript):

1

2

3

4

5

6

7

8

9

10

function() {

   var inputs = document.getElementsByTagName("input"),

         selectedRadios = [];

   for (var i = 0;i < inputs.length;i++) {

      if(inputs[i].type==="radio" && inputs[i].checked) {

         selectedRadios.push(inputs[i].value);

      }

   }

   return selectedRadios;

}

Таким образом, можно получить массив значений каждой отмеченной радиокнопки на странице. Обработать этот массив можно в другом (или этом же) макросе, либо еще как-то. Я предпочитаю этот метод, так как использование массивов JavaScript предоставляет больше возможностей.

6. Значение(я) выбранных чекбоксов

Особенность чекбоксов в том, что чаще всего отмеченных значений много. Это означает, что если вы хотите отправить информацию о выбранных боксах в событие, то придется прибегнуть к способам, описанным ранее для радиокнопок (PRO-способ). Для извлечения значений отмеченных чекбоксов используйте такой(ие) же скрипт(ы), что и выше, только для доступа к чекбоксам вместо

if(inputs[i].type==="radio"...)

следует использовать

if(inputs[i].type==="checkbox"...)

Другой способ

А если вы хотите, чтобы выбранный чекбокс являлся условием активации тега GTM, например, чтобы тег активировался, если форма включает подписку на рассылку спама (информации о скидках),

Checkbox form tracking

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

1

2

3

4

function() {

   var checkbox = document.getElementById("spamReq");

   return checkbox.checked || false;

}

Этот макрос возвращает значение "true" (да), если чекбокс отмечен и "false" (нет), если не отмечен или при обнаружении скриптом ошибки.

Другой PRO-способ

Что если у вас нет ID (эх, вы!) ? Способов идентифицировать отмеченный чекбокс много. Можно посмотреть энный элемент ввода в форме (например, 15-й элемент отправленной формы – это чекбокс) примерно так:

1

var checkbox = {{element}}.getElementsByTagName("input")[14];

Если это единственный чекбокс, то данные о его статусе (да / нет) можно получить таким образом:

1

2

3

4

5

6

7

function() {

   var inputs = {{element}}.getElementsByTagName("input");

   for(var i = 0;i < inputs.length;i++) {

      if(inputs[i].type==="checkbox") { return inputs[i].checked; }

}

   return false;

}

Обратите внимание, можно применять и метод querySelector() (не так хорошо поддерживается браузерами, как getElementsByTagName()):

1

2

3

4

function() {

   var check = document.querySelector('input[type="checkbox"]');

   return check ? check.checked : undefined;

}

В крайнем случае можно попробовать использовать менее надежные свойства DOM-элемента, такие как previousSibling.innerText || previousSibling.textContent, чтобы посмотреть, какой именно текст предшествовал чекбоксу (см. пример выше, где выбранный чекбокс является условием активации тега). Не будем углубляться в подробности, потому что этот способ не “чистый”. Когда связываешься с таким хрупким объектом, как текстовый контент, всегда рискуешь нарваться на проблемы.

7. Один элемент формы – много форм (ASP.NET)

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

Часто бывает, что вся страница заключена в элементе FORM. Такая обертка формы ASPX-страницы, используется для создания динамического контента, который будет полностью передан в браузере. Но для Диспетчера это проблема. Если на странице больше одной формы, а чаще всего так и бывает, трудно определить, какая именно форма была отправлена нажатием на кнопку. Дело в том, что gtm.formSubmit срабатывает при отправке содержимого элемента FORM, а отправка могла быть произведена из любой из многочисленных форм на странице.

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

ASPX form

Обходные пути – не самый лучший вариант, но пока нет другого выбора. Хотелось бы иметь возможность пройтись по истории макроса {{event}}. Хочется иметь доступ ко всем версиям истории всех переменных уровня данных! Но пока этот день не наступил, приходится обращаться к способам, описанным ниже.

Определение нужной формы с помощью прослушивания кликов

Данный способ подразумевает прослушивание кликов для определения того, какая кнопка была нажата, а затем эти данные используются как правило активации блокировки тега, который реагирует на отправку формы. Здесь используется информация, собранная во время проверки активации прослушивания в Диспетчере. Gtm.click активируется всегда раньше gtm.formSubmit.

В этом примере две формы на странице: поле поиска по сайту с ID кнопки отправки siteSearchButton, и форма обратной связи с ID кнопки отправки contactSubmitButton.

Для начала нужно создать собственный HTML-тег, установленный на активацию при {{event}} равно gtm.click. Да, понадобится активное прослушивание кликов. Добавьте следующий код:

1

2

3

<script>

   dataLayer.push({'clickedButton': {{element id}}});

</script>

Это позволит передать идентификатор нажатой кнопки в уровень данных. То есть, если кто-то будет осуществлять поиск по сайту, то получено будет значение siteSearchButton, а при отправке формы обратной связи – contactSubmitButton.

Затем для доступа к этому значению нам понадобится макрос Переменная Уровня данных:

Data Layer Variable macro

И наконец, в теге события для отправки поиска по сайту понадобится указать следующее правило:

{{event}} равно gtm.formSubmit

{{Clicked Button ID}} равно siteSearchButton

А в теге события для отправки формы обратной связи необходимо такое правило:

{{event}} равно gtm.formSubmit

{{Clicked Button ID}} равно contactSubmitButton

Этот способ работает, но в его надежности я не уверен. Всегда существует вероятность, что активируется только тег gtm.click или только тег отправки формы (из-за ошибки или еще чего-нибудь), но пока особых проблем с этим способом не было. Главный его недостаток – он не такой “красивый”. Для управления активацией главного тега требуется промежуточный, и это отстойно. Хотелось бы систематизировать всё, что связано с событиями с помощью только главных тегов, без необходимости прибегать к помощи вспомогательных средств.

Определение использования нужной формы {{field value}}

Еще один способ, с помощью которого решается проблема содержимого элемента FORM, заключается в проверке наличия текста в поле формы. Если текст есть, то это та самая форма, которая была отправлена. Вы же не будете, начав заполнять одну форму, вдруг переходить к другой и отправлять ее пустую? (Пожалуйста, скажите нет.)

Итак, ситуация такая: есть две формы на странице (заключены в одном элементе FORM). Первая форма – это поле поиска по сайту, и поле поиска имеет идентификатор siteSearch. Еще есть форма обратной связи, одной из полей в котором требует e-mail, его ID email.

Есть макрос Собственный код JavaScript (с именем {{submitted form}}), который выглядит следующим образом:

1

2

3

4

5

6

7

function() {

   var search = document.getElementById("siteSearch"),

         contactEmail = document.getElementById("email");

   if(search && search.value != "") { return "search"; }

   else if (contactEmail && contactEmail.value != "") { return "contact"; }

   return "";

}

Если в поле поиска есть значение, то скрипт возвращает строку "search". Если значение в поле e-mail формы обратной связи, то скрипт возвращает строку "contact". Если ни то, ни другое не найдено, скрипт возвращает пустую строку.

И последние два правила.

Это правило активирует тег, когда в поле поиска по сайту есть текст:

{{event}} равно gtm.formSubmit

{{submitted form}} равно search

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

{{event}} равно gtm.formSubmit

{{submitted form}} равно contact

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

В качестве выводов можно сказать, что в ASPX страницах всё еще сложно получить достоверные результаты с помощью прослушивания отправок форм GTM. К счастью, если можно так сказать, в работе с ASPX сайтом обработчики форм – это наименьшая из проблем.

8. Заключение

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

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

Бывает, что форма на странице – вовсе не форма (в плане HTML), если она была полностью создана в каком-нибудь JavaScript формате (или, *gasp*, Flash). В таких ситуациях прослушивание отправок форм не поможет, потому что фактического события отправки формы не происходит. В таких случаях можно обратиться к разработчикам и вручную создать запуск события the gtm.formSubmit. Дополнительную информацию по этому вопросу смотрите в отличной статьей Дуга Холла о расширении отслеживания автоматических событий в Диспетчере тегов Google.

Advanced Form Tracking In Google Tag Manager, Simo Ahava

Поделитесь материалом с друзьями и коллегами

Подпишитесь на блог Uplab.
Мы будем делиться с вами всем лучшим, что у нас есть!

Комментарии к статье
Обратная связь
ПРЕЗЕНТАЦИЯ (.PDF)
ул. Новослободская д. 61, стр. 2
+7 (495) 241 - 59 - 48
ул. Ярморочная 7
+7 (495) 241 - 59 - 48
© 2006–2016
digital-агентство Uplab
Пользовательское
соглашение
Обратная связь
ул. Новослободская д. 61, стр. 2
+7 (495) 241 - 59 - 48
ул. Ярморочная 7
+7 (495) 241 - 59 - 48
ПРЕЗЕНТАЦИЯ (.PDF)
© 2006–2016 digital-агентство Uplab
Пользовательское соглашение