Найти

Посмотр рубрик

JS Скрипт

4 мин. чтения

Оглавление

Вы можете добавить необходимый скрипт JS с помощью этажа «JS Скрипт». Для добавления этажа на страницу, необходимо выбрать его в общем списке этажей платформы. Найти его можно, отфильтровав список по ключевому слову «js» на вкладке «Технические»:

Данный этаж можно размещать как в шаблоне сайта, так и на конкретных страницах.

Важно!
Обратите внимание, что мы не можем гарантировать корректную работу платформы, сайта и модулей после установки сторонних скриптов и скриптов сторонних сервисов. Так же мы не можем дать гарантий, что они не повлияют на показатели скорости загрузки и работы всего сайта, или отдельных страниц.

Размещение скрипта #

На платформе используются два способа для размещения скрипта, в зависимости от его типа:

  1. JS скрипт с HTML-разметкой — когда все настройки и параметры указаны в скрипте. Обычно такие скрипты не ограничиваются одной строкой и имеют HTML-разметку и параметр function. Для такого скрипта используется поле «Код скрипта».
  2. JS-скрипт со ссылкой — код, который состоит из одной ссылки или содержит прямую ссылку на JS скрипт с указанием ID или без него , например: https://site.com/file.js, https://site.com/file.js?id=123, https://www.googletagmanager.com/gtag/js?id=(код счетчика). Для такого типа JS кода используется поле «Путь до скрипта».
Размещение в поле «Код скрипта» #

В поле «Код скрипта» вставляется тело скрипта, без указания тегов типа или других тегов, которые относятся к HTML-разметке (то есть имеют скобки <*****>). Также удаляются строки с комментариями типа .

Пример правильно размещенного JS скрипт с HTML-разметкой на платформе

Правильно:

(function(w,d,n,c){w.CalltouchDataObject=n;w[n]=function(){w[n]["callbacks"].push(arguments)};if(!w[n]["callbacks"]){w[n]["callbacks"]=[]}w[n]["loaded"]=false;if(typeof c!=="object"){c=[c]}w[n]["counters"]=c;for(var i=0;i

Неправильно:

Обратите внимание, красным цветом выделены теги, которые не должны быть указаны в скрипте.
Размещение в поле «Путь до скрипта» #

В поле «Путь до скрипта» вставляется прямая ссылка на скрипт, например: https://site.com/file.js, https://site.com/file.js?id=123, https://www.googletagmanager.com/gtag/js?id=(код счетчика) и т.д.

Пример правильного размещения ссылки на скрипт.
Поле Кодировка (если отличная от utf-8) #

В поле «Кодировка» прописывается информация о кодировке скрипта. Обычно во всех скриптах, по умолчанию, используется кодировка UTF-8. Оставляйте данное поле пустым если в руководстве по размещению скрипта не указана кодировка другого типа.

Поле «Стратегия загрузки» #

В данном поле вы можете выбрать стратегию загрузки JS-скрипта, то есть :

  1. пункт «Нет» — данный пункт установлен по умолчанию, если не требуется асинхронная или отложенная загрузка скрипта.
  2. параметр «async» — выбирается, когда при установке и работе скрипта требуется асинхронная загрузка. Обычно данная информация указана в руководстве по установке скрипта или в самом коде в виде параметра async=true . Основное преимущество такого параметра заключается в том, что он не влияет на загрузку страницы, поскольку не останавливает основной поток загрузки страницы.
  3. параметр «defer» — атрибут, похожий на async. Он также указывает, что скрипт необходимо загрузить в фоне. Но в отличие от «async», он будет выполнен после загрузки страницы. Также атрибут «defer» отличается от «async» в том, что «defer» сохраняет очередность выполнения скриптов в зависимости от того, в каком порядке они расположены в коде.

Не советуется использовать атрибуты асинхронной или отложенной загрузок, если это напрямую не указано в руководстве по установке скрипта.

Многосоставной скрипт #

Бывают ситуации, когда JS-скрипт какого либо сервиса состоит из разных типов скрипта: из нескольких скриптов со ссылкой и с HTML-разметкой. В таком случае необходимо один код разбить на несколько этажей «JS-скрипт».

Внимание! Если у вас скрипт такого вида, то вам понадобится 3 этажа «JS-скрипт»:

!-- StreamWood code -->
Размещение многосоставного скрипта #

На примере скрипта выше, делаем разбивку на 3 этажа:

  1. первым этажом со скриптом подтягиваете CSS;
var newLink = document.createElement('link');
newLink.setAttribute("href", "https://clients.streamwood.ru/StreamWood/sw.css");
newLink.setAttribute("rel", "stylesheet");
newLink.setAttribute("type", "text/css");
var head = document.getElementsByTagName('head')[0];
head.appendChild(newLink);

2. во втором этаже устанавливаете скрипт ссылкой;

3. в третьем этаже прописываете скрипт текстом.

Для удобства определения — JS этажи можно подписывать в поле «Заголовок», чтобы было понятно, какой скрипт в каком этаже находится:

Была ли статья полезна?