Как добавить Яндекс.метрику и не «потерять» скорость
Данное руководство поможет вам добавить счётчик Яндекс.Метрика, и не получить снижения баллов в тестах 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 чата в других местах, если вы подключали его ранее.
Я правильно понял, что надо сделать то что Вы указали и удалить Код счетчика в Настройки сайта-Дополнительный JavaScript-код для вставки перед закрывающим тегом </head> ?
Эта настройка будут работать с старых темах, например "Формула успеха" ?
Здравствуйте, Андрей!
Да, всё верно. Счёчткик их <head> нужно удалить.
Нет. На данный момент этот блок доступен только в теме Speed.
В следующих обновлениях он будет доступен в темах:
Добрый день! Есть ли понимание,когда будет обновление для тем
Или можно до обновления вставить нужны скрипты и заработает
блок speed.scripts_timeout.?
Обновления уже на проверке модераторами.
Вот-вот должно выйти.
Для соответствующей темы свой прификс.
Если у вас тема Super, то блок будет называться super.scripts_timeout.
Для Sexy – sexy.scripts_timeout. И так далее.
А по Google Analytics (gtag.js) как также провернуть всё это?
Попробуйте скрипт gtag.js вотнкуть так же, как скрипт jivosite.
День добрый. В блоке использовать только теги литериал? теги script не использовать? Просто на странице метрика также выводится без тегов script. В блоке уже есть код, который между {strip} и script. Добавлять между {strip}?
Здравствуйте!
Да, всё что находится между тегом script вставить внутрь тега {literal}.
День добрый, Подскажите, а чат-телеграмм, возможно так отложить? Не получается сделать. Код (между скрипт):
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');
Здравствуйте, Виталий!
У меня всё получилось.
Только бот мне предложил немного другой код:
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! Спасибо!
да, вижу что код изменился, новый работает. спасибо.
Подскажите пожалуйста. Реально используя одну тему (с одинаковым id) на разных доменах, установить выше описанным способом разные счётчики метрики?
Это региональные домены я хочу получать раздельную статистику по ним.
Да, можно.
В таком случае нужно ставить условие по доменам.
{if $wa->domainUrl() == "domain-1"} Код счётчика первого домена {elseif $wa->domainUrl() == "domain-2"} Код счётчика второго домена {elseif $wa->domainUrl() == "domain-3"} Код счётчика третьего домена {/if}Чтобы выяснить как "выглядит" домен, вставьте конструкцию {$wa->domainUrl()} в блок и посмотрите на сайте, что там высветится.
Веб визор не работает при таком подключении, в остальном норм.
да, все верно
Добрый день! Установил код счетчика, как написано в инструкции. Все работает за исключением вебвизора. Где может быть проблема?
Если честно, не могу знать.
Возможно, в таком случае лучше подключать метрику классическим методом – добавьте предложенный яндексом код в блок speed.index_scripts
В старой версии 1.0 не работает. С новой 2.0 все ОК. В любом случае благодарю за внимание к вопросу
Добрый день
Подскажите, есть возможность так загружать чат/месенджеры, который на сайте сейчас выводиться конструкцией:
<!-- блок мессенджеров -->
{if $wa->shop}{shopConnectPlugin::init()}{/if}
Напрямую из блока не выводиться. Или в блок нужно добавлять только сам код?