Не считается время на странице, вебвизор без верстки

[nadam131]

На React SPA проекта с SSR понадобилось подключить Яндекс Метрику. Следовал строго по инструкции.

В App.js сделал импорты:

import { YMInitializer } from 'react-yandex-metrika'
import ym from 'react-yandex-metrika'

В этом же файле добавил хит, при переходе на новый стейт

componentDidUpdate(prevProps) {
        if (prevProps.location !== this.props.location) {
            console.log('hit')
            ym('hit', prevProps.location.pathname)
        }
   }

Отправляю предыдущую страницу, т.к если отправлять текущую, в метрике не сходятся заголовки.

Сам инициализатор кидаю в том же App.js

<ThemeProvider theme={themeDefault}>
    .....            
   <YMInitializer
       accounts={[123456]}
       options={{ webvisor: true }}
       version="2"
     />
    ....
</ThemeProvider>

Итог
Хиты в метрику приходят, но есть несколько проблем:

1. Не считается время проведенное на каждой странице. Общее время выводится только на странице входа.

2. В вебвизоре почему-то каша

[sneerin]

Та же проблема, это вообще реально на SPA получить результаты как у fullstory?

[ralexandr]

Столкнулся с таким же багом. При этом сервис logRocket стили и разметку погружает как надо. Почему метрика не хочет нормально отображать UI - не понятно.
Если кто-то смог решить/обойти эту проблему, дайте знать, пожалуйста

[slavau]

Hi everyone, I have exactly the same problem, webvisor records sessions on my SPA without css styles, only content. Has anyone been able to resolve this issue? Help please, without that yandex metrica does not give much benefits for me. Thanks

[belimposition]

Вебвизор не умеет в CSSOM - его нужно отключить и возможно это поможет увидеть стили на страницах. у меня сейчас такая же проблема с моим next.js + styled-components приложением, пока решения не нашёл

The webvisor doesn't know how to do CSSOM - you need to turn it off and maybe it will help to see the styles on the pages.

[ThemNumbers]

Вебвизор не умеет в CSSOM - его нужно отключить и возможно это поможет увидеть стили на страницах. у меня сейчас такая же проблема с моим next.js + styled-components приложением, пока решения не нашёл

The webvisor doesn't know how to do CSSOM - you need to turn it off and maybe it will help to see the styles on the pages.

Удалось найти решение в итоге?

[irondimk]

Вебвизор не умеет в CSSOM - его нужно отключить и возможно это поможет увидеть стили на страницах. у меня сейчас такая же проблема с моим next.js + styled-components приложением, пока решения не нашёл
The webvisor doesn't know how to do CSSOM - you need to turn it off and maybe it will help to see the styles on the pages.

Удалось найти решение в итоге?

У меня styled-components + React, аналогичная проблема, в том что вебвизор яндекса не отображает стили из-за CSSOM.

Моё решение: обернул проект StyleSheetManager и передал атрибут disableCSSOMInjection. Да, это добавит времени рендеру стилей, но видеть опыт пользователей в вебвизоре приоритетнее.