КАК

Как домой

Меню

Панель значков Значок меню Аккордеон Вкладки Вертикальные вкладки Заголовки вкладок Вкладки на всю страницу Вкладки при наведении Верхняя навигация Отзывчивый Topnav Панель навигации с иконками Меню поиска Панель поиска Фиксированная боковая панель Навигация по страницам Адаптивная боковая панель Полноэкранная навигация Меню вне холста Кнопки Hover Sidenav Боковая панель с иконками Горизонтальное меню прокрутки Вертикальное меню Нижняя навигация Отзывчивая нижняя навигация Навигационные ссылки на нижней границе Ссылки меню с выравниванием по правому краю Ссылка на меню по центру Ссылки меню одинаковой ширины Фиксированное меню Полоса слайда вниз при прокрутке Скрыть панель навигации при прокрутке Уменьшить панель навигации при прокрутке Липкая панель навигации Панель навигации на изображении Выпадающие списки при наведении Нажмите «Раскрывающиеся списки». Каскадное выпадающее меню Выпадающий список в Topnav Выпадающий список в Сиденаве Выпадающий список Resp Navbar Меню поднавигации Выпадающий Мега Меню Мобильное меню Меню штор Свернутая боковая панель Свернутая боковая панель Пагинация Панировочные сухари Группа кнопок Вертикальная группа кнопок Липкая социальная панель Навигация по таблеткам Адаптивный заголовок

Картинки

Слайд-шоу Галерея слайд-шоу Модальные изображения Лайтбокс Адаптивная сетка изображений Сетка изображений Галерея вкладок Наложение изображения Слайд с наложенным изображением Масштаб наложения изображения Заголовок наложения изображения Значок наложения изображения Эффекты изображения Черно-белое изображение Текст изображения Текстовые блоки изображения Прозрачный текст изображения Полное изображение страницы Форма на изображении Изображение героя Размытие фонового изображения Изменить Bg при прокрутке Параллельные изображения Округлые изображения Изображения аватара Адаптивные изображения Центрировать изображения Миниатюры Граница вокруг изображения Встретить команду Прилипшее изображение Перевернуть изображение Встряхнуть изображение Портфолио Галерея Портфолио с фильтрацией Увеличение изображения Стекло лупы изображения Ползунок сравнения изображений Фавикон

Кнопки

Кнопки оповещения Кнопки контура Кнопки разделения Анимированные кнопки Затухающие кнопки Кнопка на изображении Кнопки социальных сетей Читать дальше Читать меньше Кнопки загрузки Кнопки загрузки Кнопки таблетки Кнопка уведомления Кнопки со значками Кнопки «Следующая/предыдущая» Кнопка «Дополнительно» в навигации Кнопки блокировки Текстовые кнопки Круглые кнопки Кнопка прокрутки вверх

Формы

Форма входа Форма регистрации Форма оформления заказа Форма обратной связи Форма входа через социальную сеть Регистрационная форма Форма с иконками Новостная рассылка Сложенная форма Отзывчивая форма Всплывающая форма Встроенная форма Очистить поле ввода Скрыть цифровые стрелки Скопировать текст в буфер обмена Анимированный поиск Кнопка поиска Полноэкранный поиск Поле ввода в панели навигации Форма входа в Navbar Пользовательский флажок/радио Пользовательский выбор Переключить переключатель Установите флажок Обнаружение Caps Lock Кнопка триггера при входе Проверка пароля Переключить видимость пароля Многоступенчатая форма Автозаполнение Отключить автозаполнение Отключить проверку орфографии Кнопка загрузки файла Проверка пустого ввода

Фильтры

Список фильтров Таблица фильтров Фильтрующие элементы Выпадающий список фильтров Сортировать список Таблица заклинаний

Столы

Полосатый стол под зебру Центральные столы Стол во всю ширину Параллельные столы Адаптивные таблицы Сравнительная таблица

Более

Полноэкранное видео Модальные коробки Удалить модальное Лента новостей Индикатор прокрутки Индикаторы прогресса Панель навыков Ползунки диапазона Подсказки Отображение элемента при наведении Всплывающие окна Складной Календарь HTML включает Список дел Погрузчики Звездный рейтинг Рейтинг пользователей Эффект наложения Контактные чипы Открытки Флип-карта Карточка профиля Карточка товара Оповещения Вызывать Примечания Этикетки Круги Стиль HR Купон Группа списка Список без маркеров Отзывчивый текст Вырезанный текст Светящийся текст Фиксированный нижний колонтитул Липкий элемент Равная высота Клирфикс Отзывчивые поплавки Закусочная Полноэкранное окно Прокрутка рисования Гладкая прокрутка Градиентная прокрутка Bg Липкий заголовок Уменьшить заголовок при прокрутке Таблица цен Параллакс Соотношение сторон Отзывчивые фреймы Переключить Нравится/Не нравится Переключить скрыть/показать Переключить темный режим Переключить текст Переключить класс Добавить класс Удалить класс Активный класс В виде дерева Удалить свойство Автономное обнаружение Найти скрытый элемент Перенаправить веб-страницу Увеличить при наведении Флип-бокс Центрировать по вертикали Центральная кнопка в DIV Переход при наведении Стрелки Формы Ссылка для скачивания Полноразмерный элемент Окно браузера Пользовательская полоса прокрутки Скрыть полосу прокрутки Показать/принудительно включить полосу прокрутки Внешний вид устройства Редактируемая граница Цвет заполнителя Цвет выделения текста Цвет пули Вертикальная линия Разделители Анимированные иконки Таймер обратного отсчета Печатная машинка Страница скоро появится Сообщения чата Всплывающее окно чата Разделенный экран Отзывы Счетчик секций Слайд-шоу цитат Закрываемые элементы списка Типичные точки останова устройства Перетаскиваемый элемент HTML Медиа-запросы JS Подсветка синтаксиса JS-анимации Длина строки JS JS Возведение в степень Параметры JS по умолчанию Получить текущий URL-адрес Получить текущий размер экрана Получить элементы iframe

Веб-сайт

Создать бесплатный веб-сайт Сделать сайт Сделать статический сайт Сделать сайт (W3.CSS) Сделать веб-сайт (BS3) Сделать веб-сайт (BS4) Сделать веб-сайт (BS5) Создание и просмотр веб-сайта Создайте сайт с деревом ссылок Создать портфолио Создать резюме Сделать сайт ресторана Сделать бизнес-сайт Сделать веб-книгу Веб-сайт центра Контактная информация О странице Большой заголовок Пример веб-сайта

Сетка

2 столбца 3 столбца 4 столбца Расширяющаяся сетка Представление списка в виде сетки Смешанная компоновка столбцов Карты столбцов Схема «зигзаг» Макет блога

Google

Google диаграммы Гугл шрифты Сочетания шрифтов Google Гугл настроить аналитику

Преобразователи

Преобразовать вес Преобразование температуры Преобразование длины Преобразование скорости

Блог

Получить работу разработчика Станьте фронтенд-разработчиком.

Как настроить Google Analytics

Google Analytics используется для просмотра и понимания веб-трафика.

Он бесплатный и простой в использовании.

Вы можете настроить его для многих случаев использования.

Он работает из коробки.

Это быстро настроить. Получите ваши идеи сегодня!

Создайте мой бесплатный сайт ❯

Пропустите чтение о Google Analytics. Подведите меня прямо к первому шагу. Перейти к первому шагу

Что такое Google Аналитика

Google Analytics — это решение для веб-аналитики.

Он разработан и поддерживается Google.

Самая новая версия называется Google Analytics 4.

Его можно использовать для просмотра таких данных, как аудитория, просмотры страниц, сеансы, демография и события.

Зачем включать Google Analytics

Понимайте свой веб-трафик, чтобы принимать лучшие решения.

Понимание и улучшение воронки продаж.

Учитесь на экспериментах (например, с помощью A/B-тестов).

У Google есть еще одно решение под названием Google Optimize. Это решение сделано для тестирования.


Для кого предназначена Google Analytics

Google Analytics полезен для всех, у кого есть веб-сайт.

Он дает вам информацию о том, кто использует ваш сайт и как они взаимодействуют с ним.

Кроме того, интерфейс прост для понимания.

Вам не нужен опыт работы с аналитикой, чтобы пользоваться сервисом и ориентироваться в нем.


Как настроить Google Analytics шаг за шагом

Google Analytics можно настроить двумя способами : глобальный тег веб-сайта (gtag.js) или диспетчер тегов Google .

Самый простой способ — использовать глобальный тег веб-сайта.

В этом руководстве будет использоваться подход The ​​Global Website Tag.


Подготовка

Решите, какой редактор кода использовать, и настройте среду.

W3Schools создала простой в использовании редактор кода под названием W3Schools Spaces . Зарегистрируйтесь и начните в несколько кликов.

Начните бесплатно ❯

Создайте файл index.html , чтобы вы были готовы ввести код.

Все настройки. Пойдем!


Настройка Google Analytics: глобальный тег веб-сайта


Шаг 1. Создайте учетную запись Google Analytics.

Перейти к Analytics: Создайте учетную запись или войдите в Analytics

Ссылка в абзаце выше ведет на целевую страницу Google Analytics.

Нажмите кнопку «Начать бесплатно».

целевая страница

Шаг 2: Войдите на страницу приветствия

После создания учетной записи или входа в систему вас приветствует решение.

Нажмите кнопку «Начать измерение», чтобы продолжить.

Приветственная страница

Шаг 3: Настройка учетной записи

У вас есть два решения, чтобы принять здесь.

  1. Введите имя вашей учетной записи.
  2. Решите, какими данными вы хотите поделиться.
  3. Нажмите кнопку «Далее».

Одна учетная запись может иметь более одного идентификатора отслеживания. Вы можете отслеживать более одного веб-сайта с помощью учетной записи.

Обзор настройки учетной записи

Шаг 4: Настройка свойства

Ресурс — это услуга, которую вы измеряете, например веб-сайт, приложение, дерево ссылок и т. д.

  1. Введите имя свойства.
  2. Введите свой часовой пояс.
  3. Введите валюту, которую вы используете.
  4. Нажмите кнопку «Далее».
Обзор настройки свойства

Шаг 5. Добавьте информацию о компании

Аналитика использует информацию, чтобы адаптировать ваш опыт.

  1. Выберите категорию вашей отрасли.
  2. Выберите размер бизнеса.
  3. Tick the boxes for how you are planning to use Analytics.
  4. Click the "Create" button to proceed.
Информация о бизнесе

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.

Обзор условий и положений

Step 7: Email subscriptions

  1. Tick or uncheck all boxes.
  2. Click the "Save" button to continue.
Обзор электронной почты

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.

Выберите обзор платформы

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.

    Обзор настройки потока данных

    Step 10: Web stream overview

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

    Обзор подробностей веб-потока

    Here are the key takeaways from the overview.

    1. Stream URL.

    The Stream URL is the link to the connected site.

    URL потока

    2. Measurement ID

    The Measurement ID is the identifier for your data stream.

    It has a format of G-XXXXXXX.

    идентификатор измерения

    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.

    инструкции по маркировке

    Step 11: Global site tag (gtag.js)

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

    Глобальный тег сайта

    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.

    Добавить фрагмент кода

    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