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

Как интегрировать Google Analytics с приложением Next.js

TL; DR: TAG TAG и Script в тег скрипта в файле _App.tsx. Также обратите внимание, чтобы не включить скрипт … Теги с аналитикой, Nextjs, JavaScript.

TL; DR: TAG TAG и Script в Скрипт Тег в _App.tsx файл. Кроме того, обратите внимание на не включать тег скрипта внутри голова или _document.tsx файл.

Настройка аналитики в одностраничном приложении может быть пита, особенно если есть куча вещей под капотом, когда вы используете самые популярные рамки, такие как Next.js, например. SSR, ISR и т. Д. В этом посте мы будем искать специально в Next.js 11 и up, что сделало жизнь гораздо проще, и настраивая GA4 с его глобальным тегом сайта aka gtag.js Отказ

Во-первых, сначала, если у вас нет установки недвижимости Google Analytics 4, проверьте Официальный прохождение и настройте потоки по умолчанию, по крайней мере, Просмотры страницы поток.

Это может выглядеть что-то подобное:

Двигается вперед, нам просто нужно включить фрагмент, предоставляемый GA в наше следующее приложение.

Прежде чем мы сделаем это, мы пройдем в удостоверение личности GA через .env Файл (который мы передам через настройку переменной среды Vercel, если вы используете Vercel для развертывания). В корневой папке, в вашем .env.local файл:

// .env.local
NEXT_PUBLIC_GA_ID=G-12XXXXXXXX

В вашем _App.tsx , вставьте фрагмент.

// _app.tsx
...
import Script from 'next/script'
...

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      
      
      
    
  )
}

Несколько важных вещей, чтобы отметить здесь:

  1. ID Для включения встроенные скрипты, так что Next.js знает, что такое где. Неспособность сделать это, может привести к нежелательным результатам. Я заметил двойную отчетность о Page_View Мероприятия.
  2. Мы устанавливаем Стратегия = 'LazyOnload' Отказ Рекомендуется использовать после заинтересованности Для аналитики в официальных документах, которые также имеют по умолчанию. Но это может привести к небольшому помехам на скорости нагрузки страницы, поэтому мы выбираем для загрузки сценариев аналитики после того, как все остальное на странице завершится загрузка. Я не заметил никаких недостатков с этим вариантом.

Как мы проверим все работает?

Основная интуиция – это войти в вашу аналитику приборной панели и монитор В реальном времени вкладка под Отчет Отказ

Вы также можете использовать этот Handy Chrome расширение и убедитесь, что одинокий Page-View Событие срабатывает на нагрузке страницы и навигации страницы (изменение состояния истории браузера).

Вот и все, счастливое отслеживание. Используйте это ответственно. 🎉

Оригинальный пост

Оригинал: “https://dev.to/biiishal/how-to-integrate-google-analytics-with-a-next-js-app-41hm”

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