Рубрики
Без рубрики

Интеграция Google Analytics 4 с помощью Next.js 📈

Сегодня я решил добавить Google Analytics в мой портфолио, который сначала был построен в Next.js, я подумал, что могу достичь этого с React – Ga, но после попытки добавить свой код GA, я понял, что это …

Автор оригинала: Andrei Zgirvaci.

Сегодня я решил добавить Google Analytics на мой портфель который был построен в Next.js

Сначала я думал, что могу достичь этого с React-Ga , но после попытки добавить свой код GA, я понял, что он не поддерживает Google Analytics 4, только Универсальная аналитика Отказ На данный момент я мог бы пойти и Включить универсальную аналитику , но я не в устаревшие вещи, извините … 🤷♂️

К счастью, я нашел библиотеку, которая поддерживает Google Analytics 4, это называется GA-4-Rect Отказ Отказ от ответственности: у него нет большого запуска, но это работает! 🤫.

Но интеграция его с помощью Next.js отличается от просто простого реагирования, там несколько вещей, которые вы должны сделать!

1. Создайте файл UTIL в корневом проекте:

import Router from 'next/router';
import GA4React from 'ga-4-react'; let ga4react; export async function init(G) { if (!GA4React.isInitialized() && G && process.browser) { ga4react = new GA4React(G, { debug_mode: !process.env.production }); try { await ga4react.initialize(); logPageViews(); } catch (error) { console.error(error); } }
} function logPageView() { ga4react.pageview(window.location.pathname);
} function logPageViews() { logPageView(); Router.events.on('routeChangeComplete', () => { logPageView(); });
} export function logEvent(action, label, category) {
  ga4react.event(action, label, category);
}

2. Измените файл _App.js для инициирования службы GA.JS:

import { useEffect } from 'react'; import { init } from 'utils/ga'; function MyApp({ Component, pageProps }) { useEffect(() => { init(process.env.NEXT_PUBLIC_G); }, []); return ;
} export default MyApp;

3. Добавьте свой код GA в качестве переменной среды:

NEXT_PUBLIC_G=G-

🎉 Voila, теперь вы сможете увидеть активное устройство в Google Analytics DebugView! Если вы этого не сделаете, попробуйте отключить свой Adblock, как это может создать проблемы иногда …

Это для сегодняшнего дня, надеемся, что эта статья была полезной для вас! Оставьте себя и комментировать, если это было! Увидимся завтра в другое блог пост! 😊.

P.S 🤫 Я недавно начал подкаст под названием Тревожный разработчик Где я разделяю свои знания о том, как уменьшить стресс, стать более присутствующим и продуктивным в качестве разработчика. Я хотел бы услышать ваши мысли об этом! 😊.

Помните, вы достойны, вы любили и имеете дело! Хорошего дня! ❤️.

Читайте ещё по теме: