COME

Come fare per casa

Menù

Barra delle icone Icona del menu Fisarmonica Schede Schede verticali Intestazioni delle schede Schede a pagina intera Schede al passaggio del mouse Navigazione superiore Navigazione superiore reattiva Navbar con icone Menu di ricerca Barra di ricerca Barra laterale fissa Navigazione della pagina Barra laterale reattiva Navigazione a schermo intero Menu fuori tela Passare i pulsanti di navigazione laterale Barra laterale con icone Menu a scorrimento orizzontale Menù verticale Navigazione in basso Navigazione in basso reattiva Collegamenti di navigazione del bordo inferiore Collegamenti del menu allineati a destra Collegamento al menu centrato Collegamenti menu di uguale larghezza Menù fisso Scorri la barra verso il basso durante lo scorrimento Nascondi barra di navigazione su scorrimento Riduci la barra di navigazione a scorrimento Barra di navigazione appiccicosa Navbar sull'immagine Passa il mouse a discesa Fare clic su Menu a discesa Discesa a cascata Menu a discesa in Topnav Menu a discesa in Sidenav Resp Navbar a discesa Menu di sottonavigazione Ritiro Menù Mega Menù mobile Menù a tendina Barra laterale compressa Pannello laterale crollato Impaginazione Briciole di pane Gruppo di pulsanti Gruppo di pulsanti verticali Barra sociale appiccicosa Navigazione pillola Intestazione reattiva

immagini

Presentazione Galleria di diapositive Immagini modali Lightbox Griglia immagine reattiva Griglia di immagini Galleria di schede Dissolvenza sovrapposizione immagine Sovrapposizione immagine diapositiva Zoom immagine sovrapposta Titolo sovrapposizione immagine Icona Sovrapposizione immagine Effetti immagine Immagine in bianco e nero Testo immagine Blocchi di testo immagine Testo immagine trasparente Immagine a pagina intera Modulo su immagine Immagine dell'eroe Immagine di sfondo sfocata Cambia Bg su Scroll Immagini affiancate Immagini arrotondate Immagini avatar Immagini reattive Immagini centrali Miniature Bordo intorno all'immagine Incontrare la squadra Immagine appiccicosa Capovolgi un'immagine Scuoti un'immagine Galleria Portfolio Portafoglio con filtro Zoom immagine Lente d'ingrandimento per immagini Dispositivo di scorrimento per il confronto delle immagini Favicon

Bottoni

Pulsanti di avviso Bottoni Contorno Bottoni divisi Pulsanti animati Pulsanti in dissolvenza Pulsante sull'immagine Pulsanti dei social media Leggi di più Leggi di meno Caricamento pulsanti Scarica pulsanti Pulsanti pillola Pulsante di notifica Pulsanti icona Pulsanti Avanti/Prec Pulsante Altro in Nav Pulsanti di blocco Pulsanti di testo Bottoni rotondi Pulsante Scorri verso l'alto

Forme

Modulo di accesso Modulo di iscrizione Modulo di pagamento Modulo di Contatto Modulo di accesso sociale Modulo di registrazione Modulo con icone Notiziario Modulo impilato Modulo reattivo Modulo popup Modulo in linea Cancella campo di immissione Nascondi le frecce numeriche Copia il testo negli appunti Ricerca animata Pulsante Cerca Ricerca a schermo intero Campo di immissione nella barra di navigazione Modulo di accesso in Navbar Casella di controllo/radio personalizzata Selezione personalizzata Interruttore a levetta Seleziona la casella di controllo Rileva blocco maiuscole Pulsante di attivazione su Invio Convalida della password Attiva/disattiva la visibilità della password Modulo a più passaggi Completamento automatico Disattiva il completamento automatico Disattiva il controllo ortografico Pulsante di caricamento file Convalida input vuota

Filtri

Elenco filtri Tabella dei filtri Elementi filtranti Filtro a discesa Ordina elenco Tabella degli incantesimi

Tabelle

Tavolo a strisce zebrate Tavoli centrali Tavolo a tutta larghezza Tavoli affiancati Tabelle reattive Tavola di comparazione

Di più

Video a schermo intero Scatole modali Elimina modale Sequenza temporale Indicatore di scorrimento Barre di avanzamento Barra delle abilità Cursori di intervallo Suggerimenti Visualizza elemento al passaggio del mouse Popup Collassabile Calendario HTML include Lista di cose da fare Caricatori Stelle Voto dell'utente Effetto di sovrapposizione Chip di contatto Carte Capovolgere la carta Scheda Profilo Scheda Prodotto Avvisi Chiamare Appunti Etichette Cerchi Stile risorse umane Buono Gruppo di elenchi Elenco senza punti elenco Testo reattivo Testo ritagliato Testo luminoso Piè di pagina fisso Elemento appiccicoso Uguale altezza Clearfix Galleggianti reattivi Snack bar Finestra a schermo intero Scorri il disegno Scorrimento fluido Scorrimento Gradiente Bg Intestazione appiccicosa Riduci intestazione su scorrimento Tabella dei prezzi Parallasse Proporzioni Iframe reattivi Attiva/disattiva Mi piace/Non mi piace Attiva/disattiva Nascondi/Mostra Attiva/disattiva la modalità oscura Attiva/disattiva testo Attiva/Disattiva classe Aggiungi classe Rimuovi classe Classe attiva Visualizzazione ad albero Rimuovi proprietà Rilevamento offline Trova l'elemento nascosto Reindirizzare la pagina web Zoom al passaggio del mouse Flip Box Centrare verticalmente Pulsante centrale in DIV Transizione al passaggio del mouse Frecce Forme Link per scaricare Elemento a tutta altezza Finestra del browser Barra di scorrimento personalizzata Nascondi barra di scorrimento Mostra/Forza barra di scorrimento Aspetto dispositivo Confine contentabile Colore segnaposto Colore selezione testo Colore proiettile Linea verticale Divisori Icone animate Conto alla rovescia Macchina da scrivere Prossimamente Pagina Messaggi di chat Finestra di chat popup Schermo diviso Testimonianze Contatore di sezione Presentazione di citazioni Voci di elenco chiudibili Tipici punti di interruzione del dispositivo Elemento HTML trascinabile Query sui media JS Evidenziatore di sintassi Animazioni JS Lunghezza della stringa JS Esponenziazione JS Parametri predefiniti JS Ottieni URL corrente Ottieni la dimensione dello schermo corrente Ottieni elementi Iframe

Sito web

Crea un sito web gratuito Crea un sito web Crea un sito web statico Crea un sito web (W3.CSS) Crea un sito web (BS3) Crea un sito web (BS4) Crea un sito web (BS5) Crea e visualizza un sito web Crea un sito Web con albero di collegamento Crea un portafoglio Crea un curriculum Crea un sito web per ristoranti Crea un sito web aziendale Crea un WebBook Sito web del centro Sezione Contatti Informazioni sulla pagina Grande intestazione Esempio di sito web

Griglia

Disposizione a 2 colonne Disposizione a 3 colonne Disposizione a 4 colonne Griglia in espansione Visualizzazione a griglia elenco Layout a colonne miste Carte Colonna Layout a zig zag Layout del blog

Google

Grafici di Google Google Font Abbinamenti di caratteri Google Google Imposta Analytics

Convertitori

Converti peso Converti temperatura Converti lunghezza Converti velocità

Blog

Ottieni un lavoro da sviluppatore Diventa uno sviluppatore front-end.

Come impostare Google Analytics

Google Analytics viene utilizzato per visualizzare e comprendere il traffico web.

È gratuito e facile da usare.

Puoi personalizzarlo per molti casi d'uso.

Funziona fuori dagli schemi.

È veloce da configurare. Ottieni le tue intuizioni oggi!

Crea il mio sito web gratuito ❯

Salta la lettura di Google Analytics. Portami direttamente al primo passo. Vai al primo passaggio

Cos'è Google Analytics

Google Analytics è una soluzione di analisi web.

È sviluppato e supportato da Google.

L'ultima versione si chiama Google Analytics 4.

Può essere utilizzato per visualizzare dati come pubblico, visualizzazioni di pagina, sessioni e dati demografici ed eventi.

Perché abilitare Google Analytics

Comprendi il tuo traffico web per prendere decisioni migliori.

Comprendere e migliorare il funnel di vendita.

Impara dalla sperimentazione (ad esempio, test a/b).

Google ha un'altra soluzione chiamata Google Optimize. Questa soluzione è fatta per i test.


Per chi è Google Analytics

Google Analytics è utile per chiunque abbia un sito web.

Ti fornisce informazioni su chi utilizza il tuo sito e su come interagiscono con esso.

Inoltre, l'interfaccia è facile da capire.

Non è necessario un background di analisi per utilizzare e navigare nel servizio.


Come impostare Google Analytics passo dopo passo

Google Analytics può essere impostato in due modi : Global Website Tag (gtag.js) o Google Tag Manager .

Il modo più semplice è utilizzare il tag globale del sito web.

Questo tutorial utilizzerà l'approccio The Global Website Tag.


Preparativi

Decidi quale editor di codice utilizzare e configura il tuo ambiente.

W3Schools ha creato un editor di codice facile da usare chiamato W3Schools Spaces . Iscriviti e inizia in pochi clic.

Inizia gratis ❯

Crea il tuo file index.html in modo da essere pronto per inserire il codice.

Tutta la configurazione. Andiamo!


Imposta Google Analytics: il tag globale del sito web


Passaggio 1: crea un account Google Analytics

Vai ad Analytics: crea un account o accedi ad Analytics

Il link nel paragrafo precedente porta alla pagina di destinazione di Google Analytics.

Fai clic sul pulsante "Inizia gratuitamente".

pagina di destinazione

Passaggio 2: accedere alla pagina di benvenuto

Dopo aver creato un account o aver effettuato l'accesso, sei il benvenuto nella soluzione.

Premere il pulsante "Inizia misurazione" per procedere.

Pagina di benvenuto

Passaggio 3: configurazione dell'account

Hai due decisioni da prendere qui.

  1. Inserisci il nome del tuo account.
  2. Decidi quali dati vuoi condividere.
  3. Fare clic sul pulsante "Avanti".

Un account può avere più di un ID di monitoraggio. Puoi monitorare più di un sito Web con un account.

Panoramica della configurazione dell'account

Passaggio 4: configurazione della proprietà

La proprietà è il servizio che misuri, come un sito Web, un'applicazione, un albero dei collegamenti, ecc.

  1. Immettere un nome di proprietà.
  2. Inserisci il tuo fuso orario.
  3. Inserisci la valuta che usi.
  4. Fare clic sul pulsante "Avanti".
Panoramica della configurazione della proprietà

Passaggio 5: aggiungi informazioni sull'attività

Analytics utilizza le informazioni per personalizzare la tua esperienza.

  1. Seleziona la categoria del tuo settore.
  2. Seleziona la dimensione dell'attività.
  3. Tick the boxes for how you are planning to use Analytics.
  4. Click the "Create" button to proceed.
Dettagli delle informazioni commerciali

Step 6: Terms of Service Agreement

Read and understand the terms of service.

Tick the GDPR box and click the "I accept" button if you agree.

Panoramica di termini e condizioni

Step 7: Email subscriptions

  1. Tick or uncheck all boxes.
  2. Click the "Save" button to continue.
Panoramica della comunicazione e-mail

Step 8: Select platform

Chose the platform where you are collecting data.

Then, click the relevant platform to continue.

We are continuing with "Web" as the example in this tutorial.

Seleziona la panoramica della piattaforma

Step 9: Data stream setup

Enter data stream details.

  1. The URL to your site.
  2. The name that you want to give the stream.
  3. Decide if you are to enable enhanced measurement or not.
  4. Click on the "Create stream" button to continue.
  5. The enhanced measurement can give the data more context. Improving your understanding of the traffic.

    Panoramica della configurazione del flusso di dati

    Step 10: Web stream overview

    Here you can see a detailed overview of the web stream.

    Panoramica dei dettagli del flusso web

    Here are the key takeaways from the overview.

    1. Stream URL.

    The Stream URL is the link to the connected site.

    URL del flusso

    2. Measurement ID

    The Measurement ID is the identifier for your data stream.

    It has a format of G-XXXXXXX.

    ID di misura

    Google Analytics 4 uses Measurement ID. Older versions use Tracking ID. You can not have both.

    3. Tagging instructions

    Decide to use Global site tag (gtag.js) or Tag manager.

    This tutorial will use the Global site tag.

    Installing the Global site tag is the easiest and quickest way of getting it up and running.

    istruzioni di etichettatura

    Step 11: Global site tag (gtag.js)

    Click the "Global site tag (gtag.js)" row.

    Tag globale del sito

    Here you can see a code snippet.

    The code snippet is a script to allow Google to measure data on your site.

    You can see the Measurement ID in the second last line in the code snippet.

    The code snippet

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-DNJN1PF3CS"></script>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-XXXXXXX');
    </script>

    Step 12: Enter the code snippet

    Copy the code snippet.

    Make sure to include your Measurement ID.

    Locate the <head> tag in your HTML.

    Paste the code snippet just below the <head> tag.

    Save and publish the code.

    Aggiungi uno snippet di codice

    We used W3Schools Spaces in this example.


    Step 13: Test that it works

    Ensure that you have successfully saved and published the code snippet with the correct Measurement ID.

    Open the URL for the site you have connected to the data stream.

    Click on "Real time" on the menu to the left.

    Confirm that you see yourself as an active user.

    Congrats. You have successfully enabled Google Analytics for your site!

    Analytics dashboard

    Explore Google Analytics

    Recommended related topics are Tag manager and Events

    Spend time in the service to learn about your user activity, commerce, demographics, device, and referrals.


    Tip: Ever heard of W3Schools Spaces? It is a personal space where you can make a website from scratch or use a template and host it for free.

    It has everything you need in the browser.

    Get started in a few clicks.

    Start now for free ❯

    * no credit card required