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

Использование Hotjar и Google Analytics с Next.js для отслеживания поведения

Как разработчик, мои инструменты аналитики-Hotjar и Google Analytics как для маленьких, личных … Tagged with NextJS, React, JavaScript, WebDev.

Как разработчик, мои инструменты аналитики-это Hotjar и Google Analytics Как для небольших, личных проектов, так и для более сложных приложений, которые привлекают пользователей. Когда у меня есть выбор, Next.js Моя любимая платформа React-он предлагает рендеринг на стороне сервера (SSR), растущее и отзывчивое сообщество и легко интегрируется с моей любимой структурой CSS, Tailwindcss Анкет

В этом уроке вы узнаете, как легко интегрировать Hotjar с Google Analytics в ваше приложение Next.js. На момент написания текущая версия Next.js составляет 11. В этом уроке предполагается, что вы уже создали учетные записи Google Analytics и Hotjar, и просто необходимо добавить коды в ваше приложение.

Установка зависимостей

Для Hotjar требуется только одна зависимость – это делает его очень простым для добавления в поддержку Hotjar:

пряжа добавить React-Hotjar

Инициализация хотджара

Прежде чем начать, вам понадобится код отслеживания. Когда вы настраиваете свой сайт Hotjar, вам будет представлена тег сценария, которая содержит группу JavaScript внутри – найдите строку, которая содержит H._HJSettings и получить значения для HJID и HJSFV . Вам понадобится оба.

Перейдите к своему _app.js документ. Мы будем добавлять в крючок использования, который инициализируется при креплении компонента, и инициализируют клиент Hotjar.

  1. Импортировать React-hotjar модуль, а также крючок использования.
import { hotjar } from 'react-hotjar'
import { useEffect } from 'react'
  1. Как только они импортируются, вам необходимо добавить крюк с использованием в своем компоненте с пустым массивом зависимостей:
useEffect(() => {
  hotjar.initialize(HJID, HJSV)
}, [])

Когда вы закончите, ваш компонент должен выглядеть примерно так:

import { hotjar } from 'react-hotjar'
import { useEffect } from 'react'

function MyApp ({ Component, pageProps }) {
  useEffect(() => {
    hotjar.initialize(0123456, 1)
  }, [])

  return 
}

export default MyApp

Вот иди для Хотджара! Далее мы перейдем к Google Analytics – подготовьте этот компонент готовым, так как нам нужно добавить еще один крючок использования для отслеживания действий GA.

Инициализация Google Analytics

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

Чтобы установить Google Analytics, вам нужно найти Голова компонент вашего приложения следующего.js. В зависимости от того, как вы структурировали свой проект, вы можете найти это в index.js файл или отдельный компонент макета. Этот сценарий должен присутствовать на каждой странице, на которую вы хотите собрать аналитику, поэтому я предлагаю создать отдельный компонент макета, который оборачивается вокруг ваших страниц.

  1. Добавьте сценарии GTAG в тег вашей головы – обратите внимание на DangustySetInnerHtml атрибут. Это необходимо для того, чтобы вы могли встроить этот тег, но следует тщательно использовать. Для получения дополнительной информации об этом атрибуте см. Эта статья Logrocket.

Замените «идентификатор отслеживания» на идентификатор отслеживания, который вы получили раньше.
  1. Если у вас его еще нет, создайте lib каталог в корне проекта и добавьте файл с именем gtag.js Анкет Добавьте следующие функции в свой файл и замените «идентификатор отслеживания» на предыдущий идентификатор отслеживания.
export const pageview = url => {
  window.gtag('config', 'TRACKING-ID', {
    page_path: url
  })
}

export const event = ({ action, category, label, value }) => {
  window.gtag('event', action, {
    event_category: category,
    event_label: label,
    value: value
  })
}
  1. Перейдите к _app.js Анкет Нам нужно будет добавить еще один крючок использования, который называется каждый раз, когда происходит событие. Импортируйте зависимости и функции, которые мы создали на предыдущем шаге:
import * as gtag from 'lib/gtag'

import { useEffect } from 'react'
import { useRouter } from 'next/router'
  1. Как только они будут импортированы, вам необходимо инициализировать маршрутизатор и добавить в крючок использования, который будет следовать за изменениями маршрута.
const router = useRouter()

useEffect(() => {
  const handleRouteChange = url => {
    gtag.pageview(url)
  }
  router.events.on('routeChangeComplete', handleRouteChange)
  return () => {
    router.events.off('routeChangeComplete', handleRouteChange)
  }
}, [router.events])

Когда вы закончите с Hotjar и Google Analytics, ваш компонент должен выглядеть так:

import * as gtag from 'lib/gtag'

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

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

  useEffect(() => {
    const handleRouteChange = url => {
      gtag.pageview(url)
    }
    router.events.on('routeChangeComplete', handleRouteChange)
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange)
    }
  }, [router.events])

  useEffect(() => {
    hotjar.initialize(0123456, 1)
  }, [])

  return 
}

export default MyApp

Завершая

Вот и все! Теперь теперь вы должны собирать данные Hotjar и Google Analytics для вашего сайта.

Вы можете найти больше моего контента Здесь Анкет

Оригинал: “https://dev.to/romansorin/using-hotjar-and-google-analytics-with-next-js-to-tracking-behavior-44eb”

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