Как правильно добавить JavaScript на Blogger: 5 способов, GTM и таблица условий

LеV -
0
Добавление JavaScript на Blogger

Вставляем JavaScript на Blogger: только проверенные способы

С CSS мы уже разобрались в прошлом гайде. Теперь переходим к функционалу. Если ты хочешь, чтобы твой блог не просто красиво выглядел, а реально работал (слайдеры, калькуляторы, сложная аналитика, ретаргетинг), тебе понадобится JavaScript.

Но здесь есть важный нюанс. Blogger — это не обычный HTML-хостинг.

Когда ты сохраняешь тему, код проходит через строгий XML-парсер. Он проверяет каждый символ. Там, где обычный браузер проглотит ошибку и покажет сайт, Blogger просто не даст тебе сохранить шаблон, выдав предупреждение.

В этой статье разберем 5 способов внедрения JS, научимся обходить эти ограничения, и я дам готовую шпаргалку по условиям отображения.

1. Способ. Добавим JavaScript через Гаджет (Самый простой)

Этот метод подходит, если ты боишься лезть в код шаблона. Идеально для рекламных баннеров, простых виджетов или счетчиков.

Инструкция:

LeV показывает где находится вкладка Дизайн для добавления JavaScript LeV показывает кнопку добавить гаджет LeV выбирает гаджет HTML/JavaScript
Добавляем скрипт в боковую панель, подвал, шапку сайта с помощью гаджета HTML/JavaScript
LeV показывает, где находится гаджет HTML/JavaScript в шаблоне Блогспот и как его добавить.

Заходишь в раздел Дизайн (Layout). Нажимаешь Добавить гаджет в боковой панели или футере. Выбираешь тип HTML/JavaScript.

LeV прописывает JavaScript в гаджет LeV сохраняет результат
Добавляем JavaScript в боковую панель через гаджет HTML/JavaScript
LeV вставляет скрипт и сохраняет результат.

Вставляешь код и сохраняешь. И обязательно нажми на дискету 💾 для сохранения расположения гаджета. Она находится в правом нижнем углу.

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

2. Способ. Добавление JavaScript на Blogger через HTML шаблона (Глобальное подключение)

Если тебе нужно подключить скрипт для всего сайта сразу (например, плавный скролл, внешние библиотеки, защита контента), это делается через редактор темы.

Где находится HTML редактор темы на Blogger

Для того чтобы попасть в Редактор темы, тебе нужно в панели управления нажать Тема, а в открывшейся вкладке нажать на треугольник (Смотри скриншот).

Открываем редактор темы для добавления JavaScript Вход в редактор HTML
Как попасть в редактор темы на Blogger
LeV показывает, как войти в HTML редактор темы для добавления JavaScript.

Далее Изменить HTML.

Вход в редактор темы
LeV показывает, где нажать Изменить HTML, чтобы войти в редактор темы Блогспот.

После нажатия кнопки Изменить HTML откроется святая святых, точнее сказать, сердце твоего блога — это HTML редактор темы. Где ты будешь добавлять скрипты.

HTML Редактор темы
LeV находится в HTML редакторе кода, где будем вставлять JavaScript

Куда вставлять JavaScript на Blogger

Всегда старайся размещать скрипты перед закрывающим тегом </body>. Если набить скриптами "шапку сайта" (<head>), посетитель будет смотреть на белый экран, пока они не загрузятся. Размещая их внизу, ты позволяешь контенту (тексту и картинкам) загрузиться первым.

Как быстро найти закрывающий тег body
Ищем тег body для вставки Скрипта
LeV показывает, как найти закрывающий тег body

Ставишь курсор мышки посредине кода, нажми Ctrl+F (или Cmd+F на Маке) и в поиск вбей </body>. Жми Enter.

Закрывающий тег body
LeV показывает, где находится закрывающий тег body

Увидишь много кода и подсвеченный желтым цветом тег </body>.

Закрывающий тег body
LeV показывает, как добавить JavaScript перед закрывающим тегом body

Вот перед ним и добавляй свой JavaScript.

Как обойти ошибку XML при добавлении скрипта:

Символы, которые часто используются в JavaScript (например, &&, < или >), для XML-парсера Blogger являются служебными. Он видит их и думает, что ты начал новый тег, но забыл его закрыть.

Чтобы шаблон сохранился, код нужно оборачивать в конструкцию CDATA.

Пример правильного кода:
<script type='text/javascript'>
//<![CDATA[
    // Твой код пиши здесь спокойно
    function myFunction() {
        if (a < b && c > d) {
            console.log("Код работает и не вызывает ошибок парсинга");
        }
    }
//]]>
</script>

3. Способ. Добавляем JavaScript на Blogger внутри конкретной статьи

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

Инструкция: Как добавить скрипт в статью на Блогспот

В редакторе сообщения переключись в режим HTML и вставь свой код в саму статью.

Добавление скрипта в тело статьи на Блогспот
LeV показывает, как добавить JavaScript в саму статью на Blogger

И нажми Опубликовать, если это новая статья. А старую жми Обновить.

Пример работы скрипта в статье.
👆 Браузер отобразит так Пример интерактивной страницы
Сам скрипт, который приведен в примере. Держи, может понадобиться.
<div class="demo-box" style="border: 1px solid #ddd; padding: 20px; border-radius: 10px; background-color: #fcfcfc; max-width: 400px; margin: 20px auto; font-family: Arial, sans-serif; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
    <h4 style="text-align: center; color: #333; margin-top: 0;">💱 Конвертер (Пример)</h4>
    
    <div style="margin-bottom: 10px;">
        <label style="font-size: 12px; color: #666; display: block; margin-bottom: 5px;">Сумма в USD:</label>
        <input type="number" id="usdInput" oninput="runSimpleConvert()" placeholder="Введите сумму..." style="width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; outline: none;">
    </div>

    <div style="text-align: center; font-size: 18px; margin: 5px 0; color: #888;">⬇️</div>

    <div style="margin-bottom: 15px;">
        <label style="font-size: 12px; color: #666; display: block; margin-bottom: 5px;">Результат в EUR:</label>
        <div id="eurResult" style="width: 100%; padding: 10px; background: #f0f0f0; border: 1px solid #eee; border-radius: 5px; font-weight: bold; min-height: 40px; box-sizing: border-box; display: flex; align-items: center; color: #222;">0.00</div>
    </div>
</div>

<script>
function runSimpleConvert() {
    var inputField = document.getElementById('usdInput');
    var displayDiv = document.getElementById('eurResult');
    var exchangeRate = 0.92; 
    var val = parseFloat(inputField.value);

    if (!isNaN(val) && val > 0) {
        var total = (val * exchangeRate).toFixed(2);
        displayDiv.innerHTML = total + " &euro;";
    } else {
        displayDiv.innerHTML = "0.00 &euro;";
    }
}
</script>

Пример использования этого способа прямо на этом блоге

Этот способ я применил на всех страницах, где есть сервисы, это: Генератор HTML | ЧПУ конвертер | Сервис сжатия изображений и другие.

4. Добавление JavaScript на Blogger через условные теги (Оптимизация скорости)

Хороший вебмастер думает о скорости загрузки. Не нужно грузить тяжелый скрипт слайдера на странице "Контакты", где слайдера нет. Используй условные теги Blogger (b:if), чтобы показывать скрипты только там, где они нужны.

Пример с разбором (Анатомия условия):

<b:if cond='data:view.isHomepage'>
   <!-- Этот код виден ТОЛЬКО на главной -->
   <script src='slider.js'></script>
</b:if>

Давай разберем, как думает шаблон в этот момент:

  • <b:if ...> - Это команда начала проверки. Шаблон останавливается и смотрит на условие.
  • cond='...' - Само условие. data:view.isHomepage задает строгий вопрос: "Это Главная страница?".
  • <script...> - Если ответ на вопрос "ДА" - шаблон выводит этот скрипт (слайдер появляется). Если ответ "НЕТ" (ты в статье или в контактах) - шаблон полностью игнорирует эту строку, как будто её там и не было.
  • </b:if> - Конец проверки. Здесь шаблон перестает думать и продолжает грузить остальной сайт в обычном режиме.

Что именно нужно менять?

Твой главный инструмент — это то, что написано внутри кавычек cond='...'. Это сменный блок.

Чтобы заставить скрипт работать в другом месте, ты просто берешь нужный код из таблицы ниже и вставляешь его вместо data:view.isHomepage.

Пример:
  • Хочешь, чтобы скрипт работал только внутри статей?
    Пишешь: cond='data:view.isPost'
  • Хочешь, чтобы скрипт работал только на статических страницах (типа "Об авторе")?
    Пишешь: cond='data:view.isPage'

Сам код скрипта внутри (между тегами <b:if>) при этом менять не нужно.

Вот таблица основных условий (шпаргалка):

Где применять Код условия Описание
Главная страница data:view.isHomepage Скрипт сработает только на главной (Home)
Страницы постов data:view.isPost Внутри любой статьи (Item page)
Статические стр. data:view.isPage Страницы типа "О нас", "Контакты"
Страницы меток data:view.isLabelSearch Сработает при клике по тегу/категории
Архив data:view.isArchive Страницы архива (по датам)
Страница ошибки data:view.isError Специфичные скрипты для 404 ошибки
Мобильные data:blog.isMobile Если пользователь зашел со смартфона

Важный нюанс: Как выбрать место вставки?

Сам по себе тег b:if не указывает место на странице. Он работает как фильтр. Ты должен вставить этот код туда, где физически должен находиться элемент.

Закрывающий тег body
LeV добавляет JavaScript перед закрывающим тегом body с условием b:if

Для невидимых скриптов (аналитика, плавный скролл, логика): Всегда вставляй перед закрывающим тегом </body> описывал чуть выше. (Всё то же самое, только вставляешь с условием b:if)

Для видимых блоков (баннер только на главной): Найди в HTML-коде шаблона нужную секцию (например, <div id='header'>) и вставь код с условием сразу после неё.

Лайфхак: Как найти нужное место или секцию в коде?

В шаблоне тысячи строк кода. Как понять, где именно находится твой "подвал" или "шапка", чтобы вставить туда скрипт? Не пытайся угадать.

  1. Открой свой блог в обычном браузере.
  2. Наведи мышку на то место, куда хочешь вставить скрипт (например, баннер в шапке сайта).
    3. Поиск части HTML кода куда нужно прописать скрипт с условием b:if
    LeV выбирает место, куда он будет вставлять JavaScript с условием b:if
  3. Нажми правую кнопку мыши и выбери пункт "Просмотреть код" (или "Исследовать элемент").
  4. Снизу или сбоку откроется панель разработчика. Браузер подсветит тебе кусок кода, отвечающий за этот блок.
    5. Как искать код куда нужно добавить скрипт
    LeV показывает, как искать код, куда вставлять скрипт
  5. Ищи ближайший тег с понятным id или class. Например: <div class="widget-content">.
  6. Скопируй это название (widget-content).
  7. Вернись в редактор темы Blogger, нажми внутри кода Ctrl+F и вставь скопированное название. (Как искать тег, описывал выше. Всё то же самое).

Так ты найдешь точное место в шаблоне за 10 секунд. Вставляй свой JavaScript и жми 💾 (сохранить).

5. Добавить JavaScript на Blogger через Google Tag Manager (Профессиональный подход)

Если ты планируешь серьезно заниматься блогом, подключать аналитику, Яндекс.Метрику, пиксели соцсетей — не превращай шаблон в свалку. Установи Google Tag Manager (GTM) один раз, и все остальные скрипты добавляй через него.

Почему новички боятся Google Tag Manager?

Стандартный код, который выдает Google, содержит спецсимволы, которые Blogger считает ошибкой. Если скопировать код не глядя, шаблон просто не сохранится. Но мы это обойдем.

Шаг 1: Создаем аккаунт (за 1 минуту)
Вход в GTM
LeV входит в Google Tag Manager

Заходим на tagmanager.google.com. Жми «Создать аккаунт».

Заполняем все поля GTM
LeV заполняет поля в Google Tag Manager

Заполняем всего четыре поля:

  1. Название аккаунта: Имя твоего блога.
  2. Страна: Выбери свою.
  3. Название контейнера: Адрес сайта (без http, например: mysite.blogspot.com).
    4. Заполнение полей GTM и создание контейнера
    LeV создаёт контейнер в Google Tag Manager
  4. Целевая платформа (Важно!): Выбирай Веб-сайт и жми Создать.
Подтверждение условий GTM при создание контейнера
LeV подтверждает условия использования GTM

Соглашаемся с условиями Google Tag Manager и жми ДА.

Код от GTM который не стоит ставить на Блогспот
LeV показывает, что неадаптированный код от GTM вставлять не нужно.

Google покажет окна с кодом. Не копируй их! Используй адаптированную версию ниже.

Шаг 2: Правильная установка в Blogger
Где находится ID контейнера в GTM
LeV показывает, где находится ID контейнера.

Скопируй свой ID контейнера (он выглядит как GTM-XXXXXX и написан в шапке твоего кабинета GTM). Подставь его в код ниже вместо GTM-ТВОЙ_ID.

1. Вставить в код шаблона сразу после <head>:

<!-- Google Tag Manager -->
<script>
//<![CDATA[
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-ТВОЙ_ID');
//]]>
</script>
<!-- End Google Tag Manager -->

2. Вставить в код шаблона сразу после <body>:

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-ТВОЙ_ID"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Если шаблон ругается на вторую часть при сохранении, замени скобки < на &lt; в теге iframe.

Шаг 3: Проверка боем (Тестовый скрипт)

Давай убедимся, что ты всё сделал правильно. Мы создадим в GTM простую кнопку для теста.

Тестовый скрипт в GTM
LeV создаёт тестовый скрипт в Google Tag Manager.

В GTM нажми Теги (Tags) ▶ Создать.

Тестовый скрипт в GTM
LeV создаёт тестовый скрипт в Google Tag Manager.

Тип тега: Пользовательский HTML.

Вставь этот код:

<div id="my-gtm-chat" style="position:fixed; bottom:20px; left:20px; width:50px; height:50px; background:blue; border-radius:50%; color:white; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:999999;">
  TEST
</div>

<script>
  (function() {
    var btn = document.getElementById('my-gtm-chat');
    btn.addEventListener('click', function() {
       alert('Поздравляю! GTM работает корректно.');
       btn.style.backgroundColor = 'green';
       btn.innerText = 'OK';
    });
  })();
</script>
Настройка блока триггеры в GTM
LeV настраивает блок триггеры в GTM.

В блоке Триггеры выбери All Pages. Нажми Сохранить.

Настройка блока перед публикацией
LeV отправляет блок перед публикацией

А затем справа сверху кнопку Отправить (Submit) и Опубликовать.

Добавленный скрипт в Google Tag Manager
LeV публикует скрипт в GTM
Что должно произойти

Зайди на свой блог. В левом нижнем углу появится синий кружок с надписью TEST. Нажми на него.

  • Появится всплывающее окно "Поздравляю!".
  • Кружок станет зеленым с надписью OK.
Работоспособность скрипта подключённого через Google Tag Manager
LeV демонстрирует работоспособность скрипта, подключённого через GTM

Если это произошло — поздравляю, ты пробил стену! Теперь удали этот тестовый тег в GTM и ставь реальную аналитику.

Какие скрипты можно ставить через GTM?

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

✅ МОЖНО
Маркетинг и Аналитика
⛔ НЕЛЬЗЯ
Визуал и Дизайн

Скрипты-невидимки:

  • Яндекс.Метрика, GA4
  • Пиксели (VK, FB, TikTok)
  • Онлайн-чаты
  • Верификация домена

Рисуют интерфейс:

  • Слайдеры и Карусели
  • Липкие меню
  • Рекламные блоки AdSense
  • Кнопки и Прогресс-бары
Почему: Работают фоном, юзер не видит задержки. Почему: Сайт будет "дергаться" при загрузке.

Бонус: Как вывести скрипт в сайдбаре только для одной категории

Допустим, ты добавил гаджет со скриптом в сайдбар, но хочешь, чтобы он появлялся только когда читатель заходит в рубрику "Сервисы". На остальных страницах он должен исчезнуть.

Для этого нам придется немного "хакнуть" виджет внутри HTML шаблона.

Пошаговая инструкция:

  1. Добавь гаджет: В разделе "Дизайн" создай HTML/JavaScript гаджет в сайдбаре, вставь код и дай ему временный заголовок (например, TEST_SCRIPT), чтобы легко найти.
  2. Найди его в коде: Иди в "Изменить HTML". Нажми кнопку "Перейти к виджету" (иконка списка сверху справа) и выбери свой виджет.
  3. Добавь условие: Ты увидишь код виджета. Найди внутри строку <b:includable id='main'>. Оберни содержимое в условие проверки метки.

Как это выглядит в коде:

<b:widget id='HTML1' locked='false' title='TEST_SCRIPT' type='HTML'>
  <b:includable id='main'>
  
    <!-- НАЧАЛО УСЛОВИЯ: Меняй "Сервисы" на свое название -->
    <b:if cond='data:view.search.label == "Сервисы"'>

       <!-- Эта строка выводит содержимое гаджета -->
       <data:content/>

    </b:if>
    <!-- КОНЕЦ УСЛОВИЯ -->
    
  </b:includable>
</b:widget>
Важно! Blogger чувствителен к регистру. Если рубрика называется "Сервисы" (с большой буквы), а в коде ты напишешь "сервисы" — скрипт не сработает. Копируй название точь-в-точь.

Чек-лист перед сохранением

  1. Сделай бэкап. Перед любыми правками HTML всегда скачивай копию темы.
  2. Протокол HTTPS. Твой блог работает на HTTPS, значит и все скрипты должны быть подключены по HTTPS. Иначе браузер их заблокирует.

📚 Полезные материалы по теме

Чтобы прокачать блог по максимуму, советую изучить эти инструкции:

Есть вопросы или скрипт отказывается работать? Пиши в комментарии, разберем.
Tags

Отправить комментарий

Новые Старые