Відстежуйте події кліків по кнопках за допомогою Google Tag Manager

Існує багато різних посібників, які навчають, як відстежуйте кліки по кнопках як ціль у Google Analytics.

Майже всі з них, включно з офіційні посібники від Google, використовуйте подію onclick на конкретній кнопці.

Основний недолік цього методу полягає в тому, що реєструється багато «фейкових» цілей коли контактну форму заповнюють некоректною інформацією. У результаті ми отримуємо хибну статистику та ухвалюємо неправильні рішення під час управління PPC.

У цій статті ми покажемо, як можна мінімізувати обсяг «фейкових кліків» у ваших статистичних даних за допомогою JavaScript і Google Tag Manager. Для діагностики я використовував Google Chrome.

Рішення полягає в тому, щоб написати власний валідатор на JavaScript, який перевірятиме форму, коли її заповнено коректною інформацією.

Для зручності я розмістив(ла) форму нижче, щоб ви могли використати її як приклад:

[supsystic-form id=12]

У нашому випадку обов’язковими полями є Ім’я, Email та номер телефону.

Щоб наш скрипт міг перевірити потрібні дані, спочатку ми маємо отримати ці відомості. У нашому прикладі ми використаємо такий алгоритм:

– Визначте поле CSS-селектора. Для цього клацніть правою кнопкою миші по потрібній області та виберіть пункт Inspect. У вікні, що відкриється, знову клацніть правою кнопкою по вибраному елементу й оберіть Copy Selector:

– Використовуйте селектор, щоб отримати дані форми за допомогою методу запиту JavaScript

Селектор:

var name = document.querySelector('form > div:nth-child(1) > div > div > input[type="text"]').value; var name = document.querySelector('form > div:nth-child(2) > div > div > input[type="text"]').value; var name = document.querySelector('form > div:nth-child(3) > div > div > input[type="text"]').value;

Ви можете перевірити коректність через Консоль розробника. Щоб зробити це, введіть будь-яке значення в поле, візьміть відповідний код і запустіть його в консолі. Наприклад, код для поля Name:

1. document.querySelector('form > div:nth-child(1) > div > div > input[type="text"]').value

Отже, все працює, круто! 🙂

Нижче наведено кілька прикладів, які я використав для тестування різних полів.

Перевірка поля Email:

function validateEmail(e) { var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; return re.test(e); }

Перевірка поля номера телефону:

function validateNumber(e) { var re = /^[0-9._\s()+-]+$/; return re.test(e); }

Перевірка поля дати:

function validateDate(e) { var re = /^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[1,3-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$/; return re.test(e); }

Схожі регулярні вирази легко знайти через Google Search, ввівши, наприклад, «email regex».

Щоб перевірити роботу, ви можете скористатися сервісами на кшталт https://regex101.com/ (https://regex101.com/r/eZ7aX5/1).

Після того як ви отримаєте й перевірите всю необхідну інформацію, можна нарешті переходити безпосередньо до коду та його інтеграції в Google Tag Manager.

Нижче ви можете побачити фінальний код із коментарями:

Коригування в Google Tag Manager

Я використав деталі CSS-селектора, щоб завершити налаштування тригера.

Тепер ми встановимо наші коди Analytics і Yandex Metrica.

В обох випадках код запускатиме подію «valid_click», яку ми надсилаємо за допомогою власного HTML, якщо нашу форму заповнено правильними даними.

Ми описали налаштування Analytics і Yandex Metrica без заглиблення в деталі, оскільки існує багато джерел, де ви можете знайти докладні описи цих процесів.

У будь-якому разі, якщо у вас виникнуть запитання зв’яжіться з нами, ми також готові розгорнути цю тему.