Cómo añadir píxeles de Google Analytics y Facebook a WordPress mediante el contenedor del lado del servidor de Google Tag Manager (plugin de WordPress)

Autor
Stape
Publicado
10 ene 2021
También disponible

¿Desea configurar un contenedor de servidor de Google Tag Manager en su sitio de WordPress? ¿No está seguro de si necesita el etiquetado del lado del servidor? Si es así, este artículo es ideal para usted. Le mostraré cómo configurar correctamente el etiquetado del lado del servidor en WordPress (incluidas las tiendas de WooCommerce) y le explicaré los beneficios. Le guiaré sobre cómo impulsar Universal Analytics y el seguimiento de Facebook desde el lado del servidor.

¿Qué es el contenedor de servidor de Google Tag Manager para WordPress?Copie el enlace a esta sección

El contenedor de servidor de Google Tag Manager fue lanzado en el verano de 2020. Al igual que el contenedor web de Google Tag Manager, el etiquetado del lado del servidor se creó para gestionar diferentes píxeles de seguimiento llamados "etiquetas" en su sitio web. Pero la tecnología que hay detrás de los contenedores de servidor es totalmente diferente a la que teníamos en el contenedor web. Google también ha añadido un nuevo objeto al contenedor de servidor que se llama "Cliente".

El etiquetado del lado del servidor para WordPress le permite ejecutar los scripts de seguimiento en los servidores de la nube en lugar del lado del cliente (navegador del usuario). Permítame mostrarle la diferencia entre el etiquetado en la web y en el servidor en el ejemplo de Universal Analytics. Si está ejecutando un script de UA en el contenedor web, su sitio web se conecta a analytics.google.com y envía una solicitud de recopilación a su propiedad de UA. Si Universal Analytics se ejecuta a través de un contenedor de servidor, las solicitudes se envían al servidor de la nube. Y este servidor en la nube envía información a su cuenta de UA.

¿Cuáles son las principales ventajas de utilizar el etiquetado del lado del servidor en su sitio de WordPress (WooCommerce)?Copie el enlace a esta sección

1. Velocidad del sitio más rápida

Usted reducirá el peso de la página debido a que las solicitudes y el javascript no se cargan en el navegador. Todo se procesará en el servidor. Tenemos un caso de estudio que compara la diferencia de velocidad de la página entre la ejecución de scripts en la web frente al contenedor del servidor.

2. Transición de las cookies de terceros a las de primeros.

Durante los últimos años, la privacidad del usuario se ha convertido en uno de los temas más candentes en el mundo digital - tenemos regulaciones como GDPR (UE) y CCPA (California). Los navegadores empezaron a utilizar algoritmos que impiden el seguimiento del usuario, como la "Prevención Inteligente de Seguimiento" (ITP) de Safari y la "Prevención Mejorada de Seguimiento" (ETP) de Firefox. En 2020, Google anunció un plan para poner fin al soporte de las cookies de terceros. Y como la popularidad del AdBlocker crece anualmente entre un 1% y un 2%, la proporción de usuarios que bloquean los anuncios aumenta. Por ejemplo, alrededor del 27% de los usuarios estadounidenses navegan con bloqueadores de anuncios.

Si está ejecutando un contenedor de servidor desde un subdominio personalizado dentro de la jerarquía de su sitio web principal, hará una cookie de terceros - 1st party.

3. Control total de los datos.

Usted es dueño de todos los datos y decide qué información enviar a cada plataforma. Los proveedores de terceros (como Google Analytics, el píxel de Facebook, etc.) no obtendrán ninguna información que deseen, solo los datos que les envía a través de un servidor en la nube.

4. Oculte los ID de seguimiento y las claves API secretas.

Si utiliza el etiquetado del lado del servidor, los ID de seguimiento y las claves de la API estarán ocultos para los usuarios. 

Cómo añadir el contenedor de servidor de Google Tag Manager a WordPress (y WooCommerce): Una guía paso a pasoCopie el enlace a esta sección

1. Lo primero que debe hacer es crear un contenedor de servidor de Google Tag Manager. Si no tiene un contenedor web, debe configurarlo primero. Siga estas instrucciones de Google. Abra https://tagmanager.google.com/, elija el sitio web en el que desea configurar el etiquetado del lado del servidor. Haga clic en Admin y + en la sección del contenedor. Añada el nombre del contenedor, y en la plataforma de destino, seleccione servidor y haga clic en crear.

container configuration

2. En este paso, debe configurar su servidor de etiquetado (tagging server). Elija la opción de aprovisionamiento manual del servidor de etiquetado y copie su Container Config. Lo necesitaremos para los siguientes pasos.

3. Cree una cuenta dentro de nuestro servicio. Abra este enlace y siga las instrucciones. Si ya tiene la cuenta, elija ajustes, configuración del contenedor y pegue la configuración del contenedor del paso anterior. Si lo hace todo correctamente, el estado de su contenedor cambiará a Running.

4. Copie la URL del servidor de etiquetado de nuestro servicio. Abra su contenedor de servidor de Google Tag Manager, vaya a la configuración de administración y haga clic en la configuración del contenedor. Pegue la URL del servidor de etiquetado. 

tagging server url configuration

5. Añada el plugin del servidor GTM a su sitio web de WordPress. Vaya a la pestaña de plugins dentro de su wp-admin, haga clic en añadir nuevo, busque "GTM server", haga clic en instalar ahora y activar.

gtm server side in wordpress

6. Configure los ajustes del plugin. Si NO tiene previsto realizar un seguimiento de los eventos de comercio electrónico/comercio electrónico mejorado, utilice estos ajustes (para el seguimiento del comercio electrónico, siga el paso siguiente):

- Añada el contenedor web de Google Tag Manager en todas las páginas. Si tiene otros plugins de GTM, desactívelos.

- Añada la URL del lado del servidor de GTM. Puede encontrarla dentro de su cuenta de Stape.io en Tagging server URL.

- Añada el ID de su contenedor web de Google Tag Manager.

gtm server-side in wordpress

7. Si usted tiene un sitio web de eCommerce y desea realizar un seguimiento de los eventos de comercio electrónico mejorados dentro de WooCommerce, siga estas instrucciones:

- Para que el seguimiento del eCommerce funcione correctamente, es necesario instalar otro plugin. Haga clic en añadir nuevo plugin y busque Google Tag Manager para WordPress By Thomas Geiger. Añádalo a su sitio web y haga clic en activar. 

Configure el plugin Google Tag Manager para WordPress:

- Añada su ID de Google Tag Manager en la web

- Haga clic en la pestaña Integración, elija WooCommerce y habilite Track enhanced e-commerce.

- Vuelva a la configuración del plugin WP del servidor GTM. Elija la primera opción: "Actualizar la configuración del contenedor web GTM existente para trabajar con su contenedor del lado del servidor. (Esta opción no está activada si no podemos encontrar un contenedor web existente)". Puede encontrar la URL del lado del servidor de GTM dentro de su cuenta del servidor de GTM en la URL del servidor de etiquetado.

gtm server-side for wordpress

8. Pruebe su configuración. Si ha hecho todo correctamente, debería ver los eventos de dataLayer en el contenedor web de Google Tag Manager. 

Configuración de Universal Analytics del lado del servidor en su sitio de WordPress (WooCommerce)Copie el enlace a esta sección

9. Abra el contenedor web de Google Tag Manager, vaya a la variable Universal Analytics y añada la URL de transporte. Esa es la misma URL que ha añadido al contenedor del servidor de Google Tag Manager en el paso 4. 

Asegúrese de que ha activado Enhanced Ecommerce dentro de la configuración de la vista de Google Analytics. Configure el parámetro {{event}} dentro de Leer datos de la variable.

variable configuration

10. En este paso, configuraremos la etiqueta Universal Analytics dentro del contenedor web que enviará los eventos de comercio electrónico mejorados al contenedor del servidor. 

Comience por crear una nueva etiqueta de Universal Analytics dentro del contenedor web. Utilice esta configuración:

- Tipo de pista: evento

- Categoría: EnhancedEcommerce

- Acción: seleccione la variable {{Event}} (si no se ve la variable de evento, asegúrese de haberla activado dentro de la sección de variables)

- Configuración de Google Analytics: Elija su ID de Universal Analytics

- Seleccione Activar la configuración de override en esta etiqueta

- Haga clic en Más ajustes -> E-commerce -> Seleccione Verdadero, active Usar Data Layer.

Cree un trigger que dispare este evento:

- Tipo de activador: evento personalizado

- Nombre del evento:

gtm4wp.productClickEEC|gtm4wp.addProductToCartEEC|gtm4wp.removeFromCartEEC|gtm4wp.checkoutOptionEEC|gtm4wp.checkoutStepEEC|gtm4wp.changeDetailViewEEC

Active el uso de regex matching.

11. Pruebe la etiqueta que ha creado en el paso anterior. Para ello, activa los modos de vista previa del contenedor web y del servidor. Haga clic en el nombre del evento, compruebe que GTM ve las variables y los datos del evento.

12. En caso de que quiera tener una variable separada para cada dato del producto, puede crear una variable personalizada. En el ejemplo siguiente, extraigo el item_id. Para ello, vaya a las variables, elija el tipo de datos de eventos, ruta crítica items.0.item_id

13. Si quiere aprovechar al máximo la configuración de Universal Analytics del lado del servidor, le sugiero que envíe las solicitudes de UA desde un subdominio personalizado. Le ayudará a mejorar la calidad de los datos de UA, ya que AdBlocker e ITP no bloquearán las solicitudes de UA. Por favor, siga esta guía para crear y configurar un subdominio personalizado para su contenedor de servidor. Una vez configurado el dominio personalizado, no olvide actualizar la URL de etiquetado dentro del plugin wp del servidor GTM, la variable Universal Analytics del contenedor del servidor de Google Tag Manager dentro de su contenedor web de Google Tag Manager. 

Configuración del píxel del lado del servidor de Facebook en WordPress (WooCommerce)Copie el enlace a esta sección

15. Añada la plantilla de etiqueta del servidor de Facebook en el contenedor del lado del servidor de Google Tag Manager. 

16. Cree una etiqueta dentro del contenedor del servidor que dispare la etiqueta de Facebook que acaba de importar. Usted tendrá que especificar el token de acceso a la API y el ID de píxel de Facebook. Para crear un token de la API, siga estas instrucciones. También es posible que desee añadir un ID de prueba. Usted puede encontrar el ID de prueba en su Events Manager dentro del Facebook Business Manager.

tag configuration

17. Nuestra etiqueta mapea automáticamente los eventos de Universal Analytics en eventos estándar de FB. Si el mapeo del evento no es posible, entonces registramos este evento como un evento personalizado dentro de FB usando el nombre de Universal Analytics. También pasaremos parámetros del producto como product_id, categoría, etc.

gtm4wp.addProductToCartEEC = add_to_cart

gtm4wp.productClickEEC = view_item 

gtm4wp.checkoutOptionEEC = begin_checkout 

gtm4wp.checkoutStepEEC = add_payment_info 

gtm4wp.orderCompletedEEC = purchase

18. Abra el Events Manager dentro de Facebook Business Manager -> haga clic en Probar eventos. Usted debe ver los eventos allí. Si todo es correcto, publica los cambios en los eventos de la web y el servidor de GTM.

test events gtm server

Conclusión:Copie el enlace a esta sección

¡Enhorabuena! Ha configurado con éxito el etiquetado del lado del servidor de Google Tag Manager en su sitio de WordPress (WooCommerce). Además, Universal Analytics y los píxeles de Facebook se ejecutan desde el servidor. Esto significa que ahora el seguimiento de las conversiones es más preciso, los datos son más seguros y el sitio web funciona más rápido.

El etiquetado del lado del servidor de GTM no sustituye por completo la necesidad de una configuración de seguimiento tradicional. Su sitio web necesitará eventos de activación para enviarlos al servidor de GTM.

Si usted necesita ayuda para realizarlo, ¡no dude en ponerse en contacto con nosotros!

Podemos ayudarle con WordPress!

Todo lo que tiene que hacer es pulsar Obtener ayuda, rellenar el formulario y le enviaremos un presupuesto.

Obtener ayuda

Publicaciones relevantes

7 sep 2021

Errores de la API de conversión de Facebook y cómo solucionarlos

La configuración de la API de conversión de Facebook puede ser confusa. Pero después de hacer el tremendo trabajo de mover el seguimiento de FB al servidor y esperar que todo esté bien, puede que al día siguiente inicie sesión en su gestor de eventos y vea advertencias rojas y amarillas para los eventos enviados desde el servidor.

6 feb 2021

3 Sencillos Pasos para Probar Universal Analytics/GA4 del lado del servidor y la API de conversión de Facebook

Google Tag Manager se diseñó inicialmente para facilitar la vida de los profesionales del marketing. Si utiliza el contenedor web Google Tag Manager, ya no tendrá que pedir a los desarrolladores que añadan píxeles de seguimiento y esperar a la siguiente actualización para ver su seguimiento en la producción.

28 feb 2021

Google Tag Manager del lado del servidor: Cómo configurar el Tag Manager del servidor, Universal Analytics, GA4 y la API de conversión de Facebook

El etiquetado del lado del servidor (server-side tagging) ha sido una de las principales tendencias de la analítica web en los últimos dos años. Los bloqueadores de anuncios, la protección de seguimiento inteligente, las restricciones a las cookies de terceros y las normativas como el GDPR han hecho que las empresas de análisis y publicidad empiecen a preocuparse por cómo y qué información recopilan sobre los visitantes del sitio. El etiquetado del lado del servidor permite trasladar las etiquetas de terceros fuera de su sitio y a un servidor en la nube. En este caso, los píxeles de terceros se cargan directamente desde el servidor podría en lugar de su sitio. En este artículo, explicaré y demostraré los aspectos básicos de la configuración del contenedor del servidor de Google Tag Manager, el servidor de Universal Analytics, GA4 y la API de conversión de Facebook.

Aloje su servidor GTM en Stape¡ahora mismo!