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.

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.

Expanda el elemento desplegable a continuación para consultar la guía detallada.

La aplicación de seguimiento de conversiones de Stape para Shopify se puede instalar de forma gratuita desde el marketplace de Shopify.

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:

• 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).

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.

Los eventos de webhook se configuran en la pestaña Webhook.

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:

• Qué son los webhooks y su uso en el seguimiento del lado del servidor
• Depuración de webhooks entrantes en la vista previa del servidor de Google Tag Manager
• Seguimiento de servidor a servidor: qué es y cómo configurarlo

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.

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.

Paso 1. Instala la plantilla de Data Tag:

1. 1.
   Haz clic en el menú Etiquetas.
2. 2.
   Haz clic en Nuevo.
3. 3.
   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.
4. 4.
   Haz clic en la pestaña Configuración de la etiqueta.
5. 5.
   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:

1. 1.
   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}}.
2. 2.
   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).
3. 3.
   Marca cómo deseas que se envíen los datos:

   1. 3.1.
      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.
   2. 3.2.
      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.
   3. 3.3.
      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.
   4. 3.4.
      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.
4. 4.
   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.
5. 5.
   En Datos del usuario, puedes enviar parámetros de usuario y aplicar transformaciones o almacenar datos.
6. 6.
   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.
7. 7.
   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:

1. 1.
   Sigue este enlace.
2. 2.
   Haz clic en Código → Descargar ZIP.

Paso 5. Ahora, para importar Data Client:

1. 1.
   Abre el contenedor de Google Tag Manager de tu servidor.
2. 2.
   Haz clic en Plantillas.
3. 3.
   En Clientes, haz clic en Nuevo.
4. 4.
   Haz clic en los tres puntos de la esquina superior derecha.
5. 5.
   Haz clic en Importar y selecciona el cliente de datos que has descargado de GitHub (es posible que tengas que descomprimir primero el archivo).
6. 6.
   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.

Paso 1. Crea una variable de configuración para la URL del contenedor del servidor. Para ello:

1. 1.
   Haz clic en el menú Variables.
2. 2.
   Haz clic en Nuevo debajo de la barra Variable definida por el usuario.
3. 3.
   Haz clic en la barra Configuración de la variable.
4. 4.
   Selecciona el tipo Etiqueta de Google: Ajustes de configuración.
5. 5.
   Haz clic en Añadir parámetro.
6. 6.
   Introduce los siguientes parámetros:

   1. 6.1.
      Parámetro de configuración: server_container_url.
   2. 6.2.
      Valor: la URL de tu contenedor de servidor de Tag Manager.
7. 7.
   Asigna a tu variable un nombre descriptivo y haz clic en Guardar.

Paso 2. Crea una etiqueta de Google Analytics 4:

1. 1.
   Haz clic en el menú Etiquetas.
2. 2.
   Haz clic en Nuevo.
3. 3.
   Haz clic en la pestaña Configuración de la etiqueta.
4. 4.
   Selecciona Google Analytics → Etiqueta de Google.
5. 5.
   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).
6. 6.
   En Ajustes de configuración, selecciona la variable del contenedor del servidor que has creado anteriormente.
7. 7.
   En Activación, asegúrate de que la opción Inicialización: activador de todas las páginas esté seleccionada.
8. 8.
   Asigna a tu etiqueta un nombre descriptivo y haz clic en Guardar.
9. 9.
   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:

1. 1.
   Haz clic en el menú Etiquetas.
2. 2.
   Haz clic en Nuevo.
3. 3.
   Haz clic en la pestaña Configuración de etiquetas.
4. 4.
   Selecciona Google Analytics → Google Analytics: Evento GA4.
5. 5.
   Introduce tu ID de medición (del menú Flujos de datos de GA4).
6. 6.
   Asigna un nombre descriptivo a tu evento.
7. 7.
   Haz clic en Activación → Todos los clics.
8. 8.
   Asigna un nombre descriptivo a la etiqueta.
9. 9.
   Haz clic en Guardar.

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:

• Cómo configurar la API de conversiones de Meta
• Cómo configurar el seguimiento de Google Analytics 4 (GA4)
• Cómo configurar el seguimiento de conversiones de Google Ads
• Otras plataformas

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.

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:

1. 1.
   Después de iniciar el Modo Preview en GTM, active el interruptor Shopify Sandbox dataLayer en la pestaña Settings de la extensión.
2. 2.
   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.

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á!