Как через GTM разместить код в head?


Через GTM можно вставить код в head с помощью JavaScript или jQuery. А вот для того, чтобы изменить существующий код можно использовать только jQuery.

Обратите, пожалуйста, внимание, что все итерации с размещением или изменением кода в head через GTM происходят при помощи JavaScript. Соответственно все действия будут производиться на стороне браузера пользователя. Никаких перезаписей в коде страницы на стороне сервере не произойдет.

Как при помощи GTM вставить код в head

  1. Шаг 1.

    Написать JavaScript или jQuery код

    Различий в написание кода JavaScript и jQuery практически нет, так как jQuery — это библиотека JavaScript. В текущем случаи различая в коде будут в непосредственном выводе кода в head.

    Внутри контейнера head допускаются к размещению следующие теги: title, meta, style, link, script, base, basefont, bgsound.

    JavaScript код для вывода в head
    Вариант 1. Можно создать тег, его атрибуты и их значения в коде JavaScript
    Предположим что в head сайта необходимо в вставить мета тег Автора.
    Для этого напишем код следующим образом:

    var metaCopyright = document.createElement('meta'); // создаем тег meta 
    metaCopyright.name = 'copyright'; // создаем атрибут name и присваиваем для него значение copyright
    metaCopyright.content = 'Сайт корпорации X'; // создаем атрибут name и присваиваем для него значение Сайт корпорации X
    document.head.appendChild(metaCopyright); // выводим созданный мета тег в head
    

    Вариант 2. Можно создать тег в коде JavaScript, а сам контент добавить с помощью HTML
    Предположим что в head сайта необходимо в вставить style для h1.
    Для этого напишем код следующим образом:

    var newStyle = document.createElement('style'); // создаем тег style
    newStyle.innerHTML = 'h1 { font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif; color: #333366; }'; // прописываем в данном теге стиль
    document.head.appendChild(newStyle); // выводим созданный стиль в head
    

    jQuery код для вывода в head
    Предположим что в head сайта необходимо в вставить мета тег Копирайтинга.
    Для этого напишем код следующим образом:

    var metaAuthor = document.createElement('meta'); // создаем тег meta 
    metaAuthor.name = 'author'; // создаем атрибут name и присваиваем для него значение 
    metaAuthor.content = 'Сергей Иванов'; // создаем атрибут name и присваиваем для него значение
    jQuery('head').append(metaAuthor); // выводим созданный мета тег в head
    Обратите, пожалуйста, внимание, что при использовании jQuery на сайте должна быть подключена его библиотека. В противном случаи код не будет работать.

    Если все-таки на вашем сайте не подключена библиотека jQuery, то ее можно подключить следующим образом

    var jq = document.createElement('script'); // создаем тег script
    jq.type = 'text/javascript'; // создаем атрибут type и присваиваем для него значение text/javascript
    jq.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'; // создаем атрибут src и указываем для него ссылку на jQuery библиотеку. На момент написания статьи библиотека 1.12 - самая последняя
    document.getElementsByTagName('head')[0].appendChild(jq); // подключаем библиотеку в head
    // устанавливаем задержку выполнения функции для того,
    // чтобы библиотека jQuery успела подгрузится раньше, 
    // чем исполнится функция
    setTimeout(function(){
    	var metaAuthor = document.createElement('meta'); // создаем тег meta 
    	metaAuthor.name = 'author'; // создаем атрибут name и присваиваем для него значение 
    	metaAuthor.content = 'Сергей Иванов'; // создаем атрибут name и присваиваем для него значение
    	jQuery('head').append(metaAuthor); // выводим созданный мета тег в head с помощью jQuery
    }, 500);
    
  2. Шаг 2.

    Разместить написанный код в GTM

    Далее переходим в Google Tag Manager и размещаем созданный код для вывода в head следующим образом:

    • Теги → Создать → Конфигурация тега → Пользовательский HTML;
    • указываем название для тега;
    • создаем папку для тега;
    • в поле «HTML» размещаем созданный код на примере шага 1. Код нужно обернуть тегом script
    • в «Триггеры» указываем событие, когда нужно активировать тег в GTM. Для данного подходит такой триггер как «All pages» или создаем триггер для определенной страницы / группы страниц
    • Сохраняем тег и публикуем контейнер.

    Как через GTM вставить код в head

Как при помощи GTM изменить код в head

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

  • если необходимо изменить тег или его содержания, то текущий тег необходимо удалить. Затем необходимо пересоздать его вместе с новым содержимым;
  • для удаления тега подходит только jQuery.
  1. Шаг 1.

    Написать jQuery код

    Предположим что в head сайта необходимо изменить тег title и мета тег description.
    Для этого напишем код следующим образом:

    jQuery('title').remove(); // удаляем текущий тег title вместе с его содержимым
    jQuery('meta[name="description"]').remove(); // удаляем текущий тег description вместе с его содержимым
    var newTitle = document.createElement('title'); // создаем тег title
    newTitle.text = 'Новый заголовок для страницы'; // создаем его содержимое
    jQuery('head').append(newTitle); // выводим созданный тег в head
    var newDescription = document.createElement('meta'); // создаем тег meta
    newDescription.name = 'description'; // создаем атрибут name и присваиваем для него значение description
    newDescription.content = 'Новое описание для страницы'; // создаем атрибут content и присваиваем для него значение Новое описание для страницы
    document.head.appendChild(newDescription); // выводим мета тег в head
    
  2. Шаг 2.

    Вывод кода через Google Tag Manager

    Текущий шаг 2 полностью идентичен шагу 2 описанному по данной ссылке.

Как проверить правильность отработки кода

Для того, чтобы узнать добавляется ли код размещенный через Google Tag Manager в head сайта, необходимо после публикации контейнера или в активном режиме отладки GTM открыть средства разработчика в браузере (F12), перейти на вкладку элементов страницы, найти и развернуть тег head.
Проверка правильности отработки кода в head размещенного через GTM
Если в развернутом head вы увидите код, который вы добавили или изменили, значит все работает. Если кода нет, значит что-то пошло не так =)

Понравилась статья? Поделись ей =)
Вам также может быть интересно
4 комментария
Станислав

Владимир, приветствую. Спасибо за статью. Очень помогла

Владислав

Здравствуйте!
Подскажите как с Вами можно связаться?

Дарья из Get To the Top

Добрый день, чем могу помочь?

Обращаю ваше внимание, что комментарии проходят ручную модерацию, поэтому личные сообщения опубликованы не будут.

Юрий

Добрый день,

Скажите, пожалуйста, будут ли еще статьи от вас?

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

Ваш адрес электронной почты опубликован не будет.Поля, обязательные для заполнения, помечены *