Seguramente ya empezaste a crear tu aplicaci贸n web o tu blog, y quieres instalar el tag Google Analytics para revisar cu谩ntos usuarios han visto tu p谩gina o empezar a tomar esos datos importantes. Te metiste a tu cuenta de Analytics y, 隆oh sorpresa!. Te pide que insertes un Script tag con un Script (c贸digo de javascript) y no funciona. Te metiste a ChatGPT y te dice soluciones, que en realidad no funcionan, o si funcionan pero le quita la parte de SSR a tu aplicaci贸n, que es el objetivo de usar NextJS.
No te desesperes, que aqu铆 vas a encontrar la soluci贸n efectiva y sencilla.
Estos son los pasos a seguir para instalar Google Analytics Tag
Lo primero que debemos entender es que debemos instalar una librer铆a que est谩 "incluida" en nuestra aplicaci贸n de NextJS para poder activar el tag de Google.
npm install @next/third-parties@latest next@latest
Si est谩s usando Pages Router
Despu茅s, debemos ir al archivo _app.js dentro del folder de pages y debes importar el componente de GoogleTagManager de la librer铆a antes mencionada, y agregarlo dentro de la funcion junto con tu gtmId (es el ID de tu proyecto). Justo como en el ejemplo siguiente:
import { GoogleTagManager } from '@next/third-parties/google'
export default function MyApp({ Component, pageProps }) {
return (
<>
<Component {...pageProps} />
<GoogleTagManager gtmId="GTM-XYZ" />
</>
)
}
Esto va a hacer qu茅 el Tag de Google Analytics, est茅 en toda tu aplicaci贸n. Si s贸lo lo necesitas en una sola p谩gina, entonces, no lo ingreses en _app.js y agr茅gala en la p谩gina que necesites.
Si de esa p谩gina, se desprenden m谩s p谩ginas, entonces el Tag tomar谩 las p谩ginas hijo.
Para mandar eventos
Si quieres mandar alg煤n evento como el de una compra o que hacen cierta acci贸n en tu p谩gina y que es relevante para tu negocio o aplicaci贸n, entonces debes modificar lo siguiente:
Debes ir a la p谩gina, con el evento (recuerda que debes tener el Tag de Google en esa p谩gina o en la p谩gina "padre") e importar el componente sendGTMEvent de la misma librer铆a. Despu茅s deber谩s agregarlo para que se active al hacer click como el siguiente ejemplo:
import { sendGTMEvent } from '@next/third-parties/google'
export function EventButton() {
return (
<div>
<button
onClick={() => sendGTMEvent({ event: 'buttonClicked', value: 'xyz' })}
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
>
Enviar Evento
</button>
</div>
)
}
Recuerda que el evento y el valor deber谩n ser los mismos que configuraste en tu cuenta de Google.
Si est谩s usando App Router
Despu茅s, debemos ir al archivo layout.js dentro del folder de pages y debes importar el componente de GoogleTagManager de la librer铆a antes mencionada, y agregarlo dentro de la funcion junto con tu gtmId (es el ID de tu proyecto). Justo como en el ejemplo siguiente:
import { GoogleTagManager } from '@next/third-parties/google'
export default function RootLayout({ children }) {
return (
<html lang="en">
<GoogleTagManager gtmId="GTM-XYZ" />
<body>{children}</body>
</html>
)
}
Esto va a hacer qu茅 el Tag de Google Analytics, est茅 en toda tu aplicaci贸n. Si s贸lo lo necesitas en una sola p谩gina, entonces, no lo ingreses en layout.js y agr茅gala en la p谩gina que necesites.
Si de esa p谩gina, se desprenden m谩s p谩ginas, entonces el Tag tomar谩 las p谩ginas hijo.
Para mandar eventos
Si quieres mandar alg煤n evento como el de una compra o que hacen cierta acci贸n en tu p谩gina y que es relevante para tu negocio o aplicaci贸n, entonces debes modificar lo siguiente:
Debes ir a la p谩gina, con el evento (recuerda que debes tener el Tag de Google en esa p谩gina o en la p谩gina "padre") e importar el componente sendGTMEvent de la misma librer铆a. Despu茅s deber谩s agregarlo para que se active al hacer click como el siguiente ejemplo:
'use client'
import { sendGTMEvent } from '@next/third-parties/google'
export function EventButton() {
return (
<div>
<button
onClick={() => sendGTMEvent({ event: 'buttonClicked', value: 'xyz' })}
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
>
Send Event
</button>
</div>
)
}
Recuerda que el evento y el valor deber谩n ser los mismos que configuraste en tu cuenta de Google.