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

Оглавлениение

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

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

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

Шаг 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.

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

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

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

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

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

Шаг 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.

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

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

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

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

Если в развернутом head вы увидите код, который вы добавили или изменили, значит все работает. Если кода нет, значит что-то пошло не так =)