Utilizzare gli Strumenti per sviluppatori di Chrome per controllare i tag

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

Accesso agli strumenti per sviluppatori

Per aprire gli strumenti per sviluppatori di Chrome, puoi:

• Fare clic con il tasto destro del mouse su una pagina e selezionare Ispeziona. In questo modo, viene visualizzato il codice HTML dell'elemento su cui hai fatto clic.
• Selezionare Visualizza > Sviluppatore > Strumenti per sviluppatori nella parte superiore dello schermo.

Ulteriori informazioni su Chrome DevTools.

Schede disponibili e loro 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, queste 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 questi 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 "Elaborati" 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 questa 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 Origini: consente di esaminare una tabella delle diverse risorse caricate insieme alla pagina ispezionata. Include immagini, documenti HTML, file JavaScript e altro ancora.

  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. Nella scheda Origini, puoi anche modificare o eseguire il debug dei file JavaScript.

  Suggerimento: puoi usare anche il riquadro Cerca per individuare facilmente un tag implementato in tutte le risorse caricate. Nell'angolo in alto a destra di DevTools, fai clic sull'icona con tre puntini e selezionare Altri strumenti > Cerca.

• 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 o Floodlight: lo sniffer proxy è lo strumento più utile per il QA e la risoluzione dei problemi. Fondamentalmente, se un tag non si attiva, non può monitorare o restituire contenuti di creatività 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 tag Floodlight ritarda in modo eccessivo il caricamento di una pagina, la verifica delle chiamate eseguite dai pixel piggyback 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 piggyback nel tag.

• Scheda Prestazioni: mostra 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 Memoria: è 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 Lighthouse: 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. Se 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:

  • "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 piggyback.
  • "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. anziché .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, significa che è stato utilizzato un carattere extra (<"/-*^#) in modo non appropriato.

  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 programmazione.