Categories
Uncategorized

Guida avanzata: come monitorare NUCLEO WEB vitali CON Google Tag Manager

TheMummichogblog è un partecipante al Amazon Services LLC Associates programma, un programma di affiliazione pubblicitario progettato per fornire un mezzo per siti per guadagnare tariffe pubblicitarie con la pubblicità e il link al amazon.com. Amazon, il logo di Amazon, AmazonSupply, e il logo AmazonSupply sono marchi di Amazon.com, Inc. o delle sue affiliate.

Guida avanzata: come monitorare NUCLEO WEB vitali CON Google Tag Manager

In questa guida vi spiegherò il modo più semplice per tenere traccia Nucleo Web Vitals (se non si sa cosa Nucleo Web Vitas sono, clicca qui per leggere il mio articolo italiano) ossia metriche che sono il nuovo fattore di ranking a livello SEO per Google.

--------------------------------------------------------------------------------------------------



Perciò può salvare perfettamente quelli che per mezzo di lui si accostano a Dio, essendo egli sempre vivo per intercedere a loro favore.

----------------------------------------------------------------------------------------------

Questo post è ispirato:

l’articolo web.dev ufficiale che spiega diversi argomenti su questo problema;
il link GitHub dove c’è uno script già fatto per la gestione delle API Web organi vitali con diversi strumenti tra cui Google Tag Manager.
In realtà mi sono ispirato a diverse fonti, ma il post di Philip Walton è la fonte più autorevole per me.

Metriche Per mettere a fuoco sono:

Più grande della vernice contentful (LCP)
Prima ritardo ingresso (FID)
Cumlative layout Shift (CLS)
Sei pronto a sfruttare le tre metriche Nucleo Web organi vitali e creare il proprio monitoraggio real utente?

Andiamo!

FASE 1 – creare tag HTML personalizzato con Web vitali APIS
Siete in grado di Creare il tag HTML personalizzato solo con coping e incollando il seguente script (integrato da alcuni piccoli cambiamenti, con l’aiuto della guida di Simen Hansen) in 10 secondi.

Tag> Nuovo> Tag Configurazione> Tag HTML personalizzato.
Copia e incolla questo script:



Attivazione>selezionare“Tutte le pagine”trigger.
Rinomina tag come“Script–Web Vital”.
Salvare e pubblicare.
Alcune considerazioni:
Le parti verdi sono commenti(èanche possibile eliminarli)
L’oggetto dataLayer deve essere inizializzato.Nessun problema:ègiàcosì🙂
Dal momento che Google Analytics piace interi c’èun arrotondamento nel parametro event_value(Math.round),e nel caso della CLS un multiplo metrica 1000 viene aggiunto.
Il parametro event_label contiene un ID univoco della pagina
Ci sono tre metriche da aggiungere:grande contentful Paint(LCP),primo ingresso Delay(FID),Cumlative layout Shift(CLS)
Quindi questo script spara tre eventi chiamato Web-vitali in GTM.metriche intercettare andiamo.

FASE 2 – CREATE TRIGGER PER IL WEB vitali Custom Event
Trigger> Nuovo> Configurazione trigger.
Tipo trigger: eventi personalizzati.
Nome evento: web-vitali.
Rinomina trigger: “Web Vital”.
Salva.
FASE 3 – creare dati variabili di strato
Dovete valori raccogliere tali si trovano all’interno dataLayer per inviarli a Google Analyitcs.

Questi valori sono:

event_category
event_action
event_value
event_label
Non vi resta che farlo per tutti i quattro valori.

Variabili> Nuovo> Configurazione Variabile> Livello dati variabili

Nome: DLV – event_category
I dati di livello Nome variabile: event_category
Data Layer Versione: Version 2
Fare lo stesso per il resto delle variabili cambiando il loro nome e il valore:

Variabili> Nuovo> Configurazione Variabile> Livello dati variabili

Nome: DLV – event_action
I dati di livello Nome variabile: event_action
Data Layer Versione: Version 2
Variabili> Nuovo> Configurazione Variabile> Livello dati variabili

Nome: DLV – event_value
I dati di livello Nome variabile: event_value
Data Layer Versione: Version 2
Variabili> Nuovo> Configurazione Variabile> Livello dati variabili

Nome: DLV – event_label
I dati di livello Nome variabile: event_label
Data Layer Versione: Version 2
Grande! Non vi resta che inviare i valori a Google Analytics (ma se lo si desidera, è possibile inviare queste metriche per qualsiasi altro strumento).

FASE 3 – creare e configurare Google Analytics MODIFICA PER vitali WEB
Tag> Nuovo.
Tipo di tag: Universal Analytics.
Traccia Tipo: evento.
Categoria: {{DLV – event_category}}
Azione: {{DLV – event_action}}
Etichetta: {{DLV – event_label}}
Valore: {{DLV – event_value}}
Non interazione Hit: Vero
Seleziona Google Analytics variabile su Google Analytics le regolazioni variabili e Abilita impostazioni imperativi. Inserire GA Costant o GA codice di monitoraggio come monitoraggio.

Firing Trigger: “Web Vital”.
Rename Tag: “GA – Event – Web Vitals”.
Salva.
FASE 5 – verificare il funzionamento TAG CORRETTO
Prima di pubblicare eventuali modifiche, verificare il tag corretto funzionamento attivando la modalità di anteprima e debug.

Vai al tuo sito e aggiornare la pagina. Si dovrebbe vedere una casella nella parte inferiore della pagina corrente che mostra “web-vitali” evento attivato tre volte. Clicca sul Tag licenziato su questo evento, troverete Tag appena creato.

Questo tag si attiva tre volte, una per ogni metrica. Tenete a mente che l’evento corrispondente alle CLS metriche avrà un po ‘di più a comparire nella casella.

Pertanto, ogni evento ci sarà una spinta dataLayer che avrà i parametri dei tre parametri:

Più grande della vernice contentful (LCP)
Prima ritardo ingresso (FID)
Cumlative layout Shift (CLS)

E questi seguenti tag in Google Analytics.

FASE 6 – Pubblica modifiche
Se i tag funzionano correttamente, allora è possibile pubblicare le modifiche.

PROSSIMO PASSO: CREA IL TUO R.U.M.
Ora che i dati vengono inviati a Google Analytics, è necessario esportare e creare report e la tua Monitoring Real User.

Come spiegato nel web.dev articolo ufficiale

“Per ciascuna delle metriche di cui sopra, al fine di garantire si sta colpendo il bersaglio consigliato per la maggior parte degli utenti, una soglia buona per misura è il 75 ° percentile di caricamento della pagina, segmentato attraverso i dispositivi mobili e desktop.”

Bisogna aspettare per i dati (per pochi giorni) e poi è possibile esportare utilizzando strumenti come Google Foglio, BigQuery e Data Studio.

Volete leggere una guida che spiega come si fa? Fatemi sapere nei commenti!

Ci vediamo nel prossimo articolo eBuon Tag 😉

LINK
Definire le soglie del Core Web Vitals metriche
Iniziare con la misurazione Web Vitals
Strumenti per misurare Nucleo Web Vitals
Come misurare le prestazioni del sito e monitor con Nucleo Web Vitals di Google

Advanced Guide: how to track Core Web Vitals with Google Tag Manager

Amazon e il logo di Amazon sono marchi di Amazon.com, Inc., o delle sue affiliate.