Usar herramientas de desarrollo de Chrome para revisar etiquetas

Las herramientas para desarrolladores de Chrome le permiten analizar con rapidez el contenido o los recursos de las páginas web. De esta forma le será más fácil revisar sus etiquetas de Campaign Manager 360.

Acceder a las herramientas para desarrolladores

Para abrir las herramientas para desarrolladores de Chrome, puede hacer lo siguiente:

• Haga clic con el botón derecho en una página y seleccione Inspeccionar. Se mostrará el código HTML del elemento en el que ha hecho clic.
• En la parte superior de la ventana del navegador, seleccione Ver > Desarrollador > Herramientas para desarrolladores.

Más información sobre Chrome DevTools

Pestañas disponibles y sus usos

• Pestaña Elementos: muestra el HTML renderizado de la página, que es distinto del código fuente de la página. Si se crea o edita algún elemento HTML mediante JavaScript mientras se carga la página, los cambios se reflejarán en el HTML renderizado, mientras que el código fuente de la página se mostrará sin ninguna alteración.

  Casos prácticos

  • Comprobar si se han editado las etiquetas: en esta pestaña, puede localizar las etiquetas de emplazamiento o de Floodlight que se hayan implementado en la página e identificar si se han modificado. A la hora de buscar etiquetas, un término de búsqueda que puede ser muy útil es "double", ya que las URLs de las etiquetas de emplazamiento de Campaign Manager 360 incluyen URLs que utilizan el dominio "doubleclick". Una vez ubicadas, compare la versión implementada de la etiqueta frente a la etiqueta tal y como se exporta directamente de la interfaz de usuario de Traficado.
  • Solucionar problemas con CSS: en la pestaña Elementos, la columna derecha muestra varios atributos CSS que controlan cómo y dónde se muestra el elemento HTML seleccionado.
  • La barra "Calculados" muestra todas las reglas de CSS que se aplican al elemento seleccionado, independientemente de si se han configurado mediante un código de CSS explícito escrito por el administrador del sitio web o de si se han obtenido de los valores predeterminados del navegador para elementos HTML de ese tipo.
  • En cambio, la sección "Estilos" muestra solo las reglas de CSS especificadas expresamente por el administrador del sitio web. Cada subsección representa aquí una ubicación diferente en el código de la página donde se escribió una regla de CSS relevante (que afecta al elemento HTML seleccionado). Si detecta una regla que está generando un problema dentro de la página, puede hacer clic en el enlace situado la esquina superior derecha de esa subsección para cargar la línea o el documento en el que se implementó la regla en cuestión.

  Una de las funciones más útiles de la pestaña Elementos es que le permite editar el código que está inspeccionando. Si cree que ha encontrado una línea de código HTML o una regla de CSS que está causando algún problema en la página, puede simplemente modificar el código para probar su hipótesis. Esto afectará únicamente a la versión de la página almacenada en la memoria temporal de su navegador. Si vuelve a cargar la página, o si alguien más la visita, los cambios que ha realizado no aparecerán.

• Pestaña Fuentes: le permite inspeccionar una tabla de los distintos recursos que se han cargado junto con la página inspeccionada. Incluye imágenes, documentos HTML, archivos JavaScript, etc.

  Casos prácticos

  Buscar etiquetas que no están escritas en la página: aunque en la pestaña Elementos puede ver el HTML renderizado de la página, las etiquetas de emplazamiento no siempre se activan al escribir código en la propia página. En la pestaña, también puede editar y depurar archivos JavaScript.

  Consejo: Puede usar también el panel Buscar para encontrar con facilidad etiquetas implementadas en todos los recursos cargados. En la esquina superior de DevTools, haga clic en el icono de tres puntos y luego seleccione Más herramientas > Buscar.

• Pestaña Red: esta pestaña es un analizador de protocolos de proxy que le permite monitorizar el tráfico HTTP de la página, tanto mientras se carga como después.

  Casos prácticos

  • Comprobar si las etiquetas de emplazamiento o de Floodlight se activan: el analizador de protocolos de proxy es la herramienta más útil que se puede utilizar para solucionar problemas y controlar la calidad. Básicamente, si una etiqueta no se activa, no puede registrar ni devolver el contenido de la creatividad como debería. De forma similar, siempre que se realice la llamada adecuada (con una sintaxis y un formato correcto), a nuestros servidores les resulta indiferente el modo en el que se ha implementado la etiqueta (aunque es posible que haya que tomar ciertas consideraciones dependiendo de la naturaleza de la página). En la pestaña Red puede detectar si una etiqueta de emplazamiento o de Floodlight se ha activado y, de ser así, comprobar que la sintaxis de la llamada coincide con la URL de la versión no modificada de la etiqueta.
  • Prueba de latencia: además de si se produce una llamada o no, la ficha Red también muestra el tiempo que una determinada solicitud tardó en recibir una respuesta. Esto puede ser útil para probar la latencia, especialmente en el caso de etiquetas de Floodlight dinámicas. Si una etiqueta de Floodlight hace que la página tarde demasiado en cargarse, fíjese en las llamadas realizadas por los piggybacked pixels, ya que pueden ayudar a identificar la causa del problema. Es decir, es muy poco probable que la espera se deba a la etiqueta de Floodlight en sí. Es más probable que la causa sea que alguno de los piggybacked pixels de la etiqueta esté aumentando la latencia.

• Pestaña Rendimiento: esta pestaña muestra el tráfico HTTP y el uso de memoria a lo largo del tiempo. Al igual que la pestaña Red, puede resultar útil para identificar fuentes de latencia. Por lo demás, esta pestaña no es relevante para los problemas relacionados con Campaign Manager 360.

• Pestaña Memoria: es una herramienta que los desarrolladores web pueden utilizar para optimizar el uso de la CPU dentro de las aplicaciones web. Esta pestaña no es relevante para los problemas relacionados con Campaign Manager 360.

• Pestaña Lighthouse: puede analizar una página mientras se carga y proporcionar sugerencias y optimizaciones para reducir su tiempo de carga y aumentar la velocidad de respuesta percibida y real. Esta pestaña no es relevante para los problemas relacionados con Campaign Manager 360.

• Pestaña Consola: esta pestaña detecta errores en el código de la página de forma automática. Una vez que la pestaña Red le haya ayudado a determinar que la etiqueta no se activa, la pestaña Consola le puede mostrar los motivos por los que sucede.

  Casos prácticos

  Solucionar errores de sintaxis: si su etiqueta no se activa, compruebe la pestaña Consola para ver si Chrome ha detectado algún error. Los siguientes son los errores clave que debe comprobar:

  • "NS_IMAGELIB": este error puede producirse cuando una URL "src" de iframe se implementa como una imagen. Debido a esta confusión, las etiquetas de emplazamiento o de Floodlight no se activarán correctamente, aunque en el caso de las etiquetas de Floodlight se podrá atribuir una conversión a pesar del error. Dicho esto, si el error está en un Floodlight, ninguno de los píxeles de terceros que se han implementado en el Floodlight podrá activarse.
  • "Unsafe JavaScript attempt to access frame with URL": este error puede ignorarse. Se trata simplemente de un aviso de seguridad relacionado con la inserción de iframes de dominios distintos en una página. La mayoría de los usuarios no verán este aviso a menos que su configuración de seguridad sea muy alta. Además, no afectará al modo en el que se sirve el Floodlight (o los piggybacked pixels).
  • "Resource interpreted as '_blank_' but transferred with MIME type " .": este error indica que hay un problema de formatos de archivo. MIME es un identificador de formatos de archivos en Internet. Se puede producir cuando un recurso se carga con la extensión de archivo errónea (por ejemplo, .gif en lugar de .jpeg).
  • "Uncaught TypeError": indica que se ha producido un tipo de error con un elemento HTML en la página. Normalmente, indica que hay código erróneo en una función de JavaScript.
  • "Uncaught SyntaxError": indica que se ha producido un error de sintaxis con un elemento de la página. Normalmente, significa que hay un carácter adicional (<"/-*^#) que no se ha usado correctamente.

  Una característica útil de la pestaña Consola es que los mensajes de error estarán enlazados con la línea y el documento que han generado el error. Resulta muy útil para hacer el seguimiento de un problema en la línea de código que debe modificarse, aunque puede que no siempre sea 100 % fiable. Aunque la detección de errores que ofrece esta pestaña sí es fiable, el mecanismo de atribución es un poco menos preciso y puede señalar a una línea que se encuentre tan solo cerca del error de programación.