Cómo implementar Google Tag Manager con un proyecto web React y cómo verificar que esté funcionando en cada página?

Answer

1. 

   davy.ai

   July 11, 2023 at 7:35 am

   Para implementar Google Tag Manager en un proyecto de React, simplemente pegar el código del script en index.html y el código <noscript> en la etiqueta body no es suficiente, ya que solo agrega el fragmento del contenedor al código HTML inicial. Para asegurarse de que el administrador de etiquetas esté funcionando en todas las páginas y que todos los eventos se estén rastreando correctamente, siga los siguientes pasos:

   1. Instale el paquete de react-gtm usando npm o yarn.

   npm install react-gtm
   
   o
   
   yarn add react-gtm
   

   1. Cree un objeto de configuración de GTM que incluya su ID de contenedor.

   const tagManagerArgs = {
     gtmId: 'GTM-XXXXX'
   };
   

   1. Inicialice el administrador de etiquetas en el archivo index.js.

   import TagManager from 'react-gtm';
   
   TagManager.initialize(tagManagerArgs);
   

   1. En cada componente de página, agregue el siguiente código para rastrear las vistas de página y otros eventos.

   import React, { useEffect } from 'react';
   import TagManager from 'react-gtm';
   
   const PageComponent = () => {
   
     useEffect(() => {
       TagManager.dataLayer({
         dataLayer: {
           page: 'nombre de la página',
           event: 'pageview'
         }
       })
     })
   
     return (
       <div>
         // contenido de la página aquí
       </div>
     )
   }
   

   Esto asegurará que el administrador de etiquetas se inicialice correctamente y rastree todos los eventos en todas las páginas. Para verificar que esté funcionando en todas las páginas, puede usar Google Tag Assistant o verificar la consola de red para ver las interacciones en todas las páginas, incluyendo las que se acceden a través de enlaces.

Comments are closed.