Etiquetado del lado del servidor para Shopify
¿Está buscando una manera fácil y rápida de configurar el etiquetado del lado del servidor de Shopify? No busque más allá de la aplicación Server GTM para Shopify de Stape. Con nuestra aplicación, puede insertar fácilmente un script web de Google Tag Manager en el sitio web, configurar un dominio personalizado y un cargador personalizado, enviar datos de usuario y de eventos de comercio electrónico a la capa de datos y configurar webhooks. Todas estas funciones le ayudarán a que el seguimiento sea más preciso al prolongar la vida útil de las cookies, hacer que el seguimiento del navegador sea resistente a las tecnologías de prevención del seguimiento y enviar datos fiables a las plataformas de publicidad y marketing a través del punto final del servidor.
En esta entrada del blog, exploraremos cómo configurar e instalar la aplicación Stape para Shopify para que pueda utilizar estas poderosas funciones de inmediato.
Beneficios de usar el etiquetado del lado del servidor para Shopify
El etiquetado del lado del servidor puede disparar el éxito de sus campañas de marketing con un seguimiento preciso de las conversiones y análisis de usuarios. Sin embargo, sacar el máximo provecho requiere una configuración meticulosa - algo que nadie debe pasar por alto.
Para hacer la implementación del etiquetado del lado del servidor lo más fácil posible, hemos creado la aplicación Server GTM Shopify. Esta app es de uso gratuito y ayuda a configurar fácilmente el contenedor del servidor de Google Tag Manager para la tienda Shopify. Pero primero, hablemos de los principales beneficios del etiquetado del lado del servidor para los sitios de Shopify.
1. Mayor precisión de los datos. El etiquetado del lado del servidor puede ayudar a garantizar una recopilación de datos más precisa al reducir el riesgo de pérdida de datos o errores causados por bloqueadores de anuncios, extensiones del navegador u otros factores del lado del cliente.
2. Atribución precisa de las conversiones. Debido al aumento de la vida útil de las cookies y los datos de usuario enviados a través del servidor, las redes publicitarias pueden atribuir con mayor precisión las conversiones a las campañas de marketing.
3. Mejora del rendimiento del sitio web. Con el etiquetado del lado del servidor, las etiquetas se cargan en el servidor en lugar de en el lado del cliente, lo que reduce la cantidad de código que debe cargarse en el navegador del usuario. Esto puede mejorar la velocidad de carga del sitio web, lo que es crucial para la experiencia del usuario y el SEO.
4. Mayor seguridad. El etiquetado del lado del servidor puede ayudar a mejorar la seguridad del sitio web al reducir el riesgo de filtración de datos u otras amenazas causadas por vulnerabilidades del lado del cliente.
Cómo configurar el etiquetado del lado del servidor en su tienda Shopify
Paso 1. Configure el contenedor de servidor de Google Tag Manager en Stape
Expanda el elemento desplegable a continuación para consultar la guía detallada.
Cómo configurar el contenedor de sGTM
Paso 1. Cree un contenedor de servidor en Google Tag Manager
➡️ Nota
Antes de configurar tu contenedor de Google Tag Manager del lado del servidor, es importante configurar primero el contenedor web de GTM, ya que:
- El contenedor web recopila eventos, parámetros e interacciones de los usuarios en tu sitio web.
- Envía estos datos a tu contenedor del lado del servidor.
Sigue la documentación oficial de Google.
1. Selecciona tu cuenta de GTM → Haz clic en Administrador → Haz clic en el botón "+" junto al nombre del Contenedor.
2. Agrega el Nombre del Contenedor → En la plataforma de destino, elige "Servidor". Haz clic en Crear.
3. Elige "Provisión manual del servidor de etiquetas". Copia la configuración de tu contenedor. La necesitaremos en los siguientes pasos.
Paso 2. Cree una cuenta en Stape para alojar su contenedor de sGTM
1. Ve a stape.io y crea una cuenta o inicia sesión.
2. Haz clic en Crear contenedor sGTM en la página principal.
3. Introduce los datos de tu contenedor.
- Nombre del contenedor: asigna un nombre a tu contenedor (por comodidad, te recomendamos utilizar el mismo nombre que le diste al contenedor del servidor en GTM).
- Configuración del contenedor: pega los datos de Configuración del contenedor que copiaste de la ventana emergente Instalar Google Tag Manager. Si los has perdido, ve a Google Tag Manager → haz clic en Admin → haz clic en Configuración del contenedor → copia la cadena que aparece en Configuración del contenedor.
- Ubicación del servidor: para obtener el mejor rendimiento, elige la ubicación del servidor más cercana a donde se encuentran la mayoría de tus clientes. Consulta la lista de ubicaciones de servidor disponibles aquí. Además, puedes optar por la opción de ubicación de servidor multizona global si tienes tráfico procedente de diferentes regiones. Esta opción redirigirá automáticamente las solicitudes entrantes a la zona disponible más cercana en función de la dirección IP del usuario.
A continuación, haz clic en Crear contenedor.
4. Elige un plan para tu contenedor. Puedes empezar con un plan gratuito. Haz clic en Continuar con un plan gratuito.
5. Verás el estado de tu contenedor, la configuración del contenedor y el nombre del plan. La implementación de un contenedor de servidor tarda unos 5 minutos.
Actualiza la página para que se actualice el estado. Si la configuración del lado del servidor de Google Tag Manager se ha realizado correctamente, deberías ver el estado En ejecución.
Paso 2. Añada y configure la aplicación Stape Conversion Tracking para Shopify
2.1 Instale la aplicación Stape Conversion Tracking en su tienda.
La aplicación de seguimiento de conversiones de Stape para Shopify se puede instalar de forma gratuita desde el marketplace de Shopify.
2.2 Configure la pestaña General
En la pestaña General encontrará todos los ajustes relacionados con la inserción del fragmento de GTM en todas las páginas de su tienda Shopify de forma resistente a bloqueadores de anuncios, ITP y limitaciones de duración de cookies.
- Use Shopify Markets
Marque esta casilla si dispone de varios mercados en Shopify. Con esta función podrá configurar la inserción de GTM de forma independiente para cada mercado. Si la función está desactivada, todos los mercados utilizan la configuración predeterminada.
Al activarla, verá los campos que debe configurar para cada mercado:
- Insert GTM: si está marcado, el fragmento de GTM se añade a todas las páginas del sitio web.
- GTM container ID: el ID de su contenedor web de GTM.
- Customer privacy API: si está activado, la aplicación retrasa la carga de GTM hasta que el visitante acepte las cookies a través del banner Customer Privacy de Shopify. Esta opción no se recomienda de forma predeterminada.
- Custom domain, Stape container ID y Cookie Keeper: estos campos están asociados al seguimiento del lado del servidor; configúrelos si utiliza o tiene previsto utilizar la configuración server-side. A continuación explicamos dónde encontrar los valores de cada campo.
- GTM web container ID
Especifique aquí el ID de su contenedor web de GTM.
- Custom domain
Es fundamental utilizar su propio subdominio para que las cookies de origen funcionen correctamente y el seguimiento en general sea fiable. Si aún no ha añadido un subdominio a su contenedor de sGTM, siga la guía sobre dominios personalizados para hacerlo.
- Custom Loader
Se recomienda encarecidamente su uso para aumentar la protección frente a bloqueadores de anuncios.
Active la casilla correspondiente y especifique su identificador de contenedor de Stape. Para encontrarlo, inicie sesión en su cuenta de Stape, seleccione el contenedor de sGTM y localice el identificador del contenedor en la sección Settings.
- Cookie Keeper
Esta función le permite minimizar el impacto de las últimas restricciones ITP. Antes de activarla a través de la aplicación, asegúrese de haberla habilitado en Stape dentro de su contenedor. Para configurar Cookie Keeper, haga clic en el elemento desplegable y siga las instrucciones:
Cómo configurar Cookie Keeper
Inicie sesión en su cuenta de Stape y seleccione su contenedor de sGTM desde el panel de control.
2. Vaya a Power-ups y haga clic en Use junto al panel de Cookie Keeper.
3. Active el interruptor de Cookie Keeper para habilitarlo.
4. En Standard cookies, seleccione qué cookies desea extender.
Cookies personalizadas
Si las cookies que necesita no figuran en la lista estándar, puede configurar cookies personalizadas. Introduzca el nombre de la cookie y, opcionalmente, establezca una fecha de vencimiento en días (déjelo en blanco para mantenerla indefinidamente).
5. Haga clic en Save changes.
Prueba de la configuración
Los pasos siguientes utilizan la cookie _ga de Google Analytics como ejemplo, aunque puede aplicar el mismo procedimiento para cualquier plataforma. Antes de realizar la prueba, asegúrese de haber configurado al menos una etiqueta de GA4.
- Abra el navegador Safari (versión 16.4 o posterior). Para verificar la versión, haga clic en Safari en la barra de menú y seleccione About Safari.
- Acceda a la URL de su sitio añadiendo el parámetro
?galid=test123para establecer la cookie_ga. Por ejemplo:yourwebsite.com/?galid=test123. - Haga clic derecho en la página → Inspect Element → pestaña Storage → Cookies.
- Localice
_ga, copie y guarde su valor en algún lugar, y luego elimine la cookie (clic derecho sobre la cookie → Delete). - Recargue la página dos veces.
- Compruebe que la cookie
_gaha vuelto a aparecer con el mismo valor. Si es así, Cookie Keeper funciona correctamente.
- GTM snippet block
Aquí puede obtener el fragmento de GTM para instalarlo en páginas que están fuera de su tema de Shopify (como páginas creadas por aplicaciones de terceros como Zipify).
2.3 Configure la pestaña Data Layer
En la pestaña Data Layer encontrará los eventos de capa de datos que puede activar y configurar. El segundo cuadro le permite controlar si los nombres de los eventos reciben el sufijo _stape para evitar conflictos en GTM. Si está desactivado, los eventos conservan sus nombres originales.
Aquí encontrará la lista completa de eventos y sus cargas útiles, que se añaden a través de la aplicación de Stape.
Activación de Data Layer:
- Active la casilla Add ecommerce Data Layer events.
- Guarde los cambios.
- Copie el código del pixel personalizado que aparece en el cuadro inferior de la pestaña Data Layer y siga las instrucciones para añadirlo y activarlo.
En la sección Customer privacy, bajo el desplegable de permisos, asegúrese de seleccionar Not required. El fragmento de código únicamente genera la capa de datos; no establece ninguna cookie ni reporta datos a terceros.
En la pestaña Data Layer también encontrará la opción Log events to console (Dev), una herramienta de depuración para desarrolladores y administradores de tiendas. Cuando está activada, registra los eventos de ecommerce en la consola del navegador, muestra las cargas útiles de los eventos enviados al contenedor de servidor GTM/Stape para su verificación y facilita la depuración de las capas de datos.
Esta opción es únicamente para desarrollo y debe desactivarse en producción para evitar registros innecesarios en la consola.
2.4 Configure la pestaña Webhooks
Los eventos de webhook se configuran en la pestaña Webhook.
Nota: el problema con los webhooks en Shopify es que no contienen datos de cookies, que son fundamentales para el seguimiento en cualquier plataforma, por lo que se recomienda utilizar eventos de webhook únicamente como último recurso si, por alguna razón, no puede rastrearlos de forma online.
En esta pestaña se configuran los eventos de webhook.
Para activar un webhook, active la casilla correspondiente, especifique la URL del contenedor de servidor de GTM y la ruta /path a la que deben enviarse los webhooks.
Puede suscribirse a webhooks cuando se crea un nuevo pedido o cuando se realiza un reembolso en un pedido.
Aquí encontrará algunas entradas de blog útiles sobre el uso y la depuración de webhooks:
2.5 La pestaña Customer Match
Permite rellenar y actualizar automáticamente las listas de Customer Match en Google Ads.
Omita la configuración de esta pestaña si no ejecuta campañas en Google Ads o no utiliza listas de Customer Match.
Paso 3. Envíe datos al contenedor de servidor de Google Tag Manager
El contenedor del servidor no tiene acceso directo a los datos del lado del navegador —como la capa de datos, las cookies o el contexto de la página—, por lo que estos datos deben enviarse explícitamente desde el contenedor web. Para ello, existen dos métodos disponibles:
- Data Tag, junto con Data Client en el contenedor del servidor para recibir y analizar sus solicitudes, envía variables de la capa de datos y otros parámetros independientemente de cualquier plataforma específica;
- Google Analytics 4, que envía datos a través de una etiqueta de Google configurada con la URL del contenedor del servidor. A continuación se describen ambos métodos.
Cómo enviar datos desde la web al contenedor del servidor mediante la etiqueta de datos
Paso 1. Instala la plantilla de Data Tag:
- Haz clic en el menú Etiquetas.
- Haz clic en Nuevo.
- Abre la sección Plantillas de tu contenedor de Google Tag Manager para la web → añade la etiqueta de datosdesde la galería de plantillas.
- Haz clic en la pestaña Configuración de la etiqueta.
- Haz clic en Descubre más tipos de etiquetas en la Galería de plantillas de la comunidad → busca Etiqueta de datos → haz clic en Añadir al espacio de trabajo → haz clic en Añadir.
Paso 2. A continuación, configuraremos Data Tag para el evento de visita a la página:
- En Nombre del evento, puedes seleccionar un nombre de evento estándar, añadir un nombre de evento personalizado o añadir un nombre de evento dinámico utilizando la variable {{Event}}.
- Introduce tu URL del lado del servidor de GTM (puedes encontrar tu URL del lado del servidor de GTM dentro de la cuenta de stape.io abriendo el contenedor sGTM y consultando la sección Dominio).
- Marca cómo deseas que se envíen los datos:
- Enviar todo desde DataLayer: enviará toda la información que tengas en la capa de datos web de GTM a los datos de eventos del servidor de GTM.
- Enviar datos comunes: añade a la solicitud page_location, page_path, page_hostname, page_referrer, page_title, page_encoding, screen_resolution y viewport_size.
- Añadir estado de consentimiento: añade el objeto consent_state a la solicitud. Incluye las siguientes propiedades: ad_storage, analytics_storage, functionality_storage, personalization_storage y security_storage.
- Añadir cookies comunes: la etiqueta enviará cookies comunes en «eventData» para evitar algunas limitaciones de las plataformas de comercio electrónico. Por ejemplo, esto es necesario para los eventos que funcionan en las páginas de pago de Shopify.
- En Datos del evento, puedes añadir cualquier dato manualmente a la solicitud. También puedes aplicar transformaciones (como hash, recorte, etc.) o almacenar datos.
- En Datos del usuario, puedes enviar parámetros de usuario y aplicar transformaciones o almacenar datos.
- En Configuración y configuración avanzada encontrarás precisamente eso: opciones de configuración avanzadas. A menos que sepas lo que estás haciendo, es mejor no modificar estos ajustes.
- Asigna a tu etiqueta un nombre descriptivo y haz clic en Guardar.
Paso 3. A continuación, puedes configurar Data Tag para otros eventos. El ejemplo siguiente muestra cómo configurar eventos de comercio electrónico cuando se dispone de Data Layer.
Esta etiqueta activa cada evento de comercio electrónico en la capa de datos. En este ejemplo, todos los eventos de comercio electrónico terminan en _stape, por lo que utilizamos una expresión regular que incluye todos los eventos que contengan _stape.
Ejemplo de la variable que extrae los datos de usuario de la capa de datos.
Paso 4. A continuación, descarga Data Client desde GitHub:
- Sigue este enlace.
- Haz clic en Código → Descargar ZIP.
Paso 5. Ahora, para importar Data Client:
- Abre el contenedor de Google Tag Manager de tu servidor.
- Haz clic en Plantillas.
- En Clientes, haz clic en Nuevo.
- Haz clic en los tres puntos de la esquina superior derecha.
- Haz clic en Importar y selecciona el cliente de datos que has descargado de GitHub (es posible que tengas que descomprimir primero el archivo).
- Una vez finalizada la importación, haz clic en Guardar.
Paso 6. Abre la pestaña Clientes y haz clic en Nuevo → selecciona Data Client → haz clic en Guardar.
Paso 7. Abre las pantallas de vista previa de GTM para web y servidor y comprueba la configuración. Deberías ver que Data Tag se activa en el contenedor de GTM para web y que Data Client analiza las solicitudes de Data Tag en sGTM.
Cómo enviar datos del contenedor web al de servidor a través de Google Analytics 4
Paso 1. Crea una variable de configuración para la URL del contenedor del servidor. Para ello:
- Haz clic en el menú Variables.
- Haz clic en Nuevo debajo de la barra Variable definida por el usuario.
- Haz clic en la barra Configuración de la variable.
- Selecciona el tipo Etiqueta de Google: Ajustes de configuración.
- Haz clic en Añadir parámetro.
- Introduce los siguientes parámetros:
- Parámetro de configuración: server_container_url.
- Valor: la URL de tu contenedor de servidor de Tag Manager.
- Asigna a tu variable un nombre descriptivo y haz clic en Guardar.
Paso 2. Crea una etiqueta de Google Analytics 4:
- Haz clic en el menú Etiquetas.
- Haz clic en Nuevo.
- Haz clic en la pestaña Configuración de la etiqueta.
- Selecciona Google Analytics → Etiqueta de Google.
- En ID de la etiqueta, introduce el ID de tu cuenta de GA4 (para encontrarlo, ve a tu GA4 → haz clic en Admin → Flujos de datos → selecciona el flujo → busca el ID de medición).
- En Ajustes de configuración, selecciona la variable del contenedor del servidor que has creado anteriormente.
- En Activación, asegúrate de que la opción Inicialización: activador de todas las páginas esté seleccionada.
- Asigna a tu etiqueta un nombre descriptivo y haz clic en Guardar.
- Haz clic en Publicar para que el contenedor entre en funcionamiento.
Paso 3. A continuación, veamos cómo crear un evento de GA4, utilizando el evento «Todos los clics» como ejemplo:
- Haz clic en el menú Etiquetas.
- Haz clic en Nuevo.
- Haz clic en la pestaña Configuración de etiquetas.
- Selecciona Google Analytics → Google Analytics: Evento GA4.
- Introduce tu ID de medición (del menú Flujos de datos de GA4).
- Asigna un nombre descriptivo a tu evento.
- Haz clic en Activación → Todos los clics.
- Asigna un nombre descriptivo a la etiqueta.
- Haz clic en Guardar.
Ejemplo de cómo crear un evento de GA4
A continuación, tendrás que configurar el envío de los datos de tus eventos a tu plataforma de marketing o análisis. Los pasos exactos dependerán de la plataforma que elijas. Consulta nuestras guías sobre las plataformas más populares para obtener más información:
Paso 4. Configure el seguimiento dentro del contenedor de servidor de Google Tag Manager
La mayoría de las herramientas de marketing y analítica más populares ya admiten el etiquetado del lado del servidor y disponen de etiquetas para sGTM. En nuestro sitio encontrará guías para implementarlas: Facebook CAPI, TikTok Events API, Snapchat Conversions API, seguimiento del lado del servidor de Google Ads, etc.
Paso 5. Pruebe la configuración de la aplicación
Depuración de la descarga de GTM
Después de activar el contenedor o de realizar cualquier cambio, se recomienda comprobar que el contenedor se ha cargado correctamente en el sitio.
Para ello, vaya a cualquier página de su sitio, abra la consola del navegador y, en la pestaña de red, filtre por la URL de su subdominio o servidor de etiquetado. Debería ver una solicitud como la de la captura de pantalla siguiente con el estado de respuesta 200.
Depuración de eventos de la capa de datos en el checkout
Con los eventos que ocurren antes de la página de checkout, todo funciona como en cualquier otra plataforma: puede iniciar el modo preview de su contenedor web de GTM y ver todos los eventos.
Los eventos de checkout no se mostrarán en GTM Preview debido al entorno aislado de estas páginas, que bloquea la manipulación del DOM y la inyección de scripts sin restricciones, incluido el fragmento de GTM.
Sin embargo, puede insertar manualmente el fragmento en la página de checkout utilizando la extensión de Chrome Stape GTM Helper:
- Después de iniciar el Modo Preview en GTM, active el interruptor Shopify Sandbox dataLayer en la pestaña Settings de la extensión.
- En la pestaña Inject GTM, haga clic en Enable injection, añada su nombre de dominio y su GTM ID. Guarde los cambios.
Ahora los eventos de la página de checkout aparecerán en GTM Preview.
Conclusión
Las posibilidades del etiquetado del lado del servidor se están expandiendo rápidamente, ofreciendo al usuario una gran herramienta para mejorar la precisión del seguimiento de conversiones y la analítica. Además, en Stape intentamos simplificar el uso de sGTM para nuestros clientes, por lo que lanzamos la aplicación Conversion Tracking para Shopify.
Conversion Tracking para Shopify de Stape es una herramienta fantástica con numerosas características y ventajas. Por ejemplo, puede configurar fácilmente el seguimiento en su sitio web añadiendo un script de Google Tag Manager y configurando su dominio y cargador personalizados. Además, puede enviar datos de usuario a la capa de datos y configurar webhooks.
Todas estas funciones contribuyen a que los datos de los análisis sean más precisos al prolongar la vida útil de las cookies y hacer que el rastreo del navegador sea resistente a las tecnologías de prevención del rastreo. Estas herramientas son esenciales para la transmisión fiable de datos a través del punto final del servidor a las plataformas de publicidad y marketing.
Si está buscando una solución rápida y sencilla para configurar el etiquetado del lado del servidor de Shopify, Stape es el camino a seguir. Aproveche esta excelente solución hoy y coseche los beneficios de un seguimiento más preciso con la aplicación Conversion Tracking para Shopify de Stape. Pruébela usted mismo ahora - ¡sabemos que no le decepcionará!
¿Listo para probar el etiquetado en el servidor?
Haga clic en Pruébelo gratis , y configure su instalación con Stape en un abrir y cerrar de ojos.
Comentarios