Use as Ferramentas para desenvolvedores do Google Chrome para verificar tags

As Ferramentas para desenvolvedores do Google Chrome permitem analisar rapidamente o conteúdo/recursos de uma página da Web. Isso ajuda a verificar suas tags do Campaign Manager 360.

Como acessar as Ferramentas para Desenvolvedores

1. Clique com o botão direito do mouse em uma página e selecione "Inspecionar elemento". O código HTML do elemento clicado será exibido.

2. Selecione Visualização > Desenvolvedor > Ferramentas para desenvolvedores.

3. Use o atalho "Alt + Command + I".

Guias disponíveis e casos de uso

• Guia "Elements": exibe o HTML processado da página, que é diferente do código-fonte da página. Se elementos HTML forem criados ou alterados com JavaScript conforme a página for carregada, essas mudanças se refletirão no HTML processado, enquanto o código-fonte da página mostrará o código sem alterações.

  CASOS DE USO

  • Verificar se há modificações na tag: essa guia possibilita localizar as tags do Floodlight e/ou de posicionamento que foram implementadas na página e identificar se foram feitas modificações. Ao localizar a tag, um termo de pesquisa bastante útil é "double" porque os URLs nas tags de posicionamento do Campaign Manager 360 incluem os que usam o domínio "doubleclick". Após localizar a versão implementada da tag, compare-a com a tag original conforme ela for exportada diretamente de "Tráfego" na interface do usuário.
  • Solução de problemas com CSS: na guia "Elementos", a coluna da direita exibe vários atributos CSS que controlam como e onde o elemento HTML selecionado é exibido.
  • A barra "Estilo computado" mostra todas as regras de CSS que estão em vigor para o elemento selecionado, se foram definidas por meio de código CSS explícito escrito pelo administrador do site ou se derivam dos valores padrão do navegador para elementos HTML desse tipo.
  • Em contraste, a seção "Estilos" mostra somente as regras de CSS que foram explicitamente especificadas pelo administrador do site. Cada subseção representa um local diferente no código da página, onde uma regra CSS relevante (que afeta o elemento HTML selecionado) foi escrita. Ao perceber que uma regra está causando problemas na página, clique no link no canto superior direito dessa subseção para carregar a linha ou o documento onde a regra em questão foi implementada.

  Um dos recursos mais úteis da guia "Elementos" é que ela permite que você edite o código que está inspecionando. Se você acha que uma linha de código HTML ou uma regra CSS está causando problemas na página, pode simplesmente alterar o código, a fim de testar a hipótese. Isso afeta somente a versão da página armazenada na memória temporária do navegador. Se você atualizar a página ou alguém a acessar, as alterações feitas não aparecerão.

• Guia "Resources": possibilita a inspeção de uma tabela de diferentes recursos que foram carregados juntamente com a página inspecionada. Isso inclui imagens, documentos HTML, arquivos JavaScript e muito mais. Esta guia é útil na solução de problemas do Campaign Manager 360 porque o recurso de pesquisa investigará todos os recursos disponíveis para a página, e não somente na página em si.

  CASOS DE USO

  Como encontrar tags que não estão escritas na página: embora a guia "Elements" permita a visualização do HTML processado da página, as tags de veiculação nem sempre são acionadas por um código escrito na própria página. Assim, a maneira mais fácil e confiável de localizar uma tag de veiculação implementada é usar o recurso de pesquisa na guia "Resources".

• Guia "Network": é um sniffer de proxy integrado que possibilita a monitoração do tráfego de HTTP da página, conforme o carregamento e depois que ele ocorre.

  CASOS DE USO

  • Verifique se sua tag de veiculação/do Floodlight é acionada: um sniffer de proxy é a ferramenta mais útil para os processos de controle de qualidade e solução de problemas. Essencialmente, se uma tag não for acionada, ela não poderá rastrear nem retornar o conteúdo de peças criativos conforme pretendido. Da mesma forma, contanto que a chamada adequada seja feita (com sintaxe/formatação correta), a forma como a tag é implementada é irrelevante para nossos servidores (embora possam ser feitas considerações dependendo da natureza da página). Use a guia "Network" para detectar se uma tag de veiculação/do Floodlight foi acionada e, em caso afirmativo, confirme se a sintaxe da chamada corresponde ao URL encontrado na versão não modificada da tag.
  • Teste de latência: além de verificar se uma chamada ocorre ou não, a guia Rede também exibe a quantidade de tempo que uma solicitação levou para receber uma resposta. Isso pode ser útil para testar a latência, em especial no caso de tags Floodlight dinâmicas. Se uma tag Floodlight causar atraso excessivo no carregamento da página, o controle das chamadas feitas por pixels associados pode ajudar a identificar a causa do problema. Isto é, não é provável que o atraso seja devido à própria tag Floodlight. Pelo contrário, é mais provável que um dos pixels associados à tag esteja causando latência.

• Guia Scripts: pode ser usada para depuração do código JavaScript. Embora seja uma ferramenta de valor inestimável para os desenvolvedores da Web, ela não se relaciona diretamente com o controle de qualidade nem com a solução de problemas do Campaign Manager 360.

• Guia Cronograma: mostra o tráfego HTTP e o uso de memória ao longo do tempo. De modo semelhante à guia Rede, pode ser útil para identificar fontes de latência. Caso contrário, a guia em questão não é relevante para questões relacionadas ao Campaign Manager 360.

• Guia Perfis: é uma ferramenta que os desenvolvedores de Web podem usar para otimizar o uso de CPU em aplicativos da Web. Esta guia não é relevante para questões relacionadas ao Campaign Manager 360.

• Guia Auditorias: pode analisar uma página enquanto ela carrega e exibir sugestões e otimizações para a diminuição do tempo de carregamento da página, aumentando assim a percepção de resposta e a resposta real. Esta guia não é relevante para questões relacionadas ao Campaign Manager 360.

• Guia Console: detecta erros no código da página automaticamente. Depois de usar a guia Rede para determinar se uma tag não foi acionada, a guia Console pode esclarecer o motivo para que isso tenha acontecido.

  CASOS DE USO

  Solucionar erros de sintaxe: se a tag não está sendo acionada, verifique a guia "Console" para ver se o Chrome detectou erros. Erros-chave que devem ser observados:

  Um recurso útil da guia "Console" é o de ligação das mensagens de erro à linha e ao documento que causaram o erro. Isso é útil para rastrear um problema até a linha de código que deve ser alterada. Porém, este recurso pode não ser 100% confiável sempre que for usado. Embora a detecção de erros oferecida por esta guia seja confiável, o mecanismo de atribuição é menos preciso e pode levar a uma linha próxima daquela com o erro de codificação.

  • "NS_IMAGELIB": este erro pode ocorrer quando um URL "src" de iframe é implementado como uma imagem. Essa confusão impedirá que a tag de veiculação ou do Floodlight seja acionada adequadamente. Apesar do erro, no caso das tags do Floodlight, uma conversão ainda poderá ser atribuída. Assim, se o erro ocorreu em uma tag Floodlight, nenhum dos pixels de terceiros que foram implementados na tag Floodlight podem ser acionados.
  • "Tentativa não segura do JavaScript de acessar frame com URL": esta mensagem de erro pode ser ignorada porque é simplesmente um aviso de segurança relacionado à incorporação de iframes de diferentes domínios em uma página. A maioria dos usuários não vê esse aviso, a menos que as configurações de segurança sejam muito elevadas. O aviso não terá efeito sobre a forma como a tag Floodlight ou os pixels associados serão exibidos.
  • "Recurso interpretado como '_blank_', mas transferido com tipo MIME " .": indica que há um problema de formato de arquivo. MIME é um identificador de formatos de arquivos na Internet. Esse erro pode ocorrer quando um recurso é carregado com uma extensão errada de arquivo (por exemplo, .gif em vez de .jpeg).
  • "Uncaught TypeError": indica que houve um erro de tipo em um elemento HTML da página. Normalmente, isso sugere que há um código defeituoso em uma função do JavaScript.
  • "SyntaxError não capturado": indica que houve um erro de sintaxe com um elemento na página. Normalmente, isso significa que um caractere extra (<"/-*^#) foi usado inadequadamente.