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

Главные вкладки

ivnish 29 июля 2020 в 16:14
1

Довольно часто у владельцев сайтов возникает потребность разместить на сайте кастомный 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

Авторы

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

Комментарии

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

А как же

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

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

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

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

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

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

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

Аватар пользователя jura12 jura12 23 сентября 2023 в 12:30

можно скрипт вручную добавить в тему оформелния. для друпал 10 прописать в файле
my_theme.info.yml

libraries:
   - my_theme/global-scripts

и в
mytheme.libraries.yml

global-scripts:
  version: VERSION
  js:.
     js/mybutton.js: {  }

кроме того сам скрипт должен иметь такую или подобную структуру:

(function ($) {
  Drupal.behaviors.myScript = {
    attach: function (context, settings) {
      // Your JavaScript code goes here.
    }
  };
})(jQuery);

еще. можно вызывать программно. не знаю в каком апи:

function mytheme_preprocess_page(&$variables) {
  // Attach JavaScript file to the page template.
  drupal_add_js(path_to_theme() . '/js/my-script.js');
}

мне помог в поиске тем собственный опыт и chatgpt