WIE MAN

HowTo-Startseite

Menüs

Symbolleiste Menüsymbol Akkordeon Registerkarten Vertikale Registerkarten Tab-Kopfzeilen Ganzseitige Registerkarten Hover-Tabs Top-Navigation Reaktionsschnelles Topnav Navigationsleiste mit Symbolen Suchmenü Suchleiste Feste Seitenleiste Seitennavigation Responsive Seitenleiste Vollbildnavigation Off-Canvas-Menü Bewegen Sie die Sidenav-Schaltflächen Seitenleiste mit Symbolen Horizontales Scroll-Menü Vertikales Menü Untere Navigation Responsive Bottom Nav Navigationslinks für den unteren Rand Rechtsbündige Menülinks Zentrierter Menülink Menülinks mit gleicher Breite Festes Menü Schieben Sie die Leiste beim Scrollen nach unten Navigationsleiste beim Scrollen ausblenden Navbar beim Scrollen verkleinern Klebrige Navigationsleiste Navigationsleiste auf Bild Hover-Dropdowns Klicken Sie auf Dropdowns Kaskadierendes Dropdown Dropdown in Topnav Dropdown im Sidenav Antwort Navbar Dropdown Subnavigationsmenü Herunterfallen Mega-Menü Mobiles Menü Vorhang-Menü Eingeklappte Seitenleiste Eingeklapptes Seitenpanel Seitennummerierung Semmelbrösel Schaltflächengruppe Vertikale Schaltflächengruppe Klebrige soziale Leiste Pille-Navigation Responsive Kopfzeile

Bilder

Diashow Diashow-Galerie Modale Bilder Leuchtkasten Responsives Bildraster Bildraster Tab-Galerie Bildüberlagerung verblassen Bildüberlagerungsfolie Bild-Overlay-Zoom Bild-Overlay-Titel Bildüberlagerungssymbol Bildeffekte Schwarz-Weiß-Bild Bildtext Bildtextblöcke Transparenter Bildtext Ganzseitiges Bild Form auf Bild Heldenbild Hintergrundbild verwischen Ändern Sie Bg auf Scroll Side-by-Side-Bilder Abgerundete Bilder Avatar-Bilder Responsive Bilder Bilder zentrieren Miniaturansichten Rand um das Bild Triff das Team Klebriges Bild Spiegeln Sie ein Bild Schütteln Sie ein Bild Portfolio-Galerie Portfolio mit Filterung Bildzoom Bildlupenglas Schieberegler für den Bildvergleich Favicon

Tasten

Alarmschaltflächen Gliederungsschaltflächen Geteilte Schaltflächen Animierte Schaltflächen Verblassende Schaltflächen Schaltfläche auf Bild Schaltflächen für soziale Medien Mehr lesen Weniger lesen Schaltflächen laden Schaltflächen herunterladen Pille-Knöpfe Benachrichtigungsschaltfläche Symbolschaltflächen Weiter/Zurück-Schaltflächen Schaltfläche "Mehr" im Navi Schaltflächen blockieren Textschaltflächen Runde Knöpfe Schaltfläche „Nach oben scrollen“.

Formen

Login Formular Anmeldeformular Checkout-Formular Kontakt Formular Social Login-Formular Anmeldeformular Formular mit Symbolen Newsletter Gestapeltes Formular Responsives Formular Popup-Formular Inline-Formular Eingabefeld löschen Zahlenpfeile ausblenden Text in die Zwischenablage kopieren Animierte Suche Schaltfläche „Suchen“. Vollbildsuche Eingabefeld in der Navigationsleiste Anmeldeformular in Navbar Benutzerdefiniertes Kontrollkästchen/Radio Benutzerdefinierte Auswahl Kippschalter Kontrollkästchen aktivieren Feststelltaste erkennen Auslösetaste bei Enter Passwort-Validierung Kennwortsichtbarkeit umschalten Mehrstufiges Formular Automatische Vervollständigung Deaktivieren Sie die automatische Vervollständigung Deaktivieren Sie die Rechtschreibprüfung Datei-Upload-Schaltfläche Leere Eingabevalidierung

Filter

Liste filtern Filtertabelle Filterelemente Filter-Dropdown Sortierliste Zaubertabelle

Tische

Zebra gestreifter Tisch Tische in der Mitte Tisch in voller Breite Side-by-Side-Tabellen Responsive Tabellen Vergleichstabelle

Mehr

Vollbildvideo Modale Boxen Modal löschen Zeitleiste Scroll-Anzeige Fortschrittsbalken Fertigkeitsleiste Range-Schieberegler Kurzinfos Schweben des Anzeigeelements Popups Zusammenklappbar Kalender HTML enthält Aufgabenliste Lader Bewertung in Sternen Benutzer-Bewertung Overlay-Effekt Wenden Sie sich an Chips Karten Klappkarte Profilkarte Produktkarte Warnungen Aufbieten, ausrufen, zurufen Anmerkungen Etiketten Kreise Stil HR Coupon Gruppe auflisten Liste ohne Aufzählungszeichen Responsiver Text Ausgeschnittener Text Leuchtender Text Feste Fußzeile Klebriges Element Gleiche Höhe Klarfix Reaktionsschnelle Schwimmer Imbissbude Vollbildfenster Scroll-Zeichnung Glatte Schriftrolle Bg-Scroll mit Farbverlauf Klebrige Kopfzeile Header beim Scrollen verkleinern Preistabelle Parallaxe Seitenverhältnis Responsive Iframes Schalten Sie „Gefällt mir“/„Gefällt mir nicht“ um Schalten Sie Ausblenden/Anzeigen um Schalten Sie den Dunkelmodus um Text umschalten Klasse umschalten Klasse hinzufügen Klasse entfernen Aktive Klasse Baumsicht Eigentum entfernen Offline-Erkennung Verstecktes Element finden Webseite umleiten Zoom-Hover Flip-Box Vertikal zentrieren Mittlere Taste in DIV Übergang beim Schweben Pfeile Formen Download-Link Element in voller Höhe Browser Fenster Benutzerdefinierte Bildlaufleiste Bildlaufleiste ausblenden Bildlaufleiste anzeigen/erzwingen Geräte-Look Inhaltlich editierbare Grenze Platzhalterfarbe Textauswahlfarbe Geschossfarbe Vertikale Linie Teiler Symbole animieren Countdown-Timer Schreibmaschine Demnächst Seite Chat-Nachrichten Popup-Chat-Fenster Geteilter Bildschirm Referenzen Abschnittszähler Zitate Diashow Schließbare Listenelemente Typische Geräte-Haltepunkte Ziehbares HTML-Element JS-Medienabfragen Syntax-Highlighter JS-Animationen Länge der JS-Zeichenfolge JS Potenzierung JS-Standardparameter Holen Sie sich die aktuelle URL Holen Sie sich die aktuelle Bildschirmgröße Holen Sie sich Iframe-Elemente

Webseite

Erstellen Sie eine kostenlose Website Machen Sie eine Webseite Erstellen Sie eine statische Website Eine Website erstellen (W3.CSS) Erstellen Sie eine Website (BS3) Erstellen Sie eine Website (BS4) Eine Website erstellen (BS5) Erstellen und Anzeigen einer Website Erstellen Sie eine Link-Tree-Website Erstellen Sie ein Portfolio Erstellen Sie einen Lebenslauf Erstellen Sie eine Restaurant-Website Machen Sie eine Business-Website Erstellen Sie ein WebBook Center-Website Kontaktbereich Über Seite Großer Kopf Beispiel-Website

Netz

2-Spalten-Layout 3-Spalten-Layout 4-Spalten-Layout Erweiterndes Raster Rasteransicht auflisten Gemischtes Spaltenlayout Säulenkarten Zick-Zack-Layout Blog-Layout

Google

Google-Diagramme Google-Schriftarten Google Font-Paarungen Google Analytics einrichten

Konverter

Gewicht umrechnen Temperatur umrechnen Länge umrechnen Geschwindigkeit konvertieren

Bloggen

Holen Sie sich einen Entwicklerjob Werden Sie ein Front-End-Entwickler.

So richten Sie Google Analytics ein

Google Analytics wird verwendet, um den Webverkehr anzuzeigen und zu verstehen.

Es ist kostenlos und einfach zu bedienen.

Sie können es für viele Anwendungsfälle anpassen.

Es funktioniert out-of-the-box.

Es ist schnell aufgebaut. Holen Sie sich noch heute Ihre Erkenntnisse!

Erstelle meine kostenlose Website ❯

Überspringen Sie das Lesen von Google Analytics. Bring mich direkt zum ersten Schritt. Gehen Sie zum ersten Schritt

Was ist Google Analytics

Google Analytics ist eine Webanalyselösung.

Es wird von Google entwickelt und unterstützt.

Die neueste Version heißt Google Analytics 4.

Es kann verwendet werden, um Daten wie Publikum, Seitenaufrufe, Sitzungen und demografische Daten und Ereignisse anzuzeigen.

Warum Google Analytics aktivieren

Verstehen Sie Ihren Webverkehr, um bessere Entscheidungen zu treffen.

Den Verkaufstrichter verstehen und verbessern.

Lernen Sie durch Experimentieren (z. B. a/b-Tests).

Google hat eine andere Lösung namens Google Optimize. Diese Lösung ist zum Testen gedacht.


Für wen ist Google Analytics?

Google Analytics ist für jeden nützlich, der eine Website hat.

Es gibt Ihnen Informationen darüber, wer Ihre Website nutzt und wie sie damit interagieren.

Darüber hinaus ist die Benutzeroberfläche leicht verständlich.

Sie benötigen keinen analytischen Hintergrund, um den Dienst zu nutzen und darin zu navigieren.


So richten Sie Google Analytics Schritt für Schritt ein

Google Analytics kann auf zwei Arten eingerichtet werden : Das Global Website Tag (gtag.js) oder Google Tag Manager .

Am einfachsten ist es, das Global Website Tag zu verwenden.

In diesem Tutorial wird der Ansatz von The Global Website Tag verwendet.


Vorbereitungen

Entscheiden Sie, welchen Code-Editor Sie verwenden möchten, und richten Sie Ihre Umgebung ein.

W3Schools hat einen benutzerfreundlichen Code-Editor namens W3Schools Spaces erstellt . Melden Sie sich an und legen Sie mit wenigen Klicks los.

Kostenlos starten ❯

Erstellen Sie Ihre index.html -Datei, damit Sie bereit sind, den Code einzugeben.

Alle Einstellungen. Lass uns gehen!


Richten Sie Google Analytics: Das globale Website-Tag ein


Schritt 1: Erstellen Sie ein Google Analytics-Konto

Gehen Sie zu Analytics: Erstellen Sie ein Konto oder melden Sie sich bei Analytics an

Der Link im obigen Absatz führt Sie zur Landingpage von Google Analytics.

Klicken Sie auf die Schaltfläche "Kostenlos starten".

Zielseite

Schritt 2: Geben Sie die Willkommensseite ein

Nachdem Sie ein Konto erstellt oder sich angemeldet haben, werden Sie bei der Lösung willkommen geheißen.

Drücken Sie die Schaltfläche „Messung starten“, um fortzufahren.

Startseite

Schritt 3: Kontoeinrichtung

Sie haben hier zwei Entscheidungen zu treffen.

  1. Geben Sie Ihren Kontonamen ein.
  2. Entscheiden Sie, welche Daten Sie teilen möchten.
  3. Klicken Sie auf die Schaltfläche "Weiter".

Ein Konto kann mehr als eine Tracking-ID haben. Sie können mehr als eine Website mit einem Konto verfolgen.

Übersicht über die Kontoeinrichtung

Schritt 4: Einrichtung der Eigenschaft

Property ist der Dienst, den Sie messen, wie z. B. eine Website, Anwendung, Linkbaum usw.

  1. Geben Sie einen Eigenschaftsnamen ein.
  2. Geben Sie Ihre Zeitzone ein.
  3. Geben Sie die Währung ein, die Sie verwenden.
  4. Klicken Sie auf die Schaltfläche "Weiter".
Übersicht über die Einrichtung von Eigenschaften

Schritt 5: Fügen Sie Unternehmensinformationen hinzu

Analytics verwendet die Informationen, um Ihre Erfahrung anzupassen.

  1. Wählen Sie Ihre Branchenkategorie aus.
  2. Unternehmensgröße auswählen.
  3. Tick the boxes for how you are planning to use Analytics.
  4. Click the "Create" button to proceed.
Einzelheiten zu Geschäftsinformationen

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.

Allgemeine Geschäftsbedingungen im Überblick

Step 7: Email subscriptions

  1. Tick or uncheck all boxes.
  2. Click the "Save" button to continue.
Überblick über die E-Mail-Kommunikation

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.

Plattformübersicht auswählen

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.

    Übersicht über die Einrichtung des Datenstroms

    Step 10: Web stream overview

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

    Webstream-Details im Überblick

    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.

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

    Markierungsanweisungen

    Step 11: Global site tag (gtag.js)

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

    Allgemeines Website-Tag

    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.

    Codeausschnitt hinzufügen

    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