Довольно часто у владельцев сайтов возникает потребность разместить на сайте кастомный js-код. Это могут быть различные метрики или вспомогательные скрипты. Рассмотрим наиболее популярные варианты.
Способ 1: кастомный блок
- Идем в "Схему блоков -> Пользовательские блоки"
- Создаем новый блок
- Переключаем редактор в режим "источник" и размещаем код
- Идем в "Схему блоков" и размещаем блок в регион
Плюсы данного метода:
- Прост как 5 копеек, любой контентщик/сайтбилдер справится
Минусы данного метода:
- Скрипты, добавленные таким образом, не будут сжиматься (агрегироваться). При большом обилии таких скриптов не ждите 100 баллов в google pagespeed
- Контентщик/сайтбилдер может случайно удалить блок и скрипт пропадет (были такие случаи)
- Некоторые форматы ввода или визуальные редакторы могут съедать код.
Способ 2: правка шаблона темы оформления
- Идем в каталог с шаблонами темы оформления
- Редактируем шаблон, например html.html.twig
- Добавляем в шаблон необходимый код
Плюсы данного метода:
- Возможность быстро добавить скрипты на все страницы сайта и не переживать что контентщик/сайтбилдер случайно удалит их
Минусы данного метода:
- Скрипты, добавленные таким образом, не будут сжиматься (агрегироваться). При большом обилии таких скриптов не ждите 100 баллов в google pagespeed
- Контентщик/сайтбилдер не сможет самостоятельно добавить/удалить эти скрипты без привлечения разработчика
Способ 3: модуль интеграции
- Ищем на https://drupal.org необходимый модуль интеграция
- Устанавливаем и настраиваем его
Плюсы данного метода:
- Скрипты, добавленные таким образом, будут сжиматься (агрегироваться)
- Простота настройки (хотя это зависит от модуля интеграции)
Минусы данного метода:
- Он всего один. Модуля-интеграции для вашего скрипта может и не быть
Способ 4: программный
- Описываем наш .js файл в файле MYTHEME|MYMODULE.libraries.yml
- Включаем его на нужных страницах добавив
['#attached']['library'][]=...
в любом удобном хуке.
Плюсы данного метода:
- Скрипты, добавленные таким образом, будут сжиматься (агрегироваться)
- Можно очень тонко настроить на каких страницах скрипт будет подключаться
Минусы данного метода:
- Нужно немножко уметь программировать (или хотя бы копипастить) на PHP.
Способ 5: Google Tag Manager
- Ставим Google Tag Manager (хоть этим модулем или этим, хоть в теме)
- И уже там добавляем все скрипты без программиста и затрагивания кода сайта.
Плюсы данного метода:
- Контентщик/сайтбилдер сможет самостоятельно добавить/удалить эти скрипты без привлечения разработчика
Минусы данного метода:
- Нужно иметь аккаунт Google
Комментарии
А как же
Способ 4: программный
1. Описываем наш .js файл в файле MYTHEME|MYMODULE.libraries.yml
2. Включаем его на нужных страницах добавив
['#attached']['library'][]=...
в любом удобном хуке.Плюсы данного метода:
Минусы данного метода:
А слона-то я и не приметил) Добавил, спасибо!
заработал 1й способ. мешал модуль Content Security Policy
Ставим ГТМ (хоть этим модулем или этим, хоть в теме) и уже там добавляем все скрипты без программиста и затрагивания кода сайта.
Спасибо, добавил в мануал
Попросили уточнить немного.
Так как по друпалу все просто - поставили модуль, указали ID тегменеджера или вставили код, то по самому менеджеру немного хитрее. Дам ссылки на хорошие материалы:
- Обзор, установка и настройка Google Tag Manager
- https://analytics-tips.com/
На этих сайтах много дополнительных инструкций по разным задачам - как поставить метрику, настроить цели разного вида, менять контент и с помощью ГТМ и тд.
Некоторые скрипты через гтм не работают. Но это скорее редкость.
У меня сработал только этот модуль GoogleTagManager