Utilizzare gli Strumenti per sviluppatori di Chrome per controllare i tag

Gli Strumenti per sviluppatori di Chrome ti permettono di analizzare rapidamente i contenuti e le risorse di una pagina web, aiutandoti, quindi, a controllare i tag Campaign Manager 360.

Accedere agli Strumenti per sviluppatori

1. Fai clic con il pulsante destro del mouse su una pagina e seleziona "Ispeziona elemento". In questo modo, viene visualizzato il codice HTML dell'elemento su cui hai fatto clic.

2. Seleziona Visualizza > Sviluppatore > Strumenti per sviluppatori.

3. Utilizza la scorciatoia "alt + comando + i".

Schede disponibili e relativi utilizzi

• Scheda Elementi. Consente di visualizzare l'HTML che ha eseguito il rendering della pagina, diverso dal codice sorgente. Se gli elementi HTML vengono creati o modificati tramite JavaScript durante il caricamento pagina, tali modifiche si rifletteranno nell'HTML visualizzato, mentre la sorgente della pagina mostrerà il codice senza alcuna alterazione.

  CASI D'USO

  • Verifica di modifiche relative ai tag. Questa scheda ti consente di individuare tag Floodlight e/o di posizionamento implementati nella pagina, oltre a verificare se sono state apportate modifiche a tali tag. Quando devi cercare il tag, un termine di ricerca utile è "double", poiché gli URL nei tag di posizionamento Campaign Manager 360 includono URL che utilizzano il dominio "doubleclick". Una volta trovati i tag, confronta questa versione implementata del tag con il tag che viene esportato direttamente dall'interfaccia utente di Trafficking.
  • Risoluzione dei problemi con CSS. Nella scheda Elementi, nella colonna di destra vengono elencati diversi attributi CSS che controllano come e dove viene visualizzato l'elemento HTML selezionato.
  • La barra "Stile calcolato" visualizza tutte le regole CSS applicate all'elemento selezionato, sia quelle impostate utilizzando un codice CSS esplicito scritto dall'amministratore del sito web della pagina, sia quelle derivate dai valori predefiniti del browser per gli elementi HTML di quel tipo.
  • Al contrario, la sezione "Stili" visualizza solo le regole CSS specificate esplicitamente dall'amministratore del sito web. Ogni sottosezione rappresenta una posizione diversa nel codice della pagina, in cui è stata scritta una regola CSS pertinente (che influisce sull'elemento HTML selezionato). Se noti una regola che sta causando un problema nella pagina, puoi fare clic sul link nell'angolo in alto a destra di quella sottosezione per caricare la riga o il documento in cui tale regola è stata implementata.

  Una delle funzioni più utili della scheda Elementi è la possibilità di modificare il codice esaminato. Se ritieni di aver trovato una riga di codice HTML o una regola CSS che causa problemi nella pagina, puoi modificare il codice per verificare la tua ipotesi. La modifica interessa solo la versione della pagina archiviata nella memoria temporanea del browser. Se ricarichi la pagina (o se un altro utente la visita), le modifiche apportate non verranno visualizzate.

• Scheda Risorse. Ti consente di to inspect a table of the different resources which were loaded alongside the inspected page. Include immagini, documenti HTML, file JavaScript e altro ancora. Questa scheda è utile per la risoluzione di problemi correlati a Campaign Manager 360, poiché la funzionalità di ricerca esamina tutte le risorse disponibili per la pagina, non solo quelle presenti nella pagina stessa.

  CASI D'USO

  Trovare tag che non sono scritti nella pagina. La scheda Elementi ti consente di visualizzare l'HTML della pagina sottoposto a rendering, ma i tag di posizionamento non vengono sempre attivati dalla scrittura del codice nella pagina. Detto questo, la funzione di ricerca della scheda Risorse è il modo più semplice e affidabile per individuare e implementare il tag annuncio.

• Scheda Rete. Si tratta di uno sniffer proxy integrato che ti consente di monitorare il traffico HTTP della pagina, sia durante il caricamento sia in seguito.

  CASI D'USO

  • Verificare l'attivazione del tag di posizionamento/Floodlight. Lo sniffer proxy è lo strumento più utile per il QA e la risoluzione dei problemi. In sostanza, se un tag non viene attivato, non può tenere traccia dei contenuti della creatività, né restituirli come previsto. Allo stesso modo, se viene eseguita la chiamata corretta (con la sintassi e la formattazione corretta), i nostri server non fanno distinzione nel modo in cui il tag è stato implementato (anche se potrebbe essere necessario fare alcune considerazioni a seconda della natura della pagina). Utilizza la scheda Rete per stabilire se un tag di posizionamento/Floodlight è stato attivato. In questo caso, assicurati che la sintassi della chiamata corrisponda all'URL trovato nella versione del tag non modificata.
  • Test della latenza: oltre a indicare il verificarsi di una chiamata, la scheda Rete visualizza anche il tempo trascorso prima che una determinata richiesta riceva una risposta. Questo può essere utile per la verifica della latenza, soprattutto in caso di tag Floodlight dinamici. Se un tg Floodlight ritarda in modo eccessivo il caricamento di una pagina, la verifica delle chiamate eseguite dai pixel inseriti spesso contribuisce all'individuazione della causa del problema. In altre parole, è improbabile che il ritardo sia stato causato dal tag Floodlight. È invece più probabile che il responsabile della latenza sia uno dei pixel inseriti nel tag.

• Scheda Script. Può essere utilizzata per il debug del codice JavaScript. Pur trattandosi di uno strumento prezioso per gli sviluppatori web, non è pertinente ai fini del QA o della risoluzione di problemi riguardanti Campaign Manager 360.

• Scheda Sequenza temporale. Consente di visualizzare il traffico HTTP e la memoria utilizzata nel tempo. Proprio come la scheda Rete, questa scheda può essere utilizzata per individuare le fonti di latenza. In caso contrario, questa scheda non è pertinente ai fini dei problemi correlati a Campaign Manager 360.

• Scheda Profili. Si tratta di uno strumento con cui gli sviluppatori web possono ottimizzare l'utilizzo della CPU nelle applicazioni web. Questa scheda non è pertinente ai fini dei problemi correlati a Campaign Manager 360.

• Scheda Verifiche. Consente di analizzare una pagina durante il caricamento e fornisce suggerimenti e ottimizzazioni per ridurre il relativo tempo di caricamento e aumentare la velocità di risposta percepita (e reale). Questa scheda non è pertinente ai fini dei problemi correlati a Campaign Manager 360.

• Scheda Console. Rileva automaticamente gli errori all'interno del codice della pagina. Dopo aver utilizzato la scheda Rete per stabilire la mancata attivazione di un tag, la scheda Console può aiutarti a chiarirne il motivo.

  CASI D'USO

  Risoluzione dei problemi legati agli errori di sintassi. Sse il tag non viene attivato, consulta la scheda Console per verificare se Chrome ha rilevato qualche errore. Gli errori principali da cercare sono elencati di seguito:

  Una funzione utile della scheda Console consiste nell'associare i messaggi di errore alla riga e al documento che ne sono la causa. È un buon metodo per risalire alla riga di codice che ha generato il problema e per modificarla. Tuttavia, questa funzione non è sempre affidabile al 100%. Sebbene il rilevamento dell'errore da parte della scheda sia affidabile, il meccanismo di attribuzione è meno preciso; potrebbe infatti indicare una riga corretta solo perché posta in prossimità dell'errore di codifica.

  • "NS_IMAGELIB". Questo errore può verificarsi quando un URL "src" iframe viene implementato come immagine. Questo impedisce al tag di posizionamento o Floodlight di essere attivato correttamente, tuttavia nel caso di tag Floodlight, potrebbe essere comunque attribuita una conversione. Detto questo, se un tag Floodlight contiene un errore, non può essere attivato nessuno dei pixel di terze parti implementati nel tag.
  • "Unsafe JavaScript attempt to access frame with URL": puoi ignorare questo errore, poiché si tratta semplicemente di un avviso di sicurezza correlato all'incorporamento di iframe provenienti da domini diversi in una pagina. La maggior parte degli utenti visualizza questo avviso solo se ha impostato un livello di sicurezza molto elevato; inoltre, non ha effetto sulla pubblicazione di Floodlight o dei pixel inseriti.
  • "Resource interpreted as '_blank_' but transferred with MIME type " .". Questo errore indica che è presente un problema relativo al formato del file. Il tipo MIME è un identificatore per i formati dei file su Internet. Questo errore può verificarsi quando una risorsa viene caricata con l'estensione del file sbagliata (ad esempio, gif. invece .jpeg).
  • "Uncaught TypeError". Indica un errore di digitazione in un elemento HTML della pagina. In genere, suggerisce la presenza di un codice sbagliato all'interno di una funzione JavaScript.
  • "Uncaught SyntaxError". Indica un errore di sintassi in un elemento della pagina. In genere, suggerisce la presenza di un carattere aggiuntivo (<"/-*^#) utilizzato in modo inappropriato.