Como 구성 o Google Analytics 없음 NextJS em 2021

소개

Fala povo, tem um tempinho eu migrei meu blog do Gatsby para o NextJS e inclusive falei que iria fazer vários pequenos posts com dicas sobre alguns dos detalhes dessa migração e até mesmo como fazer certas coisas no NextJS. Acabei não tendo tempo, mas agora estou aqui! Vou começar com uma coisinha bem simples, mas que teve um diferencial com a versão mais nova do NextJS.

Enquanto vou escrevendo esse post vou ouvindo uma das minhas bandas Favorites de todas em um dos meus albuns 가장 좋아하는 것, que é Freak Show - Silverchair

Novo 구성 요소 드 스크립트

Uma coisa que eu gosto muito do NextJS e que eles estão semper se atualizando e tentando melhorar ainda mais a performance das aplicações. Como é o 슬로건 델레스Let’s make the Web. Faster.
Na versão 11 eles lançaram o Componente de Script que permite com que você tenha uma granularidade melhor no carregamento de scripts Third-party, o que como nosjun sabemos, pode afetar demais a performancedependendoar écom que você tenha uma granularidade melhor no carregamento de scripts o resto ou se é carregado depois.

Com esse novo componente, nos temos 3 formas de carregamento:

beforeInteractive : Para scripts críticos que precisam ser baixados e executados antes mesmo da página ser interativa. Normalmente scripts que são Fundamentais para o funcionamento da página. Esses 스크립트는 서버 측이 아닙니다.

afterInteractive (padrão): Para scripts que podem ser baixados e executados após o carregamento da página. Coisas como tag manager e o proprio analytics. Esses scripts são adicionados já no client-side e rodam depois do hydrate.

lazyOnload : Para scripts que podem carregar quando o carregamento das partes Fundamentais já tiver finalizado e não tiver mais nenhuma ação acontecendo. Normalmente para scripts de redes sociais, chats, elementos que não vão estar aparecendo na primira dobra da página.

Configurando o Analytics e usando o Script

스크립트에 대한 구성 요소 및 구성 요소의 구성 요소 분석에 대한 기본 구성 요소 없음afterInteractive . Eu costumo criar um componente Analytics para ficar mais fácil de editar/adicionar:

import Script from 'next/script'
import { GA_TRACKING_ID } from 'lib/gtag'

const Analytics = () => (
  <>
    <Script
      strategy="afterInteractive"
      src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
    />
    <Script
      strategy="afterInteractive"
      dangerouslySetInnerHTML={{
        __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${GA_TRACKING_ID}', {
              page_path: window.location.pathname,
            });
          `
      }}
    />
  </>
)

export default Analytics

Note que o afterInteractive é o comportamento padrão, mas eu costumo deixar bem explicito, até para que mesmo quem não conheça o Script saiba o que vai acontecer.

Outro detalhe é que eu tenho um arquivo lib/gtag que fica responsável pelos metodos e variáveis, que é assim:

export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID

// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
export const pageview = (url) => {
  window.gtag('config', GA_TRACKING_ID, {
    page_path: url,
  })
}

// https://developers.google.com/analytics/devguides/collection/gtagjs/events
export const event = ({ action, category, label, value }) => {
  window.gtag('event', action, {
    event_category: category,
    event_label: label,
    value: value,
  })
}

Note que para tudo funcionar precisamos criar uma variável NEXT_PUBLIC_GA_ID no nosso .env.production para que o mesmo funcione. Se quiser testar em local, basta criar um arquivo .env.local .

Colocando para funcionar e eniendo pageview

So com os arquivos acima ainda não vai funcionar, pois precisamos adicionar esse componente na nossa _app e também precisamos enviras as pageviews semper que tiver um acesso. na página Para isso, vamos precisar adicionar alguns detalhes, segue abaixo um arquivo _app so ​​com os trechos necessários:

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

import * as gtag from 'lib/gtag'
import Analytics from 'components/Analytics'

function App({ 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])

  return (
    <>
      <Component {...pageProps} />
      <Analytics />
    </>
  )
}

export default App

Se você notar, naprimeira parte nos temos:

const router = useRouter()

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

Essa parte é a responsável por a cada mudança de rota envirar o gtag.pageview daquela url.

E para termos o gtag funcionando no escopo global, nos adicionamos o componente de Analytics bem ao final da _app :

return (
  <>
    <Component {...pageProps} />
    <Analytics />
  </>
)

Com esses passos, aí sim toda pageview já será envirada ao Google Analytics de forma prática e sem impactar tanto a performance! =디

결론

Espero que tenha curtido esse post, ele já estava na minha lista de posts e tudo, mas semana passada mesmo teve um PR no repositório oficial do NextJS exatamente sobre isso, então achei bacana trazer para cá por agora e depois vou tambem, então fica ligado!