Usar herramientas de desarrollo de Chrome para revisar etiquetas

Con las herramientas de desarrollo de Chrome puede analizar rápidamente el contenido y los recursos de páginas web. De esta forma le será más fácil revisar sus etiquetas de Campaign Manager 360.

Acceder a herramientas de desarrollo

1. Haga clic con el botón secundario del ratón en una página y seleccione "Inspeccionar elemento". Se mostrará el código HTML del elemento en el que hizo clic.

2. Seleccione Ver > Desarrollador > Herramientas para desarrolladores.

3. Utilice la combinación de teclas "alt+comando+i".

Pestañas disponibles y sus usos

• Pestaña Elements: 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 encontrar las etiquetas de emplazamiento o de Floodlight que se hayan implementado en la página e identificar si se les ha hecho algún cambio. A la hora de encontrar etiquetas, un término de búsqueda que puede ser muy útil es "double", ya que las URL de las etiquetas de emplazamiento de Campaign Manager 360 pertenecen al dominio "doubleclick". Una vez encontradas, compare la versión implementada de la etiqueta frente a la etiqueta como se exporta directamente de la interfaz de usuario de Trafficking.
  • Solucionar problemas con CSS: en la pestaña Elements, la columna derecha muestra varios atributos de CSS que controlan cómo y dónde se muestra el elemento HTML.
  • La barra "Computed Style" 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 determinado por el administrador del sitio web o si se han obtenido de los valores predeterminados del navegador para elementos HTML de ese tipo.
  • En cambio, la sección "Styles" muestra solo las reglas de CSS especificadas expresamente por el administrador del sitio web. Cada subsección que se muestra aquí representa una ubicación diferente del código de la página donde se escribió una regla de CSS pertinente (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 donde se implementó la regla en cuestión.

  Una de las funciones más útiles de la pestaña Elements 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 Resources: le permite inspeccionar una tabla de los distintos recursos que se han cargado junto con la página inspeccionada. Incluye imágenes, documentos HTML y archivos JavaScript, entre otros elementos. Esta pestaña es muy útil para solucionar problemas relacionados con Campaign Manager 360, ya que la función de búsqueda tendrá en cuenta todos los recursos disponibles de la página y no solo hará la búsqueda en la página en sí.

  CASOS PRÁCTICOS

  Buscar etiquetas que no están escritas en las páginas: aunque en la pestaña Elements puede ver el HTML renderizado de las páginas, las etiquetas de emplazamiento no siempre se activan al escribir el código. Dicho esto, la forma más sencilla y fiable de ubicar una etiqueta de ubicación implementada es utilizar la función de búsqueda en la pestaña Resources.

• Pestaña Network: es un analizador de protocolos de proxy que le permite supervisar el tráfico de HTTP de la página, tanto mientras se carga como posteriormente.

  CASOS PRÁCTICOS

  • Comprobar si las etiquetas de emplazamiento o de Floodlight se activan: un 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 hacer el seguimiento o mostrar el contenido de creatividades 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 resultarle útil para probar la latencia, sobre todo en el caso de las etiquetas de Floodlight. Si una etiqueta de Floodlight da lugar a un tiempo de espera excesivo en la carga de la página, fíjese en las llamadas realizadas por píxeles combinados: esto le 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 píxeles combinados de la etiqueta esté aumentando la latencia.

• Pestaña Scripts (Secuencias de comandos): se puede utilizar para la depuración de los códigos de JavaScript. Aunque es una herramienta de gran valor para desarrolladores web, no está relacionada directamente con los procesos de control de calidad ni de solución de problemas de Campaign Manager 360.

• Pestaña Timeline (Cronología): muestra el tráfico HTTP y el uso de la memoria a lo largo del tiempo. Al igual que la pestaña Network (Red), puede resultar útil para identificar los orígenes de latencias. Por lo demás, esta pestaña no tiene que ver con problemas relacionados con Campaign Manager 360.

• Pestaña Profiles (Perfiles): 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 tiene que ver con problemas relacionados con Campaign Manager 360.

• Pestaña Audits (Auditorías): puede analizar una página mientras se carga y proporcionar sugerencias y optimizaciones para reducir el tiempo de espera de carga de la página y aumentar la velocidad de respuesta percibida y real. Esta pestaña no tiene que ver con problemas relacionados con Campaign Manager 360.

• Pestaña Console (Consola): detecta automáticamente los errores dentro del código de la página. Una vez que la pestaña Network (Red) le ha ayudado a determinar que la etiqueta no se activa, la pestaña Console puede mostrar los motivos por los que sucede.

  CASOS PRÁCTICOS

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

  Una característica útil de la pestaña Console es que los mensajes de error estarán enlazados con la línea y el documento que han generado el error. Esto puede resultar útil a la hora de rastrear un problema hasta la línea de código que debe modificarse, aunque es posible que no sea 100% fiable. Mientras que la detección de errores que ofrece esta pestaña es fiable, el mecanismo de atribución es ligeramente menos preciso y puede que el mensaje de error esté enlazado con una línea que esté cerca del error de código.

  • "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 y es simplemente 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 publica el Floodlight (ni a los píxeles combinados).
  • -3+ MIME es un identificador de formatos de archivos en Internet. Este error puede ocurrir cuando un recurso se carga con la extensión de archivo errónea (por ejemplo, GIF frente a JPEG).
  • "Uncaught TypeError": esto indica que ha habido un error tipo con un elemento HTML en la página. Normalmente, sugiere que hay un código defectuoso en una función de JavaScript.
  • "Uncaught SyntaxError": esto indica que ha habido un error de sintaxis con un elemento en la página. Normalmente, significa que hay un carácter adicional (<"/-*^#) que se ha usado incorrectamente.