Відстеження взаємодій з формами в GA
У цій статті я хотіла детально розглянути роботу з формами. З методами відстеження успішного надсилання форм ми вже познайомилися у статті “Вчимося працювати в GTM“. Сьогодні зупинимося докладніше на способах відстеження взаємодії з найпопулярнішими елементами форм.
Отже, розглянемо такі елементи форм.
Drop-down list (випадаючий список)
Для збору даних про обрані значення випадаючого списку можна скористатися наступним кодом.
Код
function()
{
var dSelector = '[name=element_name]';
var dOptions = document.querySelectorAll(dSelector+' option');
for(var i = 0; i < dOptions.length; i++)
if(dOptions[i].selected)
return dOptions[i].innerHTML;
}Конкретний елемент типу “список, що випадає”, а також будь-який з аналізованих далі, можна визначити декількома способами, наприклад:
- за допомогою атрибуту “name” (у селекторі полягає у квадратні дужки із зазначенням значення);
- за допомогою назви класу (у селектор перед назвою класу ставиться символ “.”);
- за допомогою ідентифікатора (у селекторі перед ідентифікатором ставиться символ “#”).
Слід вибирати спосіб, який дозволить однозначно ідентифікувати потрібний елемент. Так як на веб-сторінці, наприклад, може бути кілька списків, що випадають з однаковим класом, тоді в даному випадку вибирати назву класу як селектор неправильно.
Для використання того чи іншого способу визначення елемента потрібно буде змінити лише один рядок коду. Розглянемо, як зміниться код, залежно від вибраного способу:
Щоб звернутися до списку вибору регіону на скріншоті вище за допомогою атрибуту “name” у третьому рядку коду пишемо значення name=id_state у квадратних дужках:
var dSelector = '[name=id_state]';Щоб звернутися до списку, що випадає, за назвою класу в третьому рядку коду змінної dSelector присвоюємо значення .ok_field:
var dSelector = '.ok_field';Для звернення за ідентифікатором у третьому рядку коду змінної dSelector присвоюємо значення:
var dSelector = '.ok_field';Як приклад розглянемо список брендів, що випадає, на сайті продажу жіночих аксесуарів.
Для того, щоб ідентифікувати цей список, в третьому рядку коду вкажемо атрибут “name” і відповідне значення імені. В даному випадку name=bfp_a15, тобто нам потрібно замінити “element_name” на “bfp_a15”:
var dSelector = '[name=bfp_a15]';Налаштування в GTM
В інтерфейсі Google Tag Manager створюємо змінну типу “Власний код JavaScript” та копіюємо наведений вище код у текстове поле, попередньо замінивши третій рядок на “var dSelector = ‘[name=bfp_a15]’;”.
Далі змінну “Випадаючий список. Значення брендів” використовуємо як нам здається доцільним. Наприклад, створимо тег відправки події в аналітику при використанні фільтрів товарів і як дію додамо цю змінну.
Тоді у звітах аналітики можна побачити, який із брендів вибирають найчастіше при використанні фільтрів:
Radiobutton (залежний перемикач)
Щоб збирати дані про обрані значення залежного перемикача використовуємо наступний код.
Код
function()
{
var rSelector = '[name=element_name]';
var radioButtons = document.querySelectorAll(rSelector);
for (var i = 0; i < radioButtons.length; i++)
if (radioButtons[i].checked)
return radioButtons[i].value;
}Для радіобатону також справедливі всі методи визначення елемента, описані в блоці, присвяченому відстеженню взаємодії з випадаючими списками.
Якщо як приклад розглянути вибір способу доставки, цей список перемикачів легко ідентифікувати за атрибутом “name”: name=”id_carrier”.
Налаштування в GTM
Створюємо змінну типу “Власний код JavaScript”. У текстове поле копіюємо наведений вище код.
Враховуючи, що в прикладі name=”id_carrier”, третій рядок коду буде мати вигляд:
var rSelector = '[name=id_carrier]';
Цей код повертає параметр value. У цьому прикладі, та й у більшості випадків, з якими я стикалася, значення value є абсолютно неінформативним (у прикладі при виборі користувачем перемикача “Самовивіз зі складу” value буде “1300”).
Щоб замість незрозумілого “1300” бачити у звіті відповідне йому значення “Самовівіз зі складу”, можемо скористатися допоміжною змінною типу “Таблиця пошуку”.
Створюємо змінну типу “Таблиця пошуку”. Вхідний буде змінна {{Radiobutton}}. У рядках вхідних даних перераховуємо значення value, а результуючих рядках вказуємо відповідні значення.
Далі, щоб показати на прикладі, як це може виглядати в інтерфейсі аналітики, я створюю тег відправки події в аналітику при успішному оформленні замовлення і як дію додаю змінну {{Radiobutton – значення}}. Також для передачі даних може бути зручно використовувати користувацьки параметри.
Дані в Google Analytics будуть виглядати так:
Сheckbox (незалежний перемикач)
Виділимо два види незалежних перемикачів: одиночний чекбокс та група чекбоксів.
Одиночний чекбокс
Для відстеження взаємодії з одиночним чекбоксом можна використовувати код:
Код
function()
{
var chSelector = '[name=element_name]';
var checkbox = document.querySelector(chSelector);
return checkbox.checked? 'on': 'off';
}Розглянемо приклад – фільтри на сайті продажу нерухомості. Для того, що розділити всіх відвідувачів сайту, що використовують фільтри, на тих, хто шукає тільки об’єкти з фото, і тих, для кого наявність фото необов’язкова, скористаємося наведеним вище кодом.
Налаштування в GTM
Як і раніше, створюємо змінну типу “Власний код JavaScript” і копіюємо код у текстове поле, попередньо замінивши третій рядок коду на:
var chSelector = '[name=only_with_photos]';
Створюємо тег відправки події в аналітику при використанні фільтрів і як дію додаємо цю змінну.
Дані в інтерфейсі Google Analytics:
Група чекбоксів
Для відстеження вибору певних варіантів зі списку чекбоксів можна скористатися таким кодом:
Код
function()
{
var chSelector = '[name=element_name]';
var checkboxes = document.querySelectorAll(chSelector);
checkboxesList = [];
for (var i = 0; i < checkboxes.length; i++)
if (checkboxes[i].checked)
checkboxesList.push(checkboxes[i].value);
stringValues = checkboxesList.join(', ');
return stringValues;
}Як приклад наведу вибір кількості кімнат об’єкта на тому самому сайті продажу нерухомості.
Для визначення групи чекбоксів скористаємося атрибутом name. name=”multiselect_0”.
Цей код повертає параметр value. В даному випадку, при виборі варіанта “1 кімната” value=”1″, при виборі “2 кімнати” value=”2″ і т. д. Залежно від реалізації групи чек-боксів ви можете звертатися до найбільш інформативних вам атрибутів елемента. У прикладі також зручно звернутися до атрибуту “title”. Для цього поміняємо рядок
checkboxesList.push(checkboxes[i].value);яка повертає value на
checkboxesList.push(checkboxes[i].title);Налаштування в GTM
Додамо нову змінну типу “Власний код JavaScript” і додамо в поле введення наведений вище код.
Далі створюємо тег надсилання даних в аналітику за аналогією з тегом у попередніх пунктах і отримуємо можливість бачити статистику в Google Analytics.
Textbox (Текстове поле)
У разі необхідності отримувати дані про те, що користувачі вводять у текстових полях, можна скористатися наступним кодом.
Код
function() {
var textboxSelector = "[name=element_name]";
var textbox = document.querySelector(textboxSelector);
return textbox.value;
}Як приклад, розглянемо фільтри на сайті продажу нерухомості та передачу в аналітику даних про параметри вибору квартири (наприклад, вулиця).
ВАЖЛИВО: Відразу хочу звернути увагу читачів на те, що заборонено передавати в Google Analytics інформацію, яка дозволяє ідентифікувати користувача. Зокрема, не можна передавати дані про ім’я, номер телефону, адресу електронної пошти, платіжні реквізити тощо.
Для визначення текстового поля коду скористаємося його атрибутом “name”. Для поля “Вулиця” name=”street”.
Налаштування в GTM
Створюємо змінну типу “Власний код JavaScript” та копіюємо код у текстове поле.
Створюємо тег відправки події в аналітику при використанні фільтрів і додаємо змінну {{Текстове поле – Значення}}.
Доповнення стандартних звітів такими даними дозволить отримати уявлення про частоту, з якою користувачі вибирають певні значення у фільтрах. На основі такої статистики можна, наприклад, створювати персоналізовані сценарії ремаркетингу.
Поле вибору файлу
Щоб відстежити факт завантаження документа в полі вибору файлу, використовуємо наступний код.
Код
function()
{
var fileSelector = '[name=element_name]';
var file = document.querySelector(fileSelector);
return file.value == ''?"no":"yes";
}Визначимо потрібний елемент ідентифікатора id=”input_4_8″.
Тоді третій рядок коду матиме вигляд:
var fileSelector = '#input_4_8';Налаштування в GTM
Створюємо змінну типу “Власний код JavaScript” з наведеним вище кодом.
За аналогією з попередніми пунктами за допомогою тегу надсилання подій, збираємо дані в Google Analytics.
Дякую за увагу! Сподіваюся, що матеріал був корисним для вас.
P.S. Якщо у вас є питання щодо відстеження якихось інших елементів форм, пишіть у коментарях. Найчастіші питання постараюся розглянути у наступному пості.