Ajuda
Inicia la sessió

Provar píxels personalitzats

Un cop hagis creat un píxel personalitzat, l'has de provar per assegurar-te que envia les dades correctament quan es produeixin esdeveniments al teu lloc web.

Pots utilitzar el Shopify Pixel Helper per comprovar si els esdeveniments del píxel es carreguen i si t'has subscrit correctament als esdeveniments de Shopify. El Shopify Pixel Helper et permet provar el teu píxel personalitzat a la teva botiga en línia per veure els esdeveniments que es reben en temps real, juntament amb les dades d'aquests esdeveniments.

Si el teu píxel personalitzat s'integra amb una plataforma de tercers que té la seva pròpia eina d'ajuda per a píxels, pots utilitzar aquesta eina juntament amb el Shopify Pixel Helper per provar si els esdeveniments del teu píxel es processen i els rep la plataforma de tercers. Per exemple, si afegeixes un píxel de TikTok personalitzat a la teva botiga, pots utilitzar tant el Shopify Pixel Helper com l'eina d'ajuda per a píxels de TikTok per provar el teu píxel.

Pots utilitzar el Shopify Pixel Helper a la mateixa sessió del navegador on tinguis una eina d'ajuda per a píxels de tercers per provar esdeveniments per a ambdues plataformes a la vegada.

Aquí tens un script de píxels personalitzats que activarà tots els esdeveniments estàndard a l'entorn de proves i en registrarà les dades a la consola. Els esdeveniments estàndard es podran veure al Shopify Pixel Helper. A més, pots fer altres subscripcions massives a all_events, all_custom_events i all_dom_events, per descobrir tot el que poden oferir els píxels web. Visita l'API de píxels web per obtenir més informació.

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

En aquesta pàgina

Assegura't que el píxel personalitzat estigui connectat

Abans de provar el teu píxel personalitzat, assegura't que estigui connectat.

Passos:

  1. Al teu panell d'administració de Shopify, ves a Configuració > Accions del client.

  2. Al costat del píxel que vulguis provar, comprova que tingui l'estat Connectat a la columna Estat.

  3. Si el píxel no està connectat, fes les accions següents:

    1. Fes clic a Menú horitzontal > Veure els detalls.
    2. Opcional: revisa i actualitza el codi del píxel i, després, fes clic a Desa.
    3. Fes clic a Connecta.
    4. Al quadre de diàleg de confirmació, fes clic a Connecta.

Provar un píxel personalitzat amb el Shopify Pixel Helper

Un cop hagis comprovat que el píxel personalitzat està connectat, pots utilitzar el Shopify Pixel Helper per provar si envia dades i rep les de la teva botiga.

Revisa les consideracions següents abans d'utilitzar el Shopify Pixel Helper:

  • Només pots provar 1 píxel personalitzat alhora amb el Shopify Pixel Helper.
  • No pots fer canvis al píxel que s'està provant quan el Shopify Pixel Helper s'estigui executant. Per provar els canvis nous, desa el píxel, tanca la pestanya del Shopify Pixel Helper i, després, torna a obrir el Shopify Pixel Helper.
  • Els registres d'esdeveniments s'esborren quan navegues a una pàgina nova. Per exemple, si afegeixes un producte al carretó i el Shopify Pixel Helper registra l'esdeveniment product_added_to_cart, aquest registre s'esborrarà quan vagis a una fitxa del producte nova o a la pàgina del carretó.
  • El Shopify Pixel Helper no té cap botó de tancar. Per aturar la prova, has de tancar la pestanya que ha obert el Shopify Pixel Helper.
  • El Shopify Pixel Helper no és compatible amb botigues de comerç sense capçalera ni amb botigues en mode privat.
  • Si la teva botiga en línia es troba en mode privat, et recomanem desactivar el mode privat per utilitzar el Shopify Pixel Helper.

Passos:

  1. Al teu panell d'administració de Shopify, ves a Configuració > Accions del client.

  2. Fes clic al píxel personalitzat que vulguis provar.

  3. Fes clic a Prova per obrir el píxel personalitzat al teu lloc web i fer-hi proves.

  4. Opcional: depenent de la configuració de consentiment de la botiga i de la configuració de privadesa dels clients del píxel personalitzat, el quadre de diàleg Pixel helper pot mostrar el missatge El píxel espera el consentiment. Fes una de les accions següents per continuar amb la prova:

  5. Per veure quins esdeveniments s'estan carregant, visita cada pàgina on vulguis provar el píxel i revisa el quadre de diàleg Pixel helper per assegurar-te que t'has subscrit correctament a l'esdeveniment i que la funció de retorn s'ha efectuat amb èxit a la secció Esdeveniments rebuts:

    • Vés a una pàgina nova per provar l'esdeveniment page_viewed.
    • Fes clic a un producte per provar l'esdeveniment product_viewed.
    • Afegeix un producte al carretó per provar l'esdeveniment product_added_to_cart.
    • Vés al pagament per provar l'esdeveniment checkout_started.
    • Introdueix la informació d'enviament al pagament per provar que l'esdeveniment checkout_shipping_info_submitted substitueix l'esdeveniment checkout_started.
    • Completa el pagament per provar que l'esdeveniment checkout_completed substitueix l'esdeveniment checkout_shipping_info_submitted. Més informació sobre com fer una comanda de prova.

  6. Per veure les dades rebudes de l'esdeveniment, fes clic a Maximize per desplegar el quadre de diàleg de l'assistent de píxels.

Veure la secció Esdeveniments rebuts

Quan proves quins esdeveniments es carreguen al pas 5, es mostra un dels estats següents a la secció Esdeveniments rebuts del quadre de diàleg Assistent de píxels:

  • Un punt verd indica que la subscripció a l'esdeveniment ha estat correcta i que la funció de retorn ha funcionat bé.
  • Un punt vermell indica que la subscripció a l'esdeveniment ha estat correcta, però que la funció de retorn ha fallat. Descobreix com pots solucionar els problemes del teu píxel personalitzat.
  • L'assistent de píxels mostra els errors no detectats que es produeixen en el nivell superior o en la funció de retorn. Els errors de nivell superior es mostren quan es carrega l'assistent de píxels. Els missatges d'error de la funció de retorn es mostren quan fas clic per desplegar un esdeveniment amb un punt vermell.
  • L'exemple de codi següent conté un error de funció de retorn i un error de nivell superior. Segons on estigui situat l'error de nivell superior, és possible que el píxel funcioni parcialment.
analytics.subscribe("all_standard_events", event => {
  console.log("Event data ", event?.data);
  throw new Error("callback error");
});

throw new Error("top level error")

Per saber-ne més sobre com solucionar errors de JavaScript, visita Resolució de problemes de JavaScript.

Resolució de problemes del píxel personalitzat

Si el píxel no es carrega ni s'activa durant les proves i ja has revisat si hi ha errors a les dades de l'esdeveniment i al codi del píxel, prova les mesures de resolució de problemes següents.

Revisar la configuració de privadesa dels clients

Si el píxel no es carrega ni s'activa durant les proves, podria ser que la configuració de privadesa dels clients n'impedís la càrrega.

Des del panell d'administració de Shopify, vés a Configuració > Privadesa dels clients per comprovar si hi ha cap configuració de privadesa dels clients al panell d'administració de Shopify que s'apliqui a la teva sessió. En funció de la configuració de privadesa dels clients, segueix aquests passos:

  • Si tens una configuració de privadesa dels clients que requereix consentiment a la teva regió, assegura't d'haver-lo donat mitjançant l'avís de galetes.
  • Si no tens cap configuració de privadesa dels clients que bloquegi la càrrega del píxel, esborra les galetes del navegador per restablir l'avís de galetes i donar el consentiment.
  • Si fas servir una eina de tercers per gestionar el consentiment, com ara una aplicació d'avís de galetes, aquesta eina ha de sincronitzar el consentiment amb Shopify a través de la Customer Privacy API. Si el consentiment no se sincronitza amb Shopify, és possible que el píxel no s'activi fins i tot després que un client hi doni el consentiment. Posa't en contacte amb el teu proveïdor extern per confirmar que el consentiment s'està sincronitzant amb Shopify o bé per obtenir més suport.

Resolució de problemes addicional

Si encara no tens clar si el teu píxel personalitzat s'ha subscrit correctament a una acció del client, prova les mesures de resolució de problemes següents:

  • Esborra les galetes del navegador.
  • Si proves un esdeveniment estàndard, revisa la documentació per a desenvolupadors de Shopify sobre descripcions d'esdeveniments estàndard per assegurar-te que duus a terme els passos necessaris per desencadenar l'esdeveniment.

Si detectes diferències en el nombre d'esdeveniments dels quals s'ha fet el seguiment després de la migració des d'una configuració de píxel més antiga, revisa l'apartat Resolució de problemes després de la migració.

Proves amb l'assistent de píxels de tercers

L'SDK (kit de desenvolupament de programari) del píxel conté les eines perquè el teu píxel recopili informació sobre el comportament dels clients. Pots utilitzar l'assistent de píxels del teu proveïdor extern de píxels per provar els comportaments següents i assegurar-te que l'SDK del píxel funciona tal com s'espera:

Provar si s'ha carregat un SDK de píxel de tercers

Els passos per consultar la pestanya de xarxa depenen del navegador web que facis servir. Per exemple, per obtenir més informació sobre com comprovar la pestanya de xarxa a Google Chrome, consulta la documentació Inspect network activity de Chrome for Developers.

Per comprovar que s'hagi carregat un SDK de píxel de tercers, primer has de recuperar el codi del teu proveïdor extern per a l'URL de l'SDK, de manera que el puguis afegir al codi del teu píxel. Per obtenir suport, posa't en contacte amb el teu proveïdor extern de píxels.

Passos:

  1. Al teu panell d'administració de Shopify, ves a Configuració > Accions del client.

  2. Fes clic al píxel personalitzat que vulguis provar.

  3. A la secció Codi, introdueix l'SDK de píxel que t'ha facilitat el proveïdor extern al final del codi del teu píxel.

  4. Fes clic a Desa.

  5. Visita la botiga en línia i, a continuació, comprova la pestanya de xarxa per assegurar-te que s'està baixant l'URL de l'SDK del proveïdor extern.

  6. Opcional: Si l'SDK del píxel de tercers no es carrega, comprova si hi ha errors d'execució de JavaScript al sandbox. Per exemple, a Chrome pots seleccionar un iFrame en concret per revisar-ne els registres de la consola i, després, restringir els registres al píxel específic que estàs provant. Per saber-ne més sobre com comprovar si hi ha errors d'execució de JavaScript a Chrome, consulta la documentació Debug JavaScript de Chrome.

Si l'SDK de píxel de tercers no es carrega durant les proves, posa't en contacte amb el teu proveïdor extern de píxels per obtenir suport.

Altres proves amb l'SDK de píxel de tercers

Per provar si un SDK de píxel de tercers s'ha inicialitzat o recopila esdeveniments, consulta la documentació del teu proveïdor extern de píxels.

Per comprovar si un SDK de píxels recopila esdeveniments, és possible que se t'indiqui que revisis la pestanya de xarxa del navegador. Els passos per consultar la pestanya de xarxa depenen del navegador web que facis servir. Per exemple, per obtenir informació sobre com comprovar la pestanya de xarxa en un navegador Google Chrome, consulta la documentació Inspect network activity de Chrome for Developers.