Как добавить Яндекс.метрику и не «потерять» скорость


Данное руководство поможет вам добавить счётчик Яндекс.Метрика, и не получить снижения баллов в тестах Google Page Speed. А также добавить другие ресурсоёмкие скрипты на страницу, не «потеряв» баллы Google, например скрипт чата Jivo.

Внимание!
Прежде чем воспользоваться данным руководством прочтите о побочном эффекте!

Побочный эффект

Суть данного метода добавления скриптов – в отсрочке их загрузки. 
Пока посетитель не начнёт скроллить страницу, скрипты не загрузятся. 

Из-за этого часть аналитики может потеряться – вы не увидите заходов с мгновенными отказами и тех визитов, в которых не была проскроллена страница. 

Так или иначе, чтобы получить высокие показатели скорости в 2020 году, приходится идти на компромиссы – либо низкая скорость, но вы видите абсолютно всю аналитику, либо показатели скорости выше, но «нулевая» аналитика отсеивается. 

Если вас устраивает такой метод, то переходим к действиям! 

Добавление блока

Если вы никогда не слышали, что такое блоки приложения Сайт, то сначала прочтите руководство Для чего нужны блоки и где их создавать, а затем возвращайтесь к этому.

Если вы уже знакомы с блоками, то пройдите в приложение Сайт и создайте блок speed.scripts_timeout (в следующих обновлениях тем Super, Sexy, Prestige, Special, Handmade этот блок будет добавлен и в них. В таком случае название блока будет выглядет как id вашей темы + .scripts_timeout, например super.scripts_timeout или handmade.scripts_timeout). 

Literal

С целью предупреждения возникновения ошибок, оберните содержимое блока тегами {literal} {/literal}.

Затем откройте настройки вашей метрики и найдите поле, откуда вы копируете код.
Скопируйте код ТОЛЬКО между тегами <script>, выделенный на скриншоте.

И вставьте его между тегами {literal} {/literal} в блоке.

Метрика вставлена и будет работать! 
Но в списке счётчиков, статус метрики будет красным.

Чтобы это исправить создайте ещё один блок speed.index_scripts (описание блока).
И добавьте ту часть кода метрики, которая идёт внутри тегов <noscript><div>.

Счётчик установлен! 

Бонус! Jivo!

Скрипты Jivo-чата тоже неплохо тормозят загрузку сайта.
Плюс к этому бытует мнение, что если чат виден сразу, то человек к нему привыкает и уже им не пользуется.
В варианте с отсрочкой запуска, посетитель при загрузке сайта не видит чата. Увидит он его только после начала прокрутки страницы. При этом появление виджета чата может привлечь его внимание и он может воспользоваться виджетом. 

Чтобы добавить виджет Jivo-чата на сайт, скопируйте этот код:

$.getScript( "//code.jivosite.com/widget/xxxxxxxxxxx" );

И вставьте его сразу после кода метрики, между тегами {literal} в блок speed.scripts_timeout.
Замените xxxxxxxxxxx на id своего счётчика и не забудьте убрать подключение jivo чата в других местах, если вы подключали его ранее.

4 ответа
  • Якубов Андрей
    19 декабря 2020 08:41

    Я правильно понял, что надо сделать то что Вы указали и удалить Код счетчика в Настройки сайта-Дополнительный JavaScript-код для вставки перед закрывающим тегом </head> ?

    Эта настройка будут работать с старых темах, например "Формула успеха" ?

    • Сергеев Владимир
      Разработчик
      Решение
      19 декабря 2020 19:01

      Здравствуйте, Андрей! 

      Я правильно понял, что надо сделать то что Вы указали и удалить Код счетчика в Настройки сайта-Дополнительный JavaScript-код для вставки перед закрывающим тегом </head> ?

      Да, всё верно. Счёчткик их <head> нужно удалить. 

      Эта настройка будут работать с старых темах, например "Формула успеха" ?

      Нет. На данный момент этот блок доступен только в теме Speed.
      В следующих обновлениях он будет доступен в темах: 

      • Super
      • Sexy
      • Prestige
      • Special
      • Hand Made
      • Александр
        Решение
        4 февраля 2021 12:58

        Добрый день! Есть ли понимание,когда будет обновление для тем 

        • Super
        • Sexy
        • Prestige
        • Special
        • Hand Made

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

        блок speed.scripts_timeout.?

        • Сергеев Владимир
          Разработчик
          Решение
          4 февраля 2021 14:22

          Обновления уже на проверке модераторами. 
          Вот-вот должно выйти. 

          Для соответствующей темы свой прификс. 
          Если у вас тема Super, то блок будет называться super.scripts_timeout.
          Для Sexy – sexy.scripts_timeout. И так далее. 

  • Роман
    Решение
    9 февраля 2021 15:11

    А по Google Analytics (gtag.js) как также провернуть всё это?

  • Виталий
    Решение
    23 февраля 2021 14:48

    День добрый. В блоке использовать только теги литериал? теги script не использовать? Просто на странице метрика также выводится без тегов script.  В блоке уже есть код, который между {strip} и script. Добавлять между {strip}? 

    • Сергеев Владимир
      Разработчик
      Решение
      24 февраля 2021 12:51

      Здравствуйте!

      В блоке использовать только теги литериал? теги script не использовать?

      Да, всё что находится между тегом script вставить внутрь тега {literal}.

  • Виталий
    Решение
    30 марта 2021 09:25

    День добрый, Подскажите, а чат-телеграмм, возможно так отложить? Не получается сделать. Код (между скрипт):

    var __REPLAIN_ = 'ХХХХХХХХХХХХХХХХХ';
    (function(u){var s=document.createElement('script');s.type='text/javascript';s.async=true;s.src=u;
    var x=document.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);
    })('https://widget.replain.cc/dist/client.js');


    • Сергеев Владимир
      Разработчик
      Решение
      30 марта 2021 10:44

      Здравствуйте, Виталий! 

      У меня всё получилось. 
      Только бот мне предложил немного другой код:

      window.replainSettings = { id: 'XXXXXXXXXXXXXXXXXX' };
      (function(u){var s=document.createElement('script');s.type='text/javascript';s.async=true;s.src=u;
      var x=document.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);
      })('https://widget.replain.cc/dist/client.js');

      Вот как выглядит мой блок speed.scripts_timeout

      Результат: 

      Кстати, отличная штука этот replain.cc! Спасибо!  

Добавить ответ
Чтобы добавить комментарий, зарегистрируйтесь или войдите
Мы получаем и обрабатываем персональные данные посетителей нашего сайта в соответствии с официальной политикой.
Если Вы продолжите использовать сайт, мы будем считать, что Вас это устраивает.
Подписывайтесь и получайте скидки!

Узнавайте первым о скидках и специальных предложениях!