Как добавить Google Analytics в Next.js

Реализация проста и не требует использования сторонних библиотек.

Вам понадобятся:

  • проект Next.Js
  • аккаунт Google Analytics

1 Добавьте идентификатор google analytics в файл .env.local вашего проекта.

Во-первых, начните с создания файла .env.local, в котором вы разместите свой ключ Google Analytics.

Tip: Check your .gitignore to make sure that you don't commit this file by accident. .env.local should have already been included by default in your Next.js project but check to make sure.

NEXT_PUBLIC_GOOGLE_ANALYTICS=<Your_tracking_ID>
Войдите в полноэкранный режим Выйдите из полноэкранного режима

2 Внесите код отслеживания Google Analytics в приложение вашего проекта.

Теперь, когда ключ установлен, необходимо внедрить и настроить глобальный тег сайта Google Analytics (он же gtag) в окно браузера.

Для доступа к элементу head в вашем приложении Next.js необходимо создать пользовательский файл _document.js в папке pages.

import Document, { Html, Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <script
            async
            src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}`}
          />
          <script
            dangerouslySetInnerHTML={{
              __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}', {
              page_path: window.location.pathname,
            });
          `,
            }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}
Вход в полноэкранный режим Выход из полноэкранного режима

3 Пользовательские функции для отслеживания просмотров страниц и событий.

Давайте перейдем к части отслеживания Google Analytics. Для того чтобы правильно отслеживать поведение пользователей, вам нужно будет регистрировать просмотры страниц и, по желанию, определенные события, вызванные вашим приложением.

В папке lib/ga создайте файл index.js с двумя функциями: одной для регистрации просмотров страниц и другой для регистрации событий.

// log the pageview with their URL
export const pageview = (url) => {
  window.gtag('config', process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS, {
    page_path: url,
  })
}

// log specific events happening.
export const event = ({ action, params }) => {
  window.gtag('event', action, params)
}
Вход в полноэкранный режим Выход из полноэкранного режима

lib/ga/index.js

4 Ведите журнал просмотров страниц в приложении вашего проекта.

Самый простой способ регистрации просмотров страниц в приложении Next.js — это подписаться на маршрутизатор и слушать событие routeChangeComplete.

Для этого зайдите в файл _app.js и с помощью useEffect проверьте, не происходит ли новых событий с маршрутизатором. Существует множество типов событий, но нас волнует только успешный переход пользователей на новую страницу (routeChangeComplete).

import { useEffect } from 'react'
import { useRouter } from 'next/router'

import * as ga from '../lib/ga'

function MyApp({ Component, pageProps }) {
  const router = useRouter()

  useEffect(() => {
    const handleRouteChange = (url) => {
      ga.pageview(url)
    }
    //When the component is mounted, subscribe to router changes
    //and log those page views
    router.events.on('routeChangeComplete', handleRouteChange)

    // If the component is unmounted, unsubscribe
    // from the event with the `off` method
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange)
    }
  }, [router.events])

  return <Component {...pageProps} />
}

export default MyApp
Вход в полноэкранный режим Выход из полноэкранного режима

5 Зафиксируйте определенные события в приложении вашего проекта.

Теперь, когда просмотры страниц отслеживаются, вам может быть интересно регистрировать определенные события в вашем приложении. Вот список событий Google Analytics по умолчанию.

import { useState } from 'react'

import * as ga from '../lib/ga'

export default function Home() {
  const [query, setQuery] = useState("");

  const search = () => {
    ga.event({
      action: "search",
      params : {
        search_term: query
      }
    })
  }

  return (
    <div>
        <div>
          <input type="text" onChange={(event) => setQuery(event.target.value)}></input>
        </div>
        <div>
            <button onClick={() => search()}>Search</button>
        </div>
    </div>
  )
}
Вход в полноэкранный режим Выход из полноэкранного режима

Оцените статью
devanswers.ru
Добавить комментарий