Оптимальное размещение кода Google Analytics на WordPress

Пройдите тест, узнайте какой профессии подходите

Я предпочитаю

Работать самостоятельно и не зависеть от других

Работать в команде и рассчитывать на помощь коллег

Организовывать и контролировать процесс работы

Быстрый ответ

Для достижения максимальной эффективности и повышения производительности, код Google Analytics (GA) стоит вставлять перед закрывающим тегом </head>, воспользовавшись атрибутом async. Здесь «ВАШ_GA_ID» следует заменить на ваш персональный идентификатор:

HTML

Скопировать код

<head>
  <!-- ... -->
  
  <script async src="https://www.googletagmanager.com/gtag/js?id=ВАШ_GA_ID"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){ dataLayer.push(arguments); }
    gtag('js', new Date());
    gtag('config', 'ВАШ_GA_ID');
  </script>
  
  <!-- ... -->
</head>

Кинга Идем в IT: пошаговый план для смены профессии

Принципы асинхронной загрузки

При использовании атрибута async, парсинг страницы продолжается, не тормозя при этом процесс загрузки страницы, даже во время асинхронной загрузки скрипта Google Analytics.

Почему мы выбираем часть head, а не footer

Наиболее предпочтительным местом для размещения скриптов analytics.js или gtag.js является <head>. Это позволит скрипту трекать события, происходящие даже при частичной загрузке страницы.

Загрузка и выполнение: установим приоритеты

Атрибут async позволяет загружать скрипт асинхронно. Это обеспечивает возможность пользователю активно взаимодействовать со страницей без задержек и гарантирует надежное отслеживание данных.

Визуализация

Если представить ваш сайт в образе театра, то получится следующее:

Markdown

Скопировать код

Театральная сцена (🎭): Ваш сайт
Занавес (🔻): Секция Head
Зрители (👥): Конечная часть секции Body

Секция Head — начало:

Markdown

Скопировать код

🔻🎭: Реакция и достижение цели происходят до того, как начинается основное действо.

Конечная часть секции Body — главные события:

Markdown

Скопировать код

👥🎭: Полное взаимодействие, когда все элементы на своих местах, и внимание зрителей полностью сконцентрировано на спектакле.

Бонус кэширования

analytics.js часто загружается из кэша, что способствует уменьшению времени загрузки и улучшению пользовательского опыта.

Найти баланс между точностью и скоростью

Выбирая место для размещения кода Google Analytics в HTML, постарайтесь найти золотую середину между точностью отслеживания данных и временем загрузки страницы.

Использование отложенной загрузки через getScript

Для еще более эффективной оптимизации времени загрузки вы можете использовать отложенную загрузку с помощью jQuery getScript. Однако следите за тем, чтобы это не влияло на корректное отслеживание данных:

Скопировать код

$(document).ready(function() {
  $.getScript("https://www.googletagmanager.com/gtag/js?id=ВАШ_GA_ID", function() {
    window.dataLayer = window.dataLayer || [];
    function gtag(){ dataLayer.push(arguments); }
    gtag('js', new Date());
    gtag('config', 'ВАШ_GA_ID');
  });
});

Не забывайте заменять ВАШ_GA_ID на ваш действующий идентификатор отслеживания.

Полезные материалы

Официальное руководство по настройке Google Analytics.
Рекомендации по внедрению analytics.js на ваши сайты.
Инструкции по переходу с analytics.js на gtag.js от Google.
Руководство по установке и конфигурации Google Tag Manager.
Google Tag Assistant — эффективный инструмент для решения проблем с тегами Google.
Статистика времени загрузки страниц — одна из ключевых составляющих пользовательского опыта.
Учебная программа Google Analytics для максимально эффективного использования Google Tag Manager.
Новейшие обсуждения на Stack Overflow касательно Google Analytics.

Свежие материалы

Как выбрать инструменты для тестирования сайтов

6 сентября 2024

Видео уроки по веб-разработке

6 сентября 2024

Проверка юзабилити сайта: пошаговое руководство

6 сентября 2024