Как да използвате Google Analytics на ReactJS

Ако искате да съберете данни за трафика на вашия уебсайт и потребителското поведение, тогава „Google Analytics“ е основен инструмент за използване. В тази статия ще ви покажем как бързо да интегрирате Google Analytics във вашия уебсайт ReactJS и да започнете да проследявате ефективността на уебсайта си.

Настройване на Google Анализ

Преди да започнем да интегрираме Google Analytics, трябва да имате акаунт в Google Analytics. Ако нямате такъв, можете да създадете акаунт безплатно на уебсайта на Google Analytics. След като имате своя акаунт, трябва да създадете нова собственост за уебсайта си и да получите ID за проследяване.

Отидете на уебсайта Google Analytics и влезте в своя акаунт в Google.
Кликнете върху бутона Администратор в долния ляв ъгъл на екрана.
В колоната Акаунт изберете акаунта, който искате да използвате.
В колоната Property изберете собствеността, която искате да проследявате.
Щракнете върху бутона „Показване на разширени опции“ и щракнете върху десния ъгъл, за да го превключите.
Въведете името на вашия уебсайт
Кликнете върху падащото меню Информация за проследяване в средната колона, след което щракнете върху Код за проследяване.
В секцията „Проследяване на уебсайтове“ ще видите своя идентификатор за проследяване под формата на „UA-XXXXXXXXX-X“. Копирайте този ID за проследяване.
Поставете идентификационния номер за проследяване в кода за проследяване на вашия уебсайт или приложение, където пише „YOUR_TRACKING_ID“ в кодовия фрагмент, предоставен от Google Анализ.

Интегриране на Google Анализ

Има много начини да интегрирате Google Analytics във вашия уебсайт ReactJS. Един от най-лесните начини е да използвате библиотеката react-ga. За да използвате тази библиотека, трябва да я инсталирате с помощта на npm или yarn.

npm install react-ga --save

След като инсталирате библиотеката, трябва да я инициализирате във вашето ReactJS приложение. Създайте файл с име analytics.js в директорията src на вашия проект и добавете следния код.

import ReactGA from 'react-ga';

export const initGA = () => {
  ReactGA.initialize('YOUR_TRACKING_ID');
};

export const logPageView = () => {
  ReactGA.pageview(window.location.pathname);
};

export const logEvent = (category = '', action = '', label = '') => {
  if (category && action && label) {
    ReactGA.event({ category, action, label });
  }
};

Инициализира библиотеката

Във входната точка на вашето приложение, като index.js, импортирайте initGAфункциите от analytics.js и извикайте initGA

import { initGA} from './analytics';

initGA();

ReactDOM.render(<App />, document.getElementById('root'));

Проследяване на събития

Проследяването на събития е важен аспект от използването на Google Analytics. Можете да проследявате събития като щраквания върху бутони, изпращане на формуляри и др. За да проследите събитие, можете да използвате следния код.

import { logEvent } from './analytics';

<button onClick={() => logEvent('Button', 'Clicked button', 'Button label')}>Click me</button>

Проследяване на персонализирани размери

Можете също да проследявате персонализирани измерения в Google Анализ. Персонализираните размери ви позволяват да проследявате допълнителна информация за вашите потребители или уебсайт. За да проследите персонализирана величина, можете да използвате следния код.

import ReactGA from 'react-ga';

ReactGA.set({
  userId: 'USER_ID',
});

Този код ще зададе потребителския идентификатор на „USER_ID“ в Google Анализ.

Заключение

В заключение, интегрирането на Google Analytics във вашия уебсайт ReactJS е бърз и лесен процес. Като използвате библиотеката react-ga, можете да започнете да проследявате събития и показвания на страници само за няколко минути. Не забравяйте да проследявате събития и персонализирани измерения, за да съберете повече информация за вашия уебсайт и потребители. С тази информация можете да вземате решения, базирани на данни, за да подобрите ефективността на уебсайта си.

Надяваме се, че тази кратка статия ще може да отговори на някои от вашите въпроси или да засили интереса ви да се научите да прилагате анализи на уебсайта си. Благодаря ви, че прочетохте моята статия!

Как да използвате Google Analytics на ReactJS

Подобни въпроси