de Faouzi Oudouh
Table of Contents
Cum să urmăriți interacțiunile utilizatorilor în aplicația dvs. React

Nu vă faceți griji cu privire la furnizorul Google Analytics de care aveți nevoie pentru a colecta interacțiunea cu utilizatorii în cadrul aplicației dvs.
În schimb, vă faceți griji mai multe despre cum să adunați aceste interacțiuni.
Acum câteva luni, am fost implicat într-un proiect Analytics în cadrul unei organizații mari de comerț electronic. Această organizație are o afacere bazată pe date în care analiza este mai importantă decât orice altceva.
Construiam o soluție Datalayer pentru a păstra toate interacțiunile și acțiunile utilizatorilor înainte de a le trimite la furnizorul Google Analytics (de exemplu, Google Tag Manager). Ne-am construit soluția DataLayer fără să avem în vedere React, deoarece migrarea către React a început mai târziu.
React Time!
Am început migrarea către React în mod progresiv, ceea ce înseamnă că React a fost responsabil doar pentru redarea unor părți ale platformei. Și am fost responsabil pentru integrarea soluției DataLayer pe care am construit-o deja cu React Land.
Dintr-o dată, dificultățile au început să apară:
- Soluția a fost bazată pe jQuery
- A fost imprevizibil
- A fost greu de testat și întreținut
- Împărtășirea cunoștințelor cu alți dezvoltatori care nu aveau experiență în analize a fost înfricoșătoare!
Am început să caut în comunitate soluții gata de utilizare care să se potrivească nevoilor noastre. Pur și simplu nu a existat nicio șansă.
Și aici este ideea React-Tracker a venit în.
De ce React-tracker?
- Este ușor de utilizat, testat și întreținut (de tip Redux)
- Poate fi utilizat cu orice furnizor de analize
- Este scalabil și previzibil
- Are un API minim
Cu React-tracker, am reușit să integrăm cu ușurință doi furnizori de Google Analytics (Google Tag Manager și Adobe Analytics).
Cum?
Pentru a fi simplu, gândiți-vă la asta ca la Redux.
- Instantați-vă Trackerul ~ Magazinul evenimentelor tale
- Creați-vă ascultătorii de evenimente ~ Reductor
- Eveniment ~ Acțiune
- Furnizați instanța de urmărire a componentei Root.
- React-tracker va magic aveți grijă să furnizați instanța de urmărire a tuturor componentelor dvs.
Înainte de a crea ceva, să parcurgem fiecare termen din lista de mai sus și să-l explicăm.
Ce este Tracker?
Un Tracker este o pungă care deține istoricul de urmărire împreună cu unele funcții pentru a asculta / expedia evenimentele.
-
tracker.on(eventType, callback)
apelul de apel dat va fi apelat ori de câte ori un eveniment cuevent.type
egală cu cea datăeventType
este expediat. -
tracker.trackEvent(event)
este o funcție care acceptă unevent
și îi cheamă pe toți ascultătorii de evenimente care ascultă acest lucruevent
. -
tracker.getHistory()
returnează o matrice și conține toate evenimentele urmărite care au fost salvate
Ce este un eveniment?
Un eveniment este un obiect simplu care reprezintă interacțiunea utilizatorului, cum ar fi clicul utilizatorului, vizualizarea paginii și achiziția.
Ar trebui să fie un obiect cu type
și asociate data
dacă există. Iată un exemplu de PageView
eveniment:
const PageViewEvent = { type: 'PAGE_VIEW', // Required data: { // Optional pageId: '123', userId: 'UID-123' }}
Ce este ascultătorul de evenimente?
Ascultătorul de evenimente este o funcție care va fi numită dacă este eventType
s-a potrivit cu tipul evenimentului trimis.
eventListener.eventType === event.type
Exemplu de ascultător de evenimente:
const pageViewListener = (event, ) => { // For example let's push the received event to our DataLayer. window.dataLayer.push(event);
return event;};
Să le permitem pageViewListener
să ascult doar pe PAGE_VIEW
eveniment:
pageViewListener.eventType="PAGE_VIEW";
Există patru lucruri de observat aici:
- Returnarea evenimentului îl va salva în trackingHistory. Altfel va fi ignorat 🙂
- Daca nu
eventType
a fost specificat ascultătorului de evenimente, va fi apelat la fiecare expediere a evenimentului. -
eventHistory
a fost furnizat ca un al doilea parametru pentru a vă ajuta să aplicați cu ușurință restricțiile asupra evenimentelor dvs., cum ar fi urmărirea o dată a unui clic pe produs. Pentru a realiza acest lucru, trebuie să aveți istoria evenimentelor în mâinile voastre. - Împingând evenimentul nostru la
window.dataLayer
a fost doar un exemplu. Puteți face în principal orice în această funcție, cum ar fi apelareaGTM
direct sauFacebook Pixel
E timpul să combini totul
Să începem cu începutul:
1. Instantați-l pe eroul nostru Tracker:
import { Tracker } from 'react-tracker';
const tracker = new Tracker();
Asta e!
Acum avem al nostru Tracker
dar fără ascultător de evenimente 🙁
Există două modalități de a adăuga ascultători de evenimente la dvs. Tracker
:
- La instanțierea:
const anOtherTracker = new Tracker([ pageViewListener, productClickListener, ...]);
- Sau puteți adăuga ascultătorul de evenimente după instanțierea dvs.
Tracker
folosindon
:
const anOtherTracker = new Tracker();
tracker.on('PAGE_VIEW', pageViewListener);
2. Creați un ascultător de evenimente cu vizualizare de pagină:
Vreau ca ascultătorul meu de evenimente să împingă cele primite PAGE_VIEW
eveniment direct la mine dataLayer.
const pageViewListener = (event, trackingHistory) {
window.dataLayer.push(event);
};
Să ne tracker
știu despre pageViewListener
:
tracker.on('PAGE_VIEW', pageViewListener);
3. Creați un creator de evenimente:
Creatorul de evenimente este doar o funcție care returnează un obiect de eveniment:
const pageViewEvent = (pageId, userId) => ({ type: 'PAGE_VIEW', data: { pageId, userId }});
Tracker-ul nostru este bine configurat acum.
Vă prezentăm tracker
a reactiona

4. Furnizați-ne tracker
la componenta rădăcină:
import React from 'react;import ReactDOM from 'react-dom';import { TrackerProvider } from 'react-tracker'
import RootComponent from '../RootComponent';
const RootComponentWithTracking = ( <TrackerProvider tracker={tracker}> <RootComponent /> </TrackerProvider>);
const domElement = document.getElementById('root');
ReactDOM.render(<RootComponentWithTracking />, domElement);
Prin furnizarea noastră tracker
la componenta rădăcină, va fi magic disponibil pentru toate componentele secundare.
Deci, acum, de când avem al nostru tracker
disponibil, să-l folosim pentru a urmări PAGE_VIEW
eveniment pe RootComponent
montură.
4. Urmăriți Page View Event.
import React from 'react';import { withTracking } from 'react-tracker';// We created this function earlier at (3.)import { pageViewEvent} from '../tracking/events';
class RootComponent extends React.Component { componentDidMount() { this.props.trackPageView(this.props.pageId, this.props.userId) }
render() { return (<h1> My App is awesome </h1>) }};
const mapTrackingToProps = trackEvent => ({ trackPageView: (pageId, userId) => trackEvent(pageViewEvent(pageId, userId))});
export default withTracking(mapTrackingToProps)(RootComponent);
withTracking
HOC se va ocupa de furnizarea noastră trackEvent
de la noi tracker
deci îl putem folosi pentru a urmări pageView
eveniment.
mapTrackingToProps
va îmbina obiectul returnat cu RootComponent
Recuzita, ceea ce înseamnă trackPageView
va fi disponibil ca accesoriu în cadrul RootComponent.
Gata – ai terminat;)
5. Demo
Vă rugăm să consultați acest lucru demo și a GitHub pentru documentare aprofundată și o modalitate mai bună de a vă organiza fișierele de urmărire.
Incearca!
React-tracker a fost construit pentru a facilita integrarea instrumentelor Google Analytics cât mai mult posibil, dovedind un API minim și o integrare ușoară cu aplicația dvs. de reacție.
Mulțumiri
Mulțumesc doha faridi, AbdelAli Eramli și khalid benrafik pentru feedback-ul dvs. util.