Припустимо, вам необхідно за допомогою 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-розробників. Тобто продуктивність вашої роботи збільшиться в рази.
Ще немає коментарів