Estoy creando una aplicación next.js y me gustaría cargar Google Tag Manager (GTM) solo DESPUÉS de cargar toda la página. El objetivo detrás de esto es mejorar el rendimiento del sitio web.
¿Alguien ha descubierto una forma de ejecutar código JS de terceros (como GTM) solo después de que la aplicación se haya cargado por completo?
Actualmente estoy agregando el uso de la forma 'convencional' para inyectar GTM en mi aplicación next.js ( fuente ) agregando la etiqueta <script> en <Head> y la etiqueta <noscript> en la etiqueta <body> en el _document.js Archivo _document.js :
<Head> {/* Google Tag Manager */} <script dangerouslySetInnerHTML={{ __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-XXXXXXX');` }} /> {/* End Google Tag Manager */} ... ... </Head> <body style={{ backgroundColor: theme.palette.primary.background }}> {/* Google Tag Manager (noscript) */} <noscript dangerouslySetInnerHTML={{ __html: '<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe>' }} /> {/* End Google Tag Manager (noscript) */}Aquí está el ejemplo de código a continuación para lograr la carga diferida para los scripts de Google Tag Manager.
Puede usar el componente Script incorporado proporcionado por Next Js.
import Script from "next/script"; <Script strategy="lazyOnload" dangerouslySetInnerHTML={{ __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-XXXXXXX');`, }} />¿Cómo estás midiendo el rendimiento?
Directamente desde los documentos de Next.js: https://nextjs.org/docs/basic-features/script#afterinteractive , desea hacer esto:
<Script strategy="afterInteractive" id="your-id" dangerouslySetInnerHTML={{ __html: ` (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer', 'GTM-XXXXXX'); `, }} /> afterInteractive simplemente coloca el script antes de la etiqueta del cuerpo de cierre, por lo que se carga después de que la página sea interactiva .
Es mejor que coloque la etiqueta <noscript> en _document.tsx , es más ordenado.
He escrito un artículo bastante detallado sobre cómo hacer esto: https://morganfeeney.com/how-to/integrate-google-tag-manager-with-next-js
Aunque no es un tema trivial, puede probar Effect Hook, que puede ejecutar código adicional después de que React haya actualizado el DOM. https://reactjs.org/docs/hooks-effect.html