Как через 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 вы увидите код, который вы добавили или изменили, значит все работает. Если кода нет, значит что-то пошло не так =)

Понравилась статья? Поделись ей =)

Подписаться на email рассылку

Хотите быть в курсе новых инструкций и кейсов для вашей работы?

Подпишись на полезную рассылку об интернет-маркетинге


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

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

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *