Page Visibility API и побочный эффект предотрисовки страниц

    Сперва, небольшой эксперимент


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


    Скорее всего, первым результатом вашей выдачи стал Amazon.com, страницу которого браузер любезно предзагрузил:




    Теперь зайдя на Amazon.com, мы обнаружим кучу сладостей в блоке «Вы смотрели» и «Похожие продукты»:



    Да, Amazon посчитал, что это пользователь зашёл на страницу продукта и стал показывать подходящие рекомендации. «Беспокоящиеся» могут писать об утечке данных о поиска, но меня больше волнует веб-аналитика и разработка.

    Выводы для разработчиков


    На мой взгляд, prerender — хорошая штука, но она имеет побочные эффекты, о которых теперь стоит задумываться при разработке проектов.

    Итак, Wireshark показал, что бэкенд не сможет отличить prerender-запрос от обычного, поэтому, как минимум, серверные логи могут считать «мёртвых душ» — посетителей, которым показали сайт первым результатом, но фактического перехода не было. Так как аналитика реализована на бэкенде, то мы получили неожиданные рекомендации, но можно ли решить проблему при помощи фронтенда?

    Да, в Javascript можно использовать Page Visibility API, который подскажет состояние страницы: document.visibilityState = 'prerender'. Таким образом, трекеры и счётчики могут дождаться момента первого явного отображения страницы и, в результате, аналитика и рекомендации вполне корректны.

    Возможно есть и другие решения, которые я буду рад прочесть в комментариях.
    • +10
    • 4,5k
    • 8
    Поделиться публикацией

    Комментарии 8

      +1
      Можно ещё использовать Visibility.js, чтобы не писать много кода по проверке, если ли поддержка Page Visibility API и самому вешать обработчик, пока visibilityState не смениться:

      Visibility.afterPrerendering(function () {
          showRecomendation()
      });
      


      Этот код запустит showRecomendation сразу же, если Page Visibility API не поддерживается или проверит и честно дождётся, то страница уже видимая.
        0
        Да, вполне хорошее решение. Спасибо!

        Может это недопонимание, функция должна называться «trackProductView()» — потому что, проблема в странице продукта.
          +2
          Функция showRecomendation() просто для примера. Кстати, с prerender есть много нюансов — нельзя делать AJAX-запросы и включать видео/музыку. Так что если рекомендации грузились AJAX´ом, то без такого кода prerender выключится.
        0
        Какой-то косяк с первой ссылкой.
        Вот, что мне показывает IE:
          0
          Видимо, IE не понравился эскейпинг в ссылке. Предлагаю просто поискать Hershey's Easter Candy Assortment (Hershey's Kisses, Reese's Miniatures & Hershey's Miniatures), 24-Ounce Bags (Pack of 2) на google.com.
          +2
          Вот и большие результаты Хрома в сервисе статистики Statcounter, который как раз считает просмотры страниц, в отличие от Net Application. Впрочем, про это уже говорили в прошлом году, когда ресурсы обменялись критикой.
            +1
            Прошла через FF17 (параноик mode + собщаем сайтам, что я не хочу, чтобы за мной следили) по указанной гугловой ссылке.
            Зашла в амазон — никаких сладостей не вижу.
            prerender в коде страницы гугла тоже нет.
              0
              Проверил, да, в файрфокс гугл не предзагружает страницы.
              Или доверяет только своему браузеру, или хочет показать с Chrome поиск быстрее, или не хочет увеличивать долю иных браузеров.

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

            Самое читаемое