Evitá que el script de Google Analytics 4 retrase la carga de tu página en WordPress sin usar plugins externos

Recuperá tu ID de medición

Entrá a tu cuenta de Google Analytics 4, andá a Administrar (abajo en el panel lateral izquierdo) y en la columna Propiedad (la de la derecha) te aseguras que esté seleccionada la propiedad de tu web.

Luego le das clic en Flujo de datos, clic en el nombre que le diste a tu flujo y te aparecerá esta pantalla:

Ahí está tu ID de medición, en seguida lo usamos.

Abrí tu plugin personalizado de WordPress

En caso de que aún no lo tengás, aquí podés aprender como crear un plugin personalizado para WordPress.

Suponiendo que ya lo tenés creado, en el menú lateral de tu WordPress entrá a Plugins y le das clic en Editor de archivos de plugins. Te tiene que salir una pantalla como esta:

En el menú desplegable buscás por nombre tu plugin personalizado, lo seleccionás y le das clic al botón Seleccionar.

Irás al editor de código de tu plugin personalizado:

Código para mejorar la carga de Google Analytics 4

Ahora, en el área de texto del editor copiá el siguiente código:

    /**
     * Agregar el script de Google Analytics en lo más bajo de la etiqueta body,
     * y que se active luego del evento 'load'.
     * */
    function load_google_analytics_script() {
        ?>
        <script defer>
            window.addEventListener('load', function() {
                var gaScript = document.createElement('script');
                gaScript.async = true;
                gaScript.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX'; // Reemplazá aquí tu ID de medición.
                
                gaScript.onload = function() {
                    // console.log('Script de Google Analytics cargado y listo para rastrear eventos.');
    
                    // Aquí puedes iniciar el rastreo de eventos personalizados si lo deseas
                    window.dataLayer = window.dataLayer || [];
                    function gtag(){dataLayer.push(arguments);}
                    gtag('js', new Date());
                    gtag('config', 'G-XXXXXXXXXX'); // Reemplazá aquí tu ID de medición.
                };
                document.body.appendChild(gaScript);
            });
        </script>
        <?php
    }
    add_action('wp_footer', 'load_google_analytics_script', 9999);

Recordá reemplazar G-XXXXXXXXXX por tu ID de medición.

Veamos paso a paso qué hace este código (cortesía de ChatGPT):

1. Definición de la función load_google_analytics_script(): Esto es el inicio de una función que agrega el script de Google Analytics en el pie de página (footer) de tu sitio WordPress.
2. Apertura de etiqueta <script> con defer: La etiqueta <script> se abre con el atributo defer. Esto indica que el script se cargará de manera asíncrona, lo que permite que la página continúe cargando sin esperar a que el script esté listo.
3. window.addEventListener('load', function() {...}): Se añade un event listener que escucha el evento load del objeto window. Esto asegura que el código interno se ejecute solo después de que todos los recursos de la página, como imágenes, estilos y otros scripts, se hayan cargado por completo.
4. Creación de un elemento <script> dinámico: Se crea un elemento <script> utilizando el método document.createElement('script'). Esto permite que el script de Google Analytics se agregue al DOM.
5. Configuración de atributos del script: Se establecen varios atributos para el elemento <script> creado:
   • async = true: Indica que el script se cargará de manera asíncrona.
   • src: La URL del script de Google Analytics que se cargará.
6. gaScript.onload = function() {...}: Se define una función que se ejecutará cuando el script de Google Analytics se cargue exitosamente. En esta función:
   • Se inicializa el objeto window.dataLayer para el seguimiento de eventos personalizados.
   • Se define la función gtag() que se utilizará para enviar datos al servidor de Google Analytics.
   • Se llama a gtag('js', new Date()) para indicar que se ha cargado el script de Google Analytics.
   • Se llama a gtag('config', 'G-PETRHRNLGN') para configurar y activar el seguimiento con tu identificador.
7. document.body.appendChild(gaScript): El elemento <script> creado se agrega como un hijo del elemento <body> utilizando el método appendChild(). Esto asegura que el script se cargue en la parte más baja de la página, como lo deseas.
8. Cierre de la etiqueta <script>: El código JavaScript se cierra.
9. Etiqueta <?php: Se abre una etiqueta PHP para incorporar código PHP en medio del script. En este caso, se está utilizando para imprimir el código JavaScript anterior.
10. Cierre de la función load_google_analytics_script(): Se cierra la función definida al principio.
11. add_action('wp_footer', 'load_google_analytics_script', 9999): Se agrega la acción load_google_analytics_script() al pie de página (wp_footer) del sitio WordPress con una prioridad alta de 9999. Esto asegura que el script se ejecute al final del footer y que otros scripts en la página se ejecuten antes.

En resumen, el código inserta el script de Google Analytics 4 antes del cierre de la etiqueta </body>, y lo ejecuta después de que la página ya cargó todos los recursos necesarios.