1. Главная

Добавить кастомный 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. Интернет-маркетинг под ключ
  • Drupal9
  • Drupal8
  • Drupal7
    • Частые вопросы

    Комментарии

    Аватар пользователя 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/
    На этих сайтах много дополнительных инструкций по разным задачам - как поставить метрику, настроить цели разного вида, менять контент и с помощью ГТМ и тд.

    Аватар пользователя chei1ahJoh8K chei1ahJoh8K 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

    Аватар пользователя chelwolf chelwolf 31 июля 2024 в 15:28

    Как в шаблоне параграфа в Drupal 10 добавить инициализацию скрипта и подставить нужное значение?

    У меня есть конструктор контента из параграфов, в котором есть элемент обратного отсчёта. Причём этот элемент, как и другие типы параграфов, может быть добавлен неограниченное число раз. А значит и скрипт должен вызываться несколько раз.

    Скрипт обратного отчёта (https://github.com/PButcher/flipdown#flipdown) подключен как библиотека на всех страницах . В шаблоне нужного типа параграфа у меня следующий код:

    {% block paragraph %}
            {% block content %}
                    <div class="row my-5 pb-0 pb-lg-5">
                            <div class="col-12 d-flex justify-content-center">
                                    <div id="flipdown" class="flipdown mb-5"></div>
                                    <script>
                                            var twoDaysFromNow = (new Date().getTime() / 1000) + ({{ content.field_timer_date.value|date('U')|format_date('unix') }} * 2) + 1;

                                            new FlipDown(twoDaysFromNow, "flipdown", {
                                                    headings: ["Дней", "Часов", "Минут", "Секунд"],
                                                    theme: "blue",
                                            }).start();
                                    </script>
                            </div>                 
                    </div> 
            {% endblock %}
    {% endblock paragraph %}

    Дата в Unix-формате подставляется как нужно, без какой либо обёртки, но скрипт не срабатывает с ошибкой "Uncaught ReferenceError: FlipDown is not defined"

    Обычно всю инициализацию я провожу через custom.js, где у меня все обёрнуто как нужно в Drupal.behaviors. Но как быть если мне в шаблоне нужен кусок скрипта как в этом примере?