de Faouzi Oudouh

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 cu event.type egală cu cea dată eventType este expediat.
• tracker.trackEvent(event) este o funcție care acceptă un event și îi cheamă pe toți ascultătorii de evenimente care ascultă acest lucru event.
• 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 apelarea GTM direct sau Facebook 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 folosind on:

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.