JS Скрипт

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

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

---

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

---

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

1. JS скрипт с HTML-разметкой — когда все настройки и параметры указаны в скрипте. Обычно такие скрипты не ограничиваются одной строкой и имеют HTML-разметку <script></script> и параметр 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 кода используется поле «Путь до скрипта».

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

Правильно:

(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<c.length;i+=1){p(c[i])}function p(cId){var a=d.getElementsByTagName("script")[0],s=d.createElement("script"),i=function(){a.parentNode.insertBefore(s,a)},m=typeof Array.prototype.find === 'function',n=m?"init-min.js":"init.js";s.type="text/javascript";s.async=true;s.src="https://mod.calltouch.ru/"+n+"?id="+cId;if(w.opera=="[object Opera]"){d.addEventListener("DOMContentLoaded",i,false)}else{i()}}})(window,document,"ct","");

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

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

<!-- calltouch -->
<script type="text/javascript">
(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<c.length;i+=1){p(c[i])}function p(cId){var a=d.getElementsByTagName("script")[0],s=d.createElement("script"),i=function(){a.parentNode.insertBefore(s,a)},m=typeof Array.prototype.find === 'function',n=m?"init-min.js":"init.js";s.type="text/javascript";s.async=true;s.src="https://mod.calltouch.ru/"+n+"?id="+cId;if(w.opera=="[object Opera]"){d.addEventListener("DOMContentLoaded",i,false)}else{i()}}})(window,document,"ct","");
</script>
<!-- calltouch -->

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

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

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

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

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

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

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

!-- StreamWood code -->
<link href="https://clients.streamwood.ru/StreamWood/sw.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://clients.streamwood.ru/StreamWood/sw.js" charset="utf-8"></script>
<script type="text/javascript">
  swQ(document).ready(function(){
    swQ().SW({
      swKey: '57ed1337fe4fdf9c65ddaf8555a9a1bb',
      swDomainKey: '72ba7f588fcb1de8ef0e7f11dac7a6c6'
    });
    swQ('body').SW('load');
  });
</script>
<!-- /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 этажи можно подписывать в поле «Заголовок», чтобы было понятно, какой скрипт в каком этаже находится: