Добавить кастомный js-код на сайт (различные метрики и др.)

Довольно часто у владельцев сайтов возникает потребность разместить на сайте кастомный js-код. Это могут быть различные метрики или вспомогательные скрипты. Рассмотрим наиболее популярные варианты.

 

Способ 1: кастомный блок

  1. Идем в "Схему блоков -> Пользовательские блоки"
  2. Создаем новый блок
  3. Переключаем редактор в режим "источник" и размещаем код
  4. Идем в "Схему блоков" и размещаем блок в регион

Плюсы данного метода:

  • Прост как 5 копеек, любой контентщик/сайтбилдер справится

Минусы данного метода:

  • Скрипты, добавленные таким образом, не будут сжиматься (агрегироваться). При большом обилии таких скриптов не ждите 100 баллов в google pagespeed
  • Контентщик/сайтбилдер может случайно удалить блок и скрипт пропадет (были такие случаи)
  • Некоторые форматы ввода или визуальные редакторы могут съедать код.

 

Способ 2: правка шаблона темы оформления

  1. Идем в каталог с шаблонами темы оформления
  2. Редактируем шаблон, например html.html.twig
  3. Добавляем в шаблон необходимый код

Плюсы данного метода:

  • Возможность быстро добавить скрипты на все страницы сайта и не переживать что контентщик/сайтбилдер случайно удалит их

Минусы данного метода:

  • Скрипты, добавленные таким образом, не будут сжиматься (агрегироваться). При большом обилии таких скриптов не ждите 100 баллов в google pagespeed
  • Контентщик/сайтбилдер не сможет самостоятельно добавить/удалить эти скрипты без привлечения разработчика

 

Способ 3: модуль интеграции

  1. Ищем на https://drupal.org необходимый модуль интеграция
  2. Устанавливаем и настраиваем его

Плюсы данного метода:

  • Скрипты, добавленные таким образом, будут сжиматься (агрегироваться)
  • Простота настройки (хотя это зависит от модуля интеграции)

Минусы данного метода:

  • Он всего один. Модуля-интеграции для вашего скрипта может и не быть

 

Способ 4: программный

  1. Описываем наш .js файл в файле MYTHEME|MYMODULE.libraries.yml
  2. Включаем его на нужных страницах добавив ['#attached']['library'][]=... в любом удобном хуке.

Плюсы данного метода:

  • Скрипты, добавленные таким образом, будут сжиматься (агрегироваться)
  • Можно очень тонко настроить на каких страницах скрипт будет подключаться

Минусы данного метода:

  • Нужно немножко уметь программировать (или хотя бы копипастить) на PHP.

 

Способ 5: Google Tag Manager

  1. Ставим Google Tag Manager (хоть этим модулем или этим, хоть в теме)
  2. И уже там добавляем все скрипты без программиста и затрагивания кода сайта.

Плюсы данного метода:

  • Контентщик/сайтбилдер сможет самостоятельно добавить/удалить эти скрипты без привлечения разработчика

Минусы данного метода:

  • Нужно иметь аккаунт Google

Authors

ivnish Drupal FullStack Developer в компании Abventor
marassa Друпалист-любитель
P.Selfin@drupal.org Разработка и поддержка сайтов на Drupal. Интернет-маркетинг под ключ

Комментарии

Аватар пользователя marassa marassa 29 июля в 18:59

А как же

Способ 4: программный

1. Описываем наш .js файл в файле MYTHEME|MYMODULE.libraries.yml
2. Включаем его на нужных страницах добавив ['#attached']['library'][]=... в любом удобном хуке.

Плюсы данного метода:

  • Скрипты, добавленные таким образом, будут сжиматься (агрегироваться)
  • Можно очень тонко настроить на каких страницах скрипт будет подключаться

Минусы данного метода:

  • Нужно немножко уметь программировать (или хотя бы копипастить) на PHP.
Аватар пользователя P.Selfin@drupal.org P.Selfin@drupal.org 3 августа в 12:51
2

Попросили уточнить немного.
Так как по друпалу все просто - поставили модуль, указали ID тегменеджера или вставили код, то по самому менеджеру немного хитрее. Дам ссылки на хорошие материалы:
- Обзор, установка и настройка Google Tag Manager
- https://analytics-tips.com/
На этих сайтах много дополнительных инструкций по разным задачам - как поставить метрику, настроить цели разного вида, менять контент и с помощью ГТМ и тд.