Tutorials References Exercises Videos NEW Menu
Paid Courses Website NEW

HOW TO

HowTo Home

Menus

Icon Bar Menu Icon Accordion Tabs Vertical Tabs Tab Headers Full Page Tabs Hover Tabs Top Navigation Responsive Topnav Navbar with Icons Search Menu Search Bar Fixed Sidebar Side Navigation Responsive Sidebar Fullscreen Navigation Off-Canvas Menu Hover Sidenav Buttons Sidebar with Icons Horizontal Scroll Menu Vertical Menu Bottom Navigation Responsive Bottom Nav Bottom Border Nav Links Right Aligned Menu Links Centered Menu Link Equal Width Menu Links Fixed Menu Slide Down Bar on Scroll Hide Navbar on Scroll Shrink Navbar on Scroll Sticky Navbar Navbar on Image Hover Dropdowns Click Dropdowns Cascading Dropdown Dropdown in Topnav Dropdown in Sidenav Resp Navbar Dropdown Subnavigation Menu Dropup Mega Menu Mobile Menu Curtain Menu Collapsed Sidebar Collapsed Sidepanel Pagination Breadcrumbs Button Group Vertical Button Group Sticky Social Bar Pill Navigation Responsive Header

Images

Slideshow Slideshow Gallery Modal Images Lightbox Responsive Image Grid Image Grid Tab Gallery Image Overlay Fade Image Overlay Slide Image Overlay Zoom Image Overlay Title Image Overlay Icon Image Effects Black and White Image Image Text Image Text Blocks Transparent Image Text Full Page Image Form on Image Hero Image Blur Background Image Change Bg on Scroll Side-by-Side Images Rounded Images Avatar Images Responsive Images Center Images Thumbnails Border Around Image Meet the Team Sticky Image Flip an Image Shake an Image Portfolio Gallery Portfolio with Filtering Image Zoom Image Magnifier Glass Image Comparison Slider Favicon

Buttons

Alert Buttons Outline Buttons Split Buttons Animated Buttons Fading Buttons Button on Image Social Media Buttons Read More Read Less Loading Buttons Download Buttons Pill Buttons Notification Button Icon Buttons Next/prev Buttons More Button in Nav Block Buttons Text Buttons Round Buttons Scroll To Top Button

Forms

Login Form Signup Form Checkout Form Contact Form Social Login Form Register Form Form with Icons Newsletter Stacked Form Responsive Form Popup Form Inline Form Clear Input Field Hide Number Arrows Copy Text to Clipboard Animated Search Search Button Fullscreen Search Input Field in Navbar Login Form in Navbar Custom Checkbox/Radio Custom Select Toggle Switch Check Checkbox Detect Caps Lock Trigger Button on Enter Password Validation Toggle Password Visibility Multiple Step Form Autocomplete Turn off autocomplete Turn off spellcheck File Upload Button Empty Input Validation

Filters

Filter List Filter Table Filter Elements Filter Dropdown Sort List Sort Table

Tables

Zebra Striped Table Center Tables Full-width Table Side-by-side Tables Responsive Tables Comparison Table

More

Fullscreen Video Modal Boxes Delete Modal Timeline Scroll Indicator Progress Bars Skill Bar Range Sliders Tooltips Display Element Hover Popups Collapsible Calendar HTML Includes To Do List Loaders Star Rating User Rating Overlay Effect Contact Chips Cards Flip Card Profile Card Product Card Alerts Callout Notes Labels Circles Style HR Coupon List Group List Without Bullets Responsive Text Cutout Text Glowing Text Fixed Footer Sticky Element Equal Height Clearfix Responsive Floats Snackbar Fullscreen Window Scroll Drawing Smooth Scroll Gradient Bg Scroll Sticky Header Shrink Header on Scroll Pricing Table Parallax Aspect Ratio Responsive Iframes Toggle Like/Dislike Toggle Hide/Show Toggle Dark Mode Toggle Text Toggle Class Add Class Remove Class Active Class Tree View Remove Property Offline Detection Find Hidden Element Redirect Webpage Zoom Hover Flip Box Center Vertically Center Button in DIV Transition on Hover Arrows Shapes Download Link Full Height Element Browser Window Custom Scrollbar Hide Scrollbar Show/Force Scrollbar Device Look Contenteditable Border Placeholder Color Text Selection Color Bullet Color Vertical Line Dividers Animate Icons Countdown Timer Typewriter Coming Soon Page Chat Messages Popup Chat Window Split Screen Testimonials Section Counter Quotes Slideshow Closable List Items Typical Device Breakpoints Draggable HTML Element JS Media Queries Syntax Highlighter JS Animations JS String Length JS Exponentiation JS Default Parameters Get Current URL Get Current Screen Size Get Iframe Elements

Website

Create a Free Website Make a Website Make a Static Website Make a Website (W3.CSS) Make a Website (BS3) Make a Website (BS4) Make a Website (BS5) Create and View a Website Create a Link Tree Website Create a Portfolio Create a Resume Make a Restaurant Website Make a Business Website Make a WebBook Center Website Contact Section About Page Big Header Example Website

Grid

2 Column Layout 3 Column Layout 4 Column Layout Expanding Grid List Grid View Mixed Column Layout Column Cards Zig Zag Layout Blog Layout

Google

Google Charts Google Fonts Google Font Pairings Google Set up Analytics

Converters

Convert Weight Convert Temperature Convert Length Convert Speed

Blog

Get a Developer Job Become a Front-End Dev.

How to Set Up Google Analytics

Google Analytics is used to view and understand web traffic.

It is free and easy to use.

You can customize it for many use cases.

It works out of the box.

It is fast to set up. Get your insights today!

Create my free website ❯

Skip reading about Google Analytics. Take me directly to the first step. Go to the first step

What is Google Analytics

Google Analytics is a web analytics solution.

It is developed and supported by Google.

The newest version is called Google Analytics 4.

It can be used to view data such as audience, page views, sessions and, demographics, and events.

Why enable Google Analytics

Understand your web traffic to make better decisions.

Understand and improve the sales funnel.

Learn from experimenting (for example, a/b tests).

Google has another solution called Google Optimize. This solution is made for testing.


Who is Google Analytics for

Google Analytics is useful for anyone who has a website.

It gives you information about who uses your site and how they interact with it.

In addition, interface is easy to understand.

You do not need an analytics background to use and navigate the service.


How to set up Google Analytics step-by-step

Google Analytics can be set up in two ways The Global Website Tag (gtag.js) or Google Tag Manager.

The easiest way is to use The Global Website Tag.

This tutorial will use the The Global Website Tag approach.


Preparations

Decide which code editor to use and set up your environment.

W3Schools has created an easy-to-use code editor called W3Schools Spaces. Sign up and get started in a few clicks.

Start for free ❯

Create your index.html file so that you are ready to enter the code.

All setup. Let's go!


Set up Google Analytics: The Global Website Tag


Step 1: Create a Google Analytics account

Go to Analytics: Create an account or sign in to Analytics

The link in the paragraph above takes you to the Google Analytics landing page.

Click the "Start for free" button.

landing page

Step 2: Enter the welcome page

After creating an account or signing in, you are welcomed to the solution.

Press the "Start measuring" button to proceed.

Welcome page

Step 3: Account setup

You have two decisions to make here.

  1. Enter your account name.
  2. Decide what data you want to share.
  3. Click the "Next" button.

One account can have more than one tracking ID. You can track more than one website with an account.

Account setup overview

Step 4: Property setup

Property is the service you measure, such as a website, application, link tree, etc.

  1. Enter a property name.
  2. Enter your time zone.
  3. Enter the currency that you use.
  4. Click the "Next" button.
Property setup overview

Step 5: Add business information

Analytics uses the information to tailor your experience.

  1. Select your industry category.
  2. Select business size.
  3. Tick the boxes for how you are planning to use Analytics.
  4. Click the "Create" button to proceed.
Business information 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.

Terms and conditions overview

Step 7: Email subscriptions

  1. Tick or uncheck all boxes.
  2. Click the "Save" button to continue.
Email communication overview

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.

Select platform overview

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.

    Data stream setup overview

    Step 10: Web stream overview

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

    Web stream details overivew

    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.

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

    tagging instructions

    Step 11: Global site tag (gtag.js)

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

    Global site 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.

    Add code snippet

    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