HOE

Hoe naar huis

Menu's

Pictogrambalk Menupictogram Accordeon Tabbladen Verticale tabbladen Tabkoppen Tabbladen op volledige pagina Beweeg tabbladen Bovenste navigatie Responsieve Topnav Navigatiebalk met pictogrammen Zoekmenu Zoekbalk Vaste zijbalk Paginanavigatie Responsieve zijbalk Navigatie op volledig scherm Off-Canvas-menu Beweeg de Sidenav-knoppen Zijbalk met pictogrammen Horizontaal scrollmenu Verticaal menu Bodemnavigatie Responsieve bodemnavigatie Onderste rand navigatielinks Rechts uitgelijnde menulinks Gecentreerde menulink Menukoppelingen met gelijke breedte Vast menu Schuif de balk omlaag bij scrollen Verberg navigatiebalk op scrollen Navbar verkleinen bij scrollen Sticky Navbar Navigatiebalk op afbeelding Vervolgkeuzemenu's voor zweven Klik op vervolgkeuzelijsten Trapsgewijze vervolgkeuzelijst Vervolgkeuzelijst in Topnav Dropdown in Sidenav Vervolgkeuzelijst Resp Navbar Subnavigatiemenu Drop-up Mega-menu Mobiel menu Gordijnmenu Samengevouwen zijbalk Samengevouwen zijpaneel Paginering Paneermeel Knop groep Verticale knopgroep Sticky Social Bar Pil navigatie Responsieve koptekst

Afbeeldingen

Diavoorstelling Galerij met diavoorstelling Modale afbeeldingen Lichtbak Responsief afbeeldingsraster Afbeeldingsraster Tabblad Galerij Afbeeldingsoverlay vervagen Dia overlay afbeelding Afbeelding Overlay Zoom Titel afbeelding overlay Afbeeldingsoverlay-pictogram Afbeeldingseffecten Zwart-wit afbeelding Afbeeldingstekst Afbeeldingstekstblokken Transparante afbeeldingstekst Afbeelding op volledige pagina Formulier op afbeelding Heldenafbeelding Achtergrondafbeelding vervagen Wijzig Bg bij scrollen Afbeeldingen naast elkaar Afgeronde afbeeldingen Avatar-afbeeldingen Responsieve afbeeldingen Afbeeldingen centreren Miniaturen Rand rond afbeelding Ontmoet het team Kleverige afbeelding Een afbeelding spiegelen Schud een afbeelding Portfolio Galerij Portfolio met filtering Afbeelding zoomen Afbeelding vergrootglas Schuifregelaar voor beeldvergelijking favicon

Toetsen

Waarschuwingsknoppen Overzichtsknoppen Split-knoppen Geanimeerde knoppen Vervagende knoppen Knop op afbeelding Knoppen voor sociale media Lees meer Lees minder Knoppen laden Downloadknoppen Pil Knoppen Meldingsknop Pictogramknoppen Volgende/vorige knoppen Meer Knop in Nav Blokkeerknoppen Tekstknoppen Ronde Knoppen Scroll naar boven-knop

Formulieren

login formulier Aanmeldingsformulier Afrekenformulier Contact Formulier Sociaal inlogformulier Inschrijfformulier Formulier met pictogrammen Nieuwsbrief Gestapelde vorm Responsieve vorm Pop-upformulier Inline formulier Invoerveld wissen Nummerpijlen verbergen Tekst kopiëren naar klembord Geanimeerd zoeken Zoekknop Zoeken op volledig scherm Invoerveld in Navbar Inlogformulier in Navbar Aangepast selectievakje/radio Aangepaste selectie Tuimelschakelaar Vink selectievakje aan Caps Lock detecteren Triggerknop op Enter Wachtwoordvalidatie Toggle Zichtbaarheid wachtwoord Formulier met meerdere stappen Automatisch aanvullen Automatisch aanvullen uitschakelen Spellingcontrole uitschakelen Knop voor het uploaden van bestanden Lege invoervalidatie

Filters

Filterlijst Filtertabel Filterelementen Filter Dropdown Sorteer lijst Spell-tabel

Tafels

Zebra gestreepte tafel Middelste tafels Tafel over de volledige breedte Side-by-side tafels Responsieve tabellen Vergelijkingstabel

Meer

Video op volledig scherm Modale dozen Modaal verwijderen Tijdlijn Scroll-indicator: Voortgangsbalken Vaardigheidsbalk Bereikschuifregelaars Knopinfo Weergave-element zweven Pop-ups Opvouwbaar Kalender HTML bevat Te doen lijst Laders Sterrenclassificatie Gebruikersbeoordeling Overlay-effect Contactchips Kaarten Kaart omdraaien Profielkaart Productkaart Waarschuwingen Uitroepen Opmerkingen: Etiketten Cirkels Stijl HR Coupon Lijst groep Lijst zonder opsommingstekens Responsieve tekst Uitgesneden tekst Gloeiende tekst Vaste voettekst Kleverig element gelijke hoogte Clearfix Responsieve floats Snack bar Venster op volledig scherm Roltekening Vloeiend scrollen Verloop Bg Scroll Sticky Header Koptekst bij scrollen verkleinen Prijstabel Parallax Beeldverhouding Responsieve Iframes Wisselen van leuk/niet leuk Toggle Verbergen/Tonen Schakel donkere modus in Tekst wisselen Klasse wisselen Klasse toevoegen Klasse verwijderen Actieve klasse Boom zicht Eigenschap verwijderen Offline detectie Zoek verborgen element Webpagina omleiden Zoom zweven Flip Box Verticaal centreren Middelste knop in DIV Overgang bij zweven Pijlen vormen Download link Element op volledige hoogte Browservenster Aangepaste schuifbalk Verberg schuifbalk Schuifbalk tonen/dwingen Apparaat uiterlijk Bewerkbare rand Tijdelijke aanduiding kleur Tekst selectie kleur Kogelkleur Verticale lijn Verdelers Animeren van pictogrammen Afteltimer Schrijfmachine Binnenkort pagina Chatberichten Pop-up chatvenster Gesplitst scherm Getuigenissen Sectieteller Citaten Diavoorstelling Afsluitbare lijstitems Typische apparaatonderbrekingen Versleepbaar HTML-element JS-mediaquery's Syntaxis markeerstift JS Animaties JS-snaarlengte JS Machtsverheffen JS-standaardparameters Huidige URL ophalen Huidige schermgrootte ophalen Iframe-elementen ophalen

Website

Maak een gratis website Maak een website Een statische website maken Maak een website (W3.CSS) Een website maken (BS3) Maak een website (BS4) Maak een website (BS5) Een website maken en bekijken Een linkboom-website maken Maak een portfolio Maak een CV Maak een restaurantwebsite Maak een zakelijke website Maak een WebBook Center-website Contact Sectie Over pagina Grote kop Voorbeeldwebsite

Rooster

2-kolomsindeling 3-kolomsindeling 4-kolomsindeling Uitbreidend raster Lijstrasterweergave Gemengde kolomindeling Kolomkaarten Zig Zag-indeling Bloglay-out

Google

Google-kaarten Google-lettertypen Koppelingen van Google-lettertypen Google Analytics instellen

Converters

Gewicht omrekenen Temperatuur converteren Lengte converteren Converteer snelheid

Blog

Een baan als ontwikkelaar krijgen Word een front-end ontwikkelaar.

Hoe Google Analytics in te stellen

Google Analytics wordt gebruikt om webverkeer te bekijken en te begrijpen.

Het is gratis en gemakkelijk te gebruiken.

U kunt het voor veel gebruikssituaties aanpassen.

Het werkt uit de doos.

Het is snel op te zetten. Ontvang vandaag nog uw inzichten!

Maak mijn gratis website ❯

Sla het lezen over Google Analytics over. Breng me direct naar de eerste stap. Ga naar de eerste stap

Wat is Google Analytics

Google Analytics is een oplossing voor webanalyse.

Het is ontwikkeld en ondersteund door Google.

De nieuwste versie heet Google Analytics 4.

Het kan worden gebruikt om gegevens zoals doelgroep, paginaweergaven, sessies en demografische gegevens en evenementen te bekijken.

Waarom Google Analytics inschakelen?

Begrijp uw webverkeer om betere beslissingen te nemen.

Begrijp en verbeter de verkooptrechter.

Leer van experimenteren (bijvoorbeeld a/b-tests).

Google heeft een andere oplossing genaamd Google Optimize. Deze oplossing is gemaakt om te testen.


Voor wie is Google Analytics bedoeld?

Google Analytics is handig voor iedereen die een website heeft.

Het geeft u informatie over wie uw site gebruikt en hoe ze ermee omgaan.

Bovendien is de interface gemakkelijk te begrijpen.

U hebt geen analytische achtergrond nodig om de service te gebruiken en te navigeren.


Stap voor stap Google Analytics instellen

Google Analytics kan op twee manieren worden ingesteld: de Global Website Tag (gtag.js) of Google Tag Manager .

De eenvoudigste manier is om The Global Website Tag te gebruiken.

In deze zelfstudie wordt de methode The Global Website Tag gebruikt.


Voorbereidende werkzaamheden

Bepaal welke code-editor u wilt gebruiken en stel uw omgeving in.

W3Schools heeft een gebruiksvriendelijke code-editor gemaakt met de naam W3Schools Spaces . Meld u aan en ga met een paar klikken aan de slag.

Begin gratis ❯

Maak uw index.html -bestand zodat u klaar bent om de code in te voeren.

Alle instellingen. Laten we gaan!


Google Analytics instellen: de wereldwijde websitetag


Stap 1: Maak een Google Analytics-account aan

Ga naar Analytics: Maak een account aan of log in op Analytics

De link in de bovenstaande paragraaf brengt u naar de Google Analytics-bestemmingspagina.

Klik op de knop "Gratis starten".

bestemmingspagina

Stap 2: Ga naar de welkomstpagina

Na het aanmaken van een account of inloggen, wordt u welkom geheten bij de oplossing.

Druk op de knop "Start meten" om verder te gaan.

Welkomstpagina

Stap 3: Account instellen

U moet hier twee beslissingen nemen.

  1. Voer uw accountnaam in.
  2. Bepaal welke gegevens u wilt delen.
  3. Klik op de knop "Volgende".

Eén account kan meer dan één tracking-ID hebben. U kunt meer dan één website volgen met een account.

Overzicht accountconfiguratie

Stap 4: Eigenschap instellen

Property is de dienst die je meet, zoals een website, applicatie, link tree, etc.

  1. Voer een eigenschapsnaam in.
  2. Vul uw tijdzone in.
  3. Voer de valuta in die u gebruikt.
  4. Klik op de knop "Volgende".
Overzicht van eigendomsinstellingen

Stap 5: Bedrijfsinformatie toevoegen

Analytics gebruikt de informatie om uw ervaring aan te passen.

  1. Selecteer uw branchecategorie.
  2. Selecteer bedrijfsgrootte.
  3. Tick the boxes for how you are planning to use Analytics.
  4. Click the "Create" button to proceed.
Bedrijfsinformatie details

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.

Overzicht algemene voorwaarden

Step 7: Email subscriptions

  1. Tick or uncheck all boxes.
  2. Click the "Save" button to continue.
Overzicht e-mailcommunicatie

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.

Selecteer platformoverzicht

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.

    Overzicht van gegevensstroominstellingen

    Step 10: Web stream overview

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

    Overzicht webstreamdetails

    Here are the key takeaways from the overview.

    1. Stream URL.

    The Stream URL is the link to the connected site.

    stream-URL

    2. Measurement ID

    The Measurement ID is the identifier for your data stream.

    It has a format of G-XXXXXXX.

    meting ID:

    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.

    instructies voor taggen

    Step 11: Global site tag (gtag.js)

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

    Algemene sitetag

    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.

    Codefragment toevoegen

    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