Probar píxeles personalizados

Después de crear un píxel personalizado, pruébalo para asegurarte de que envía datos correctamente cuando ocurren eventos en el sitio.

Puedes usar Shopify Pixel Helper para comprobar si se cargan los eventos de tu píxel y si te suscribiste correctamente a los eventos de Shopify. Shopify Pixel Helper te permite probar el píxel personalizado en la tienda online y ver en tiempo real los eventos que se reciben, junto con los datos de esos eventos.

Si el píxel personalizado se integra con una plataforma externa que tenga su propia herramienta de asistente de píxeles, puedes usar ese asistente externo además de Shopify Pixel Helper para comprobar si los eventos de tu píxel se procesan y reciben en la plataforma externa. Por ejemplo, si agregas un píxel personalizado de TikTok en la tienda, puedes usar tanto Shopify Pixel Helper como el asistente de píxeles de TikTok para probarlo.

Puedes usar Shopify Pixel Helper en la misma sesión del navegador que un asistente de píxeles externo para probar eventos de ambas plataformas al mismo tiempo.

Aquí tienes un script de píxel personalizado que disparará todos los standard events al entorno de pruebas y registrará los datos del evento en la consola. Los eventos estándar serán visibles en Shopify Pixel Helper. Además, puedes suscribirte a otras suscripciones globales, all_events, all_custom_events y all_dom_events, para descubrir todo lo que pueden ofrecer los píxeles web. Visita la web pixels API para obtener más información.

analytics.subscribe("all_standard_events", event => {
   console.log("Event data ", event?.data);
});

En esta página

Verifica que un píxel personalizado esté conectado

Antes de probar el píxel personalizado, verifica que esté conectado.

Pasos:

En el panel de control de Shopify, ve a Configuración > Customer events.
Junto al píxel que quieres probar, verifica que tenga el estado Conectado en la columna Estado.
Si el píxel no está conectado, haz clic en ... y luego en Conectar.

Probar un píxel personalizado con Shopify Pixel Helper

Después de verificar que el píxel personalizado está conectado, usa Shopify Pixel Helper para comprobar si envía datos y recibe los datos de la tienda. Puedes probar un píxel personalizado a la vez.

Pasos:

En el panel de control de Shopify, ve a Configuración > Customer events.
Haz clic en el píxel personalizado que quieras probar.
Haz clic en Probar para abrir el píxel personalizado en el sitio web y realizar la prueba.
Opcional: Según la configuración de consentimiento de la tienda y la customer privacy settings del píxel personalizado, el cuadro de diálogo del asistente de píxeles puede mostrar El píxel está esperando el consentimiento. Para continuar con la prueba, haz una de las siguientes acciones:
- Acepta el seguimiento en el banner de cookies o en las preferencias de la tienda.
- Haz clic en Dar consentimiento para continuar la prueba.
- Si el píxel sigue sin cargarse, review your customer privacy settings.
Para ver qué eventos se cargan, visita cada página en la que quieras probar el píxel y revisa el cuadro de diálogo del asistente de píxeles para ensure that the event was successfully subscribed to and that the callback function was successful en la sección Eventos recibidos:
- Ve a una página nueva para probar el evento page_viewed.
- Haz clic en un producto para probar el evento product_viewed.
- Agrega un producto al carrito para probar el evento product_added_to_cart.
- Ve a la página de pago para probar el evento checkout_started.
- Ingresa la información de envío en la página de pago para probar que el evento checkout_shipping_info_submitted reemplace al evento checkout_started.
- Completa el pago para probar que el evento checkout_completed reemplace al evento checkout_shipping_info_submitted. Más información sobre placing a test order.
Para ver los datos del evento recibidos, haz clic en para expandir el cuadro de diálogo del asistente de píxeles.

Ver la sección Eventos recibidos

Cuando pruebes qué eventos se cargan en el paso 5, en la sección Eventos recibidos del cuadro de diálogo del asistente de píxeles se muestra uno de los siguientes estados:

Un punto verde indica que la suscripción al evento se realizó correctamente y que la función de devolución de llamada se ejecutó correctamente.
Un punto rojo indica que la suscripción al evento se realizó correctamente, pero la función de devolución de llamada falló. Obtén más información sobre troubleshoot your custom pixel.
El asistente de píxeles muestra los errores no detectados que ocurren a nivel superior o en la función de devolución de llamada. Los errores de nivel superior aparecen cuando se carga el asistente de píxeles. Los mensajes de error de la función de devolución de llamada aparecen cuando haces clic para expandir un evento con un punto rojo.
El siguiente ejemplo de código contiene un error de devolución de llamada y un error de nivel superior. Según dónde esté el error de nivel superior, el píxel podría funcionar parcialmente.

analytics.subscribe("all_standard_events", event => {
  console.log("Event data ", event?.data);
  throw new Error("callback error");
});

throw new Error("top level error")

Para obtener más información sobre cómo corregir errores de JavaScript, visita Resolución de problemas de JavaScript.

Solucionar problemas del píxel personalizado

Si el píxel no se carga ni se activa durante las pruebas y ya revisaste los datos del evento y el código del píxel para detectar errores, intenta las siguientes medidas de resolución de problemas.

Revisa la configuración de privacidad del cliente

Si el píxel no se carga ni se activa durante las pruebas, puede haber una configuración de privacidad del cliente que impida su carga.

En el panel de control de Shopify, ve a Configuración > Privacidad del cliente para comprobar si hay configuración de privacidad del cliente en el panel de control de Shopify que pueda aplicarse a la sesión. Según la configuración de privacidad del cliente, sigue estos pasos:

Si tienes una configuración de privacidad del cliente que exija consentimiento en tu región, asegúrate de haber otorgado el consentimiento a través del banner de cookies.
Si no hay ninguna configuración de privacidad del cliente que bloquee la carga del píxel, borra las cookies del navegador para restablecer el banner de cookies y otorgar el consentimiento.

Si usas una herramienta externa para gestionar el consentimiento, ponte en contacto con el proveedor externo para recibir ayuda.

Otras medidas de resolución de problemas

Si aún no está claro si el píxel personalizado está suscrito correctamente a un evento de cliente, intenta las siguientes medidas de resolución de problemas:

Borra las cookies del navegador.
Si estás probando un evento estándar, revisa la documentación para desarrolladores de Shopify sobre descripciones de eventos estándar para asegurarte de realizar los pasos necesarios para activar el evento.

Pruebas con el asistente de píxeles de terceros

Un SDK (kit de desarrollo de software) de píxel contiene las herramientas para que el píxel recopile información sobre el comportamiento del cliente. Puedes usar el asistente de píxeles de tu proveedor externo para probar los siguientes comportamientos del píxel y asegurarte de que el SDK del píxel funcione como se espera:

Comprobar si el SDK de un píxel de terceros está cargado

Los pasos para revisar la pestaña Red dependen del navegador que uses. Por ejemplo, para saber cómo revisar la pestaña Red en Google Chrome, consulta la documentación de Chrome for Developers Inspeccionar la actividad de red.

Para comprobar que se cargue un SDK de píxel de terceros, primero necesitas obtener el código con la URL del SDK de tu proveedor externo para poder agregarlo al código del píxel. Para recibir ayuda, ponte en contacto con tu proveedor externo del píxel.

Pasos:

En el panel de control de Shopify, ve a Configuración > Customer events.
Haz clic en el píxel personalizado que quieras probar.
En la sección Código, ingresa al final del código del píxel el SDK que te proporcionó el proveedor externo.
Haz clic en Guardar.
Visita la tienda online y luego revisa la pestaña Red para asegurarte de que se descargue la URL del SDK del proveedor externo.
Opcional: Si el SDK de píxel de terceros no se carga, revisa si hay errores de ejecución de JavaScript en el sandbox. Por ejemplo, en Chrome puedes seleccionar un iFrame en particular para revisar sus registros de la consola y luego acotar los registros al píxel específico que estás probando. Para obtener más información sobre cómo comprobar errores de ejecución de JavaScript en Chrome, consulta la documentación de Chrome Depurar JavaScript.

Si el SDK de píxel de terceros no se carga durante las pruebas, ponte en contacto con tu proveedor externo del píxel para recibir ayuda.

Otras pruebas del SDK de píxel de terceros

Para comprobar si un SDK de píxel de terceros está inicializado o recopila eventos, consulta la documentación de tu proveedor externo del píxel.

Para comprobar si un SDK de píxel está recopilando eventos, es posible que te indiquen revisar la pestaña Red del navegador. Los pasos para revisar la pestaña Red dependen del navegador que uses. Por ejemplo, para saber cómo revisar la pestaña Red en un navegador Google Chrome para Google Chrome, consulta la documentación de Chrome for Developers Inspeccionar la actividad de red.