Як прописати цілі з jQuery

У своїй діяльності часто стикаюсь з тим, що поступають завдання прописати різні коди цілей на кнопки, форми чи посилання на сайті. Часто це дуже легко – потрібно всього лиш доступ до файлів сайту та визначити місце. Проте бувають випадки, коли все не так просто. Тоді нам на допомогу приходить jQuery

Скажу відразу, що для реалізації способу, що буде описаний нище, Вам не має великої потреби мати глибокі чи будь які знання у jQuery.

Про які цілі для відслідковування йде мова?

Панелі вебмайстра як у Гуглі, так і у Яндексі передбачають різні форми відслідковування поведінки користувачів на сайті. По замовчуванню Вам доступні загальні дані – кількість відвідувачів, регіон чи браузер, який використовується та інша аналітична інформація.

Проте Ви можете також налаштувати і більш детальні фільтри для відслідковування. Найчастіше відслідковують різноманітні форми зворотнього зв’язку. Тобто налаштувавши таке відслідковування Ви будете бачити детальну інформацію по кожному кліку по такій формі чи по замовленню через форму.

Стандартне додавання коду відстеження на форму

Зазвичай після налаштування відслідковування система пропонує Вам додати спеціальний код відстеження на форму чи посилання.

Цей код виглядає приблизно так:

onsubmit="gtag('event', 'Nazva', { 'event_category': 'Knopka', 'event_action': 'Vidpravyty', }); return true;"

В більшості випадків для додавання відслідковування по кнопці ми шукаємо форму зворотнього зв’язку чи інший варіант форми та додаємо відповідний код до тегу <form>

Приклад коду з формою зворотнього зв'язку

Якщо взяти код з варіанту вище та додати код відстеження, то вийде приблизно таке:

<form onsubmit="gtag('event', 'Nazva', { 'event_category': 'Knopka', 'event_action': 'Vidpravyty', }); return true;" id="contactForm1" method="post" ...

Додавання коду відстеження з jQuery

Проте бувають випадки, коли доступу до форми немає – вона може генеруватися динамічно,наприклад. В таких випадках можна скористатися jQuery та його методом attr().

Давайте напишемо код для додавання відстеження використання форми з допомогою jQuery. Для прикладу використаємо код вище:

$(document).ready(function() {
     $('#contactForm1').attr("onsubmit", "gtag('event', 'Nazva', { 'event_category': 'Knopka', 'event_action': 'Vidpravyty', }); return true;");
});

$(document).ready(function() – код запрацює після завантаження сторінки.

$('#contactForm1') – код шукатиме html тег з id
contactForm1

attr("onsubmit", "gtag('... – і додасть йому атрибут onsubmit зі значенням, яке вказане через кому в подвійних лапках.

Тобто по суті в результаті ми отримаємо такий же код, який мали б, якби додали його вручну:

<form onsubmit="gtag('event', 'Nazva', { 'event_category': 'Knopka', 'event_action': 'Vidpravyty', }); return true;" id="contactForm1" method="post" ...

Різниця лише в тому, що ми додали потрібний код відстеження з допомогою jQuery

Author:

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *