Use as Ferramentas para desenvolvedores do Google Chrome para verificar tags

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

Como acessar as Ferramentas para desenvolvedores

Para abrir as Ferramentas para desenvolvedores do Chrome, você tem as seguintes opções:

• Clique com o botão direito do mouse em uma página e selecione Inspecionar. O código HTML do elemento clicado será exibido.
• Na parte de cima da janela do navegador, selecione Visualização > Desenvolvedor > Ferramentas para desenvolvedores.

Saiba mais sobre o Chrome DevTools.

Guias disponíveis e casos de uso

• Guia "Elementos": exibe o HTML renderizado da página, que é diferente do código-fonte da página. Se elementos HTML forem criados ou alterados com JavaScript durante o carregamento da página, essas mudanças serão refletidas no HTML renderizado, enquanto o código-fonte da página vai mostrar o código sem alterações.

  Casos de uso

  • Verificar se há modificações na tag: nessa guia, é possível 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 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 "Computado" mostra todas as regras CSS que estão em vigor para o elemento selecionado, inclusive as definidas por código CSS explícito escrito pelo administrador do site e as derivadas dos valores padrão do navegador para elementos HTML desse tipo.
  • Em contraste, a seção "Estilos" mostra somente as regras 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" é a edição do código inspecionado. 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 e 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 mudanças feitas não vão aparecer.

• Guia "Fontes": possibilita a inspeção de uma tabela de diferentes recursos que foram carregados com a página inspecionada. Isso inclui imagens, documentos HTML, arquivos JavaScript e muito mais.

  Casos de uso

  Encontrar tags que não estão escritas na página: embora a guia "Elementos" permita a visualização do HTML renderizado da página, as tags de posicionamento nem sempre são acionadas por um código escrito na própria página. Na guia "Fontes", você também pode editar e depurar arquivos JavaScript.

  Dica: é possível usar o painel Pesquisar para encontrar facilmente uma tag implementada em todos os recursos carregados. No canto superior direito do DevTools, clique no ícone de três pontos e selecione Mais ferramentas > Pesquisar.

• Guia "Rede": é um sniffer de proxy integrado que permite monitorar o tráfego de HTTP da página, durante e após o carregamento.

  Casos de uso

  • Verificar se a tag de posicionamento ou 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 é acionada, ela não pode rastrear ou retornar o conteúdo do criativo como esperado. Da mesma forma, desde que a chamada adequada seja feita com sintaxe/formatação correta, a forma como a tag é implementada é irrelevante para nossos servidores (embora a natureza da página possa exigir considerações). Use a guia "Rede" para detectar se uma tag de posicionamento/do Floodlight foi acionada e, se sim, 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, a guia "Rede" também exibe o tempo que levou para a solicitação receber uma resposta. Isso pode ser útil para testar a latência, especialmente de tags do Floodlight dinâmicas. Se uma tag do Floodlight gerar atraso excessivo no carregamento da página, o controle das chamadas feitas por pixels associados em série pode ajudar a identificar a causa do problema. Provavelmente, o motivo do atraso não é a própria tag do Floodlight. Em vez disso, um dos pixels associados em série à tag deve estar causando latência.

• Guia "Desempenho": mostra o tráfego HTTP e o uso da memória ao longo do tempo. Assim como a guia "Rede", pode ser útil para identificar fontes de latência. No entanto, essa guia não é relevante para questões relacionadas ao Campaign Manager 360.

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

• Guia "Lighthouse": pode analisar uma página enquanto ela carrega e exibir sugestões para otimizar o carregamento, aumentando a capacidade de resposta e a percepção dela. Essa 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 disso.

  Casos de uso

  Resolver erros de sintaxe: se a tag não está sendo acionada, verifique na guia "Console" se o Chrome detectou erros. Preste atenção nestes erros importantes:

  • "NS_IMAGELIB": esse erro pode ocorrer quando um URL "src" de iframe é implementado como uma imagem. Essa confusão impede o acionamento adequado da tag de posicionamento ou do Floodlight. Apesar do erro, no caso das tags do Floodlight, uma conversão ainda pode ser atribuída. Assim, se o erro ocorreu em uma tag do Floodlight, nenhum dos pixels de terceiros implementados nela podem ser acionados.
  • "Tentativa não segura do JavaScript de acessar frame com URL": essa mensagem de erro pode ser ignorada, porque é apenas um aviso de segurança relacionado à incorporação de iframes de diferentes domínios em uma página. A maioria dos usuários só vê esse alerta quando as configurações de segurança são muito elevadas, e ele não afeta a veiculação da tag do Floodlight nem dos pixels associados em série.
  • "Recurso interpretado como '_blank_', mas transferido com tipo MIME " .": indica que há um problema com o 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).
  • "TypeError não capturado": 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 em um elemento na página. Geralmente, isso significa que um caractere extra (<"/-*^#) foi usado de maneira incorreta.

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