Probar píxeles personalizados

Despois de crear un píxel personalizado, debes probalo para asegurarte de que envía os datos correctamente cando se producen eventos no teu sitio.

Podes usar o Shopify Pixel Helper para probar se se cargan os eventos do teu píxel e se te subscribiches aos eventos de Shopify correctamente. O Shopify Pixel Helper permíteche probar o teu píxel personalizado na túa tenda en liña para ver os eventos que se están a recibir en tempo real, xunto cos datos deses eventos.

Se o teu píxel personalizado se integra cunha plataforma de terceiros que ten a súa propia ferramenta de axuda para píxeles, podes usar esta ferramenta de terceiros ademais do Shopify Pixel Helper para probar se a plataforma de terceiros procesa e recibe os eventos do teu píxel. Por exemplo, se engades un píxel personalizado de TikTok á túa tenda, podes usar tanto o Shopify Pixel Helper como a ferramenta de axuda para píxeles de TikTok para probar o teu píxel.

Podes usar o Shopify Pixel Helper na mesma sesión do navegador ca unha ferramenta de axuda para píxeles de terceiros para probar eventos de ambas as plataformas ao mesmo tempo.

Aquí tes un script de píxel personalizado que activará todos os eventos estándar no contorno de probas (sandbox) e rexistrará os datos dos eventos na consola. Os eventos estándar estarán visibles no Shopify Pixel Helper. Ademais, podes subscribirte a outras subscricións masivas (all_events, all_custom_events e all_dom_events) para descubrir todo o que os píxeles web poden ofrecer. Visita a API de píxeles web para obter máis información.

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

Asegúrate de que o píxel personalizado estea conectado

Antes de probar o teu píxel personalizado, asegúrate de que estea conectado.

Pasos:

  1. No teu administrador de Shopify, vai a Configuración > Eventos de clientes.

  2. Xunto ao píxel que queres probar, verifica que se amosa o estado Conectado na columna Estado.

  3. Se o píxel non está conectado, realiza as seguintes accións:

    1. Fai clic en Menú horizontal > Ver detalles.
    2. Opcional: revisa e actualiza o código do teu píxel e despois fai clic en Gardar.
    3. Fai clic en Conectar.
    4. No cadro de diálogo de confirmación, fai clic en Conectar.

Probar un píxel personalizado usando o Shopify Pixel Helper

Despois de verificar que o teu píxel personalizado está conectado, podes usar o Shopify Pixel Helper para probar se o teu píxel personalizado envía datos e recibe os datos da túa tenda.

Revisa as seguintes consideracións antes de usar o Shopify Pixel Helper:

  • Só podes probar 1 píxel personalizado á vez usando o Shopify Pixel Helper.
  • Non podes facer cambios no píxel que se está a probar mentres o Shopify Pixel Helper está en execución. Para probar os novos cambios, garda o teu píxel, pecha a lapela do Shopify Pixel Helper e, a continuación, volve abrir o Shopify Pixel Helper.
  • Os rexistros de eventos bórranse cando navegas a unha páxina nova. Por exemplo, se engades un produto ao teu carro e o Shopify Pixel Helper rexistra o evento product_added_to_cart, ese rexistro bórrase ao navegar a unha nova páxina de produto ou á páxina do carro.
  • O Shopify Pixel Helper non ten un botón de pechar. Para deixar de probar, debes pechar a lapela que abriu o Shopify Pixel Helper.
  • O Shopify Pixel Helper non é compatible con tendas de comercio headless ou tendas en modo privado.
  • Se a túa tenda en liña está en modo privado, valora a posibilidade de desactivar o modo privado para usar o Shopify Pixel Helper.

Pasos:

  1. No teu administrador de Shopify, vai a Configuración > Eventos de clientes.

  2. Fai clic no píxel personalizado que queres probar.

  3. Fai clic en Probar para abrir o píxel personalizado no teu sitio web e facer a proba.

  4. Opcional: dependendo da configuración de consentimento da túa tenda e da configuración de privacidade dos clientes do píxel personalizado, o cadro de diálogo do Pixel helper podería amosar a mensaxe O píxel agarda consentimento (Pixel is awaiting consent). Realiza unha das seguintes accións para continuar coa proba:

  5. Para ver que eventos se están a cargar, visita cada páxina para a que queiras probar o píxel e revisa o cadro de diálogo do Pixel helper para asegurarche de que a subscrición ao evento se realizou con éxito e de que a función de devolución de chamada (callback) foi correcta na sección Eventos recibidos:

    • Vai a unha páxina nova para probar o evento page_viewed.
    • Fai clic nun produto para probar o evento product_viewed.
    • Engade un produto ao teu carro para probar o evento product_added_to_cart.
    • Vai ao teu proceso de pagamento para probar o evento checkout_started.
    • Introduce a túa información de envío no proceso de pagamento para probar que o evento checkout_shipping_info_submitted substitúe o evento checkout_started.
    • Completa o proceso de pagamento para probar que o evento checkout_completed substitúe o evento checkout_shipping_info_submitted. Máis información sobre como facer un pedido de proba.
  6. Para ver os datos de eventos recibidos, fai clic en Maximize para expandir o cadro de diálogo da axuda do píxel.

Ver a sección de eventos recibidos

Cando probes que eventos se están cargando no paso 5, aparecerá un dos seguintes estados na sección Eventos recibidos do cadro de diálogo da axuda do píxel:

  • Un punto verde indica que se subscribiu ao evento correctamente e a función de devolución de chamada tivo éxito.
  • Un punto vermello indica que se subscribiu ao evento correctamente, pero a función de devolución de chamada fallou. Obtén máis información sobre como resolver problemas no teu píxel personalizado.
  • A axuda do píxel mostra erros non detectados que se producen no nivel superior ou na función de devolución de chamada. Os erros de nivel superior móstranse cando a axuda do píxel se carga. As mensaxes de erro de devolución de chamada móstranse cando fas clic para expandir un evento cun punto vermello.
  • O seguinte exemplo de código contén un erro de devolución de chamada e un erro de nivel superior. Dependendo de onde se atope o erro de nivel superior, o píxel poderí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 obter máis información sobre a corrección de erros de JavaScript, visita Resolución de problemas de JavaScript.

Resolución de problemas do píxel personalizado

Se o píxel non se carga nin se activa durante a proba e xa revisaches os datos dos eventos e o código do píxel na busca de erros, proba as seguintes medidas de resolución de problemas.

Revisar a configuración de privacidade dos clientes

Se o píxel non se carga ou non se activa durante a proba, podería haber opcións de configuración de privacidade dos clientes que impidan que se cargue.

Desde o teu administrador de Shopify, vai a Configuración > Privacidade dos clientes para comprobar a configuración de privacidade dos clientes no teu administrador de Shopify que se podería aplicar á túa sesión. Dependendo da túa configuración de privacidade dos clientes, segue estes pasos:

  • Se tes unha configuración de privacidade dos clientes que require consentimento na túa rexión, asegúrate de telo proporcionado a través do teu báner de cookies.
  • Se non tes ningunha configuración de privacidade dos clientes que bloquee a carga do píxel, borra as cookies do teu navegador para restablecer o báner de cookies e proporcionar o consentimento.
  • Se usas unha ferramenta de terceiros para xestionar o consentimento, como unha aplicación de báner de cookies, esa ferramenta debe sincronizar o consentimento con Shopify a través da Customer Privacy API. Se o consentimento non se sincroniza con Shopify, é posible que o teu píxel non se active incluso despois de que un cliente ofreza o seu consentimento. Ponte en contacto co teu provedor externo para confirmar que o consentimento se está sincronizando con Shopify, ou para obter soporte adicional.

Resolución de problemas adicional

Se aínda non está claro se o teu píxel personalizado está correctamente subscrito a un evento de clientes, proba as seguintes medidas de resolución de problemas:

  • Borra as cookies do teu navegador.
  • Se estás a probar un evento estándar, revisa a documentación para desenvolvedores de Shopify sobre as descricións de eventos estándar para asegurarte de que realizas os pasos necesarios para activar o evento.

Se notas diferenzas no número de eventos rastrexados despois de migrar desde unha configuración de píxeles anterior, revisa a sección Resolución de problemas tras a migración.

Probas da axuda de píxeles de terceiros

O SDK do píxel (kit de desenvolvemento de software) contén as ferramentas do teu píxel para recompilar información sobre o comportamento dos clientes. Podes utilizar a axuda de píxeles do teu provedor externo de píxeles para probar os seguintes comportamentos do teu píxel e asegurarte de que o SDK do píxel funciona como se agarda:

Probar se se carga un SDK de píxeles de terceiros

Os pasos para comprobar a túa lapela de rede dependen do navegador web que utilices. Por exemplo, para obter información sobre como comprobar a lapela de rede en Google Chrome, consulta a documentación de Chrome para desenvolvedores sobre como inspeccionar a actividade da rede.

Para probar que un SDK de píxeles de terceiros se carga, primeiro tes que recuperar o código do provedor externo referente ao URL do SDK para que poidas engadilo ao teu código de píxel. Para obter soporte, ponte en contacto co teu provedor de píxeles externo.

Pasos:

  1. No teu administrador de Shopify, vai a Configuración > Eventos de clientes.

  2. Fai clic no píxel personalizado que queres probar.

  3. Na sección Código, introduce o SDK de píxeles facilitado polo teu provedor externo ao final do teu código de píxeles.

  4. Fai clic en Gardar.

  5. Visita a túa tenda en liña e comproba a lapela de rede para asegurarte de que se está a descargar o URL do SDK do provedor externo.

  6. Opcional: Se o SDK de píxeles de terceiros non se carga, busca erros de tempo de execución de JavaScript no sandbox. Por exemplo, en Chrome podes seleccionar un iFrame en particular para revisar os seus rexistros na consola e restrinxir os rexistros ao píxel específico que estás a probar. Para obter máis información sobre a busca de erros de tempo de execución de JavaScript en Chrome, consulta a documentación de Chrome sobre a Depuración de JavaScript.

Se o SDK de píxeles de terceiros non se carga durante a proba, ponte en contacto co teu provedor de píxeles externo para obter soporte.

Outras probas de SDK de píxeles de terceiros

Para comprobar se un SDK de píxeles de terceiros se inicializou ou está a recompilar eventos, consulta a documentación do teu provedor externo de píxeles.

Para comprobar se o SDK dun píxel está a recompilar eventos, é posible que se che indique que comprobes a lapela de rede do teu navegador. Os pasos para comprobar esta lapela dependen do navegador web que utilices. Por exemplo, para obter información sobre como comprobar a lapela de rede nun navegador Google Chrome, consulta a documentación de Chrome para desenvolvedores sobre como inspeccionar a actividade da rede.