Google Analytics и отслеживание

Для интеграции fullPage.js необходимо подключить библиотеку через <script> и стили через <link> в HTML или импортировать их в проект с использованием модулей ES6:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.1.4/fullpage.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.1.4/fullpage.min.js"></script>

Инициализация происходит через конструктор new fullpage() с передачей селектора контейнера и объекта настроек:

new fullpage('#fullpage', {
    autoScrolling: true,
    navigation: true,
    anchors: ['section1', 'section2', 'section3'],
    onLeave: function(origin, destination, direction){
        // Место для аналитики
    }
});

Ключевым моментом является использование событий onLeave, afterLoad и afterRender для отслеживания действий пользователя.

Настройка отслеживания просмотров секций

Для Google Analytics важно фиксировать просмотры секций как отдельные страницы. В Universal Analytics это делалось через ga('send', 'pageview', path), в GA4 — через gtag('event', 'page_view', {page_path: path}).

Пример интеграции с onLeave:

onLeave: function(origin, destination, direction){
    const path = '/' + destination.anchor;
    gtag('event', 'page_view', {
        page_path: path
    });
}
  • origin — объект секции, с которой уходит пользователь.
  • destination — объект секции, в которую пользователь переходит.
  • direction — направление скролла (up или down).

Использование destination.anchor позволяет задавать уникальный page_path для каждой секции, что критично для корректной аналитики.

Отслеживание кликов и взаимодействий

fullPage.js поддерживает кастомные события, которые можно использовать для трекинга кликов на кнопки, слайды или навигационные элементы.

Пример отслеживания клика на кнопку «Подробнее» внутри секции:

document.querySelectorAll('.section .btn-detail').forEach(btn => {
    btn.addEventListener('click', () => {
        gtag('event', 'button_click', {
            event_category: 'section_interaction',
            event_label: 'Подробнее'
        });
    });
});

Рекомендации по структурированию событий GA4:

  • event_category — тип действия (навигация, клик, просмотр).
  • event_label — текстовая идентификация элемента или секции.
  • Можно добавлять value для числовых показателей.

Отслеживание слайдов и горизонтального скролла

fullPage.js поддерживает горизонтальные слайды внутри секций. Для отслеживания переходов между слайдами используется событие afterSlideLoad:

afterSlideLoad: function(section, origin, destination, direction){
    const slidePath = '/' + section.anchor + '/' + destination.anchor;
    gtag('event', 'page_view', {
        page_path: slidePath
    });
}

Такой подход позволяет GA фиксировать не только вертикальные секции, но и отдельные слайды, что повышает точность аналитики.

Взаимодействие с ленивой загрузкой и динамическим контентом

Если секции создаются динамически через JavaScript, важно инициализировать события после рендера контента. fullPage.js предоставляет afterRender и afterResize, которые идеально подходят для таких задач:

afterRender: function(){
    // Привязка всех событий отслеживания после полной загрузки секций
    document.querySelectorAll('.track-btn').forEach(btn => {
        btn.addEventListener('click', function(){
            gtag('event', 'dynamic_click', {
                event_category: 'dynamic_content',
                event_label: btn.dataset.label
            });
        });
    });
}

Это гарантирует, что все элементы, появляющиеся динамически, будут корректно отслеживаться в аналитике.

Советы по оптимизации аналитики

  • Использовать anchors для всех секций и слайдов, чтобы уникально идентифицировать каждую точку пути пользователя.
  • Событие onLeave предпочтительнее afterLoad для pageview, так как фиксируется момент покидания секции, что уменьшает дублирование в аналитике.
  • Для GA4 лучше создавать кастомные события с параметром page_path, вместо стандартного page_view, если требуется granular tracking секций.
  • Следить за производительностью: большое количество addEventListener на каждом элементе может замедлять анимацию, поэтому стоит использовать делегирование.

Пример полной интеграции с fullPage.js и GA4

new fullpage('#fullpage', {
    autoScrolling: true,
    navigation: true,
    anchors: ['home', 'services', 'portfolio', 'contact'],
    onLeave: function(origin, destination, direction){
        gtag('event', 'page_view', { page_path: '/' + destination.anchor });
    },
    afterSlideLoad: function(section, origin, destination, direction){
        gtag('event', 'page_view', { page_path: '/' + section.anchor + '/' + destination.anchor });
    },
    afterRender: function(){
        document.querySelectorAll('.track-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                gtag('event', 'button_click', {
                    event_category: 'interaction',
                    event_label: btn.dataset.label
                });
            });
        });
    }
});

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

Оглавление