Припустимо, вам необхідно за допомогою Google Analytics відстежувати, скільки разів було натиснуто кнопку у вашому застосунку на Vue. Як таке реалізувати?
Перше, що спадає на думку — повісити обробник подій:
<button @click="onClick">Important Button</button>
methods: {
onClick(e) {
ga('send', 'event', 'Video', 'play')
// інші дії при кліку на кнопку
}
}
Це прийнятний підхід, однак він має свої недоліки. Якщо ви почнете відстежувати більше кнопок та посилань, код стане перевантаженим. З renderless-компонентами Vue ми можемо абстрагувати відстеження подій в нашому власному компоненті, придатному для повторного використання.
Що таке Renderless-компонент
Звичайний компонент Vue має певний HTML-шаблон, JavaScript та CSS. Renderless-компонент не має власної розмітки. Зазвичай він містить функцію render
, яка рендерить слот з обмеженою областю видимості. Саме через такий слот дані та функції з renderless-компонента передаються дочірнім компонентам. Така проста концепція дозволяє абстрагуватися від складної логіки, яка може бути повторно використана в інших компонентах.
Щоб краще закріпити матеріал, створимо renderless-компонент, який можна огорнути навколо кнопок, посилань та інших елементів, аби відстежувати кліки з Google Analytics. Почнемо із шаблону renderless-компонента Track
.
// Renderless-компонент
// Track.js
export default {
render() {
return $this.$slots.default;
}
}
// App.vue
<template>
<div>
<track>
<button @click="onClick">Important Button</button>
</track>
</div>
</template>
<script>
import Track from 'track';
export default {
components: { Track },
methods: {
onClick(e) {
// власний обробник кліку кнопки
}
}
}
</script>
Імпортуємо в компонент App
створений нами компонент Track
та огорнемо ним елемент <button>
, який потрібно відстежувати. В нашому випадку Track
— базовий компонент, адже все, що він робить — рендерить слот за замовчуванням (у нас це <button>
). Якщо ви оновите сторінку зараз, то не помітите жодних змін. Компонент Track
лише рендерить дочірній елемент, але власної розмітки він не має.
Відстежуємо кліки
Додамо корисного функціоналу до створеного Track
. Нам потрібно, щоб він відстежував кліки дочірнього елемента та звертався до Google Analytics API.
// Track.js
export default {
render() {
return $this.$slots.default;
},
+ mounted() {
+ this.$slots.default[0].elm.addEventListener('click', this.trackClick, true);
+ },
+ methods: {
+ trackClick() {
+ ga('send', 'event', 'Video', 'play');
+ }
+ }
}
Оглянемо новий код покроково. Уся робота відбувається в хуку життєвого циклу mounted
нашого компонента, після того як він рендериться та додається прослуховувач подій. this.$slots.default
означає, що ми отримуємо доступ до слоту за замовчуванням компонента. Нам потрібен лише перший елемент, якому ми встановлюємо прослуховувача події click
— trackClick
.
Останній аргумент addEventListener
приймає значення true
для перехвату події замість сплиття за замовчуванням. Тобто події спускаються DOM-деревом до нашого обробника. Зрештою так ми зможемо реагувати на кліки, навіть якщо визначено preventDefault
.
Повторне використання
Залишилась невелика проблемка. Що робити, коли нам потрібно відстежувати якесь посилання на іншій сторінці?
Поглянемо на код знову: при кожному кліку викликатиметься ga('send', 'event', 'Video', 'play')
. Зробимо так, щоб ми могли встановити різні змінні для надсилання даних Google Analytics (GA) за допомогою props. Ми також будемо використовувати стандартні поля, визначені GA API.
// Track.js
export default {
render() {
return $this.$slots.default;
},
+ props: [
+ eventCategory,
+ eventAction,
+ eventLabel,
+ eventValue,
+ ],
mounted() {
this.$slots.default[0].elm.addEventListener('click', this.trackClick, true);
},
methods: {
trackClick() {
- ga('send', 'event', 'Video', 'play');
+ ga('send', 'event', eventCategory, eventAction, eventLabel, eventValue);
}
}
}
Тепер такий код ми можемо використовувати в різних місцях застосунку з відповідними подіями:
<Track eventCategory="Checkout" eventAction="Button Click" eventLabel="Sidebar" eventValue="$30">
<button>Some button</button>
</Track>
Висновок
Створений компонент Track
готовий до використання в різних частинах нашого коду.
Серед переваг абстрагування сторонніх API – спрощення підтримки коду. Google оновив GA API? Не проблема. Замість того щоб міняти код в 30 місцях, ми оновлюємо лише Track
.
Суттєвою перевагою є і те, що ваша кодова база інтуїтивно тепер більш зрозуміла. Раніше іншим розробникам проекту знадобилися б знання GA API. А тепер ми абстрагуємо все в інтуїтивну концепцію, з якою знайома більшість Vue-розробників. Тобто продуктивність вашої роботи збільшиться в рази.
Ще немає коментарів