Через GTM можно вставить код в head с помощью JavaScript или jQuery. А вот для того, чтобы изменить существующий код можно использовать только jQuery.
Обратите, пожалуйста, внимание, что все итерации с размещением или изменением кода в head через GTM происходят при помощи JavaScript. Соответственно все действия будут производиться на стороне браузера пользователя. Никаких перезаписей в коде страницы на стороне сервере не произойдет.
Как при помощи GTM вставить код в head
Написать JavaScript или jQuery код
Различий в написание кода JavaScript и jQuery практически нет, так как jQuery — это библиотека JavaScript. В текущем случаи различая в коде будут в непосредственном выводе кода в head .
Внутри контейнера head допускаются к размещению следующие теги: title , meta , style , link , script , base , basefont , bgsound .
JavaScript код для вывода в head
Вариант 1. Можно создать тег, его атрибуты и их значения в коде JavaScript
Google Tag Manager для сайта на Тильде — как отслеживать клики, заявки и продажи: мастер-класс
Предположим что в 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);
Разместить написанный код в GTM
- Теги → Создать → Конфигурация тега → Пользовательский HTML;
- указываем название для тега;
- создаем папку для тега;
- в поле «HTML» размещаем созданный код на примере шага 1. Код нужно обернуть тегом script
- в «Триггеры» указываем событие, когда нужно активировать тег в GTM. Для данного подходит такой триггер как «All pages» или создаем триггер для определенной страницы / группы страниц
- Сохраняем тег и публикуем контейнер.
События пикселя facebook: установка через Google Tag Manager
Как при помощи GTM изменить код в head
Изменение тега или его содержания ничем не отличается от его создания, которое было рассмотрено выше.
Есть только два небольших отличия.
- если необходимо изменить тег или его содержания, то текущий тег необходимо удалить. Затем необходимо пересоздать его вместе с новым содержимым;
- для удаления тега подходит только jQuery.
Написать 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
Вывод кода через Google Tag Manager
Как проверить правильность отработки кода
Для того, чтобы узнать добавляется ли код размещенный через Google Tag Manager в head сайта, необходимо после публикации контейнера или в активном режиме отладки GTM открыть средства разработчика в браузере (F12), перейти на вкладку элементов страницы, найти и развернуть тег head .
Если в развернутом head вы увидите код, который вы добавили или изменили, значит все работает. Если кода нет, значит что-то пошло не так =)
Источник: gettotop.ru
Где должен быть размещен фрагмент Google Tag Manager?
/rating_on.png)
/rating_off.png)
(5 оценок, среднее: 4,20 из 5)
Это должно звучать знакомо: ваша команда или вы только что решили перейти на Google Tag Manager. Однако вы застряли на первом шаге, где нужно установить код контейнера.
Google рекомендовал разместить код контейнера непосредственно перед тегом открытия тега , но размещение Google Tag Manager теперь немного отличается. Вместо того, чтобы размещать его в разделе , Google Tag Manager разбил контейнер на две части, один из которых должен быть в начале тега , а другой вначале тега .
Где я могу найти свой фрагмент?
Диспетчер тегов Google предоставляет вам точный код по его добавлению на сайт.
Код установки находится в верхней навигационной панели в соответствии с параметром Admin, в разделе «Параметры контейнера» есть опция «Установить Диспетчер тегов Google».
Следующий экран с вашим фрагментом кода должен выглядеть следующим образом.
Что делает этот код?
Давайте рассмотрим код контейнера и посмотрим, что он на самом деле делает.
( 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’ ? ‘ j . async = true ; j . src =
‘https://www.googletagmanager.com/gtm.js?id=’ + i + dl ; f . parentNode . insertBefore ( j , f ) ;
> ) ( window , document , ‘script’ , ‘dataLayer’ , ‘GTM-5WMQ352’ ) ;
В первой части мы видим тег скрипта. Script- это функция JavaScript, которая загружает ваш контейнер на вашу страницу. Он делает это, создавая новый тег сценария и устанавливая источник в URL-адресе вашего контейнера. Это важная частьона помещается в .
Он также сообщает, что ваша страница загружает ваш GTM-контейнер асинхронно, а это означает, что остальная часть страницы может продолжать загрузку, когда Google делает свое волшибство.
< noscript >< iframe src = «https://www.googletagmanager.com/ns.html?id=GTM-5WMQ352»
height = «0» width = «0» style = «display:none;visibility:hidden» > < / iframe > < / noscript >
Во второй части мы видим тег без script. Это работает как резервная копия, позволяющая отслеживать пользователей без JavaScript (которых не будет так много). Тег no script указывает браузеру, если у пользователя нет встроенного JavaScript, а затем отображает версию GTM iframe. Некоторые метки и пиксели могут быть настроены так, что они будут загружаться должным образом, даже для тех, у кого нет JavaScript. Эта часть фрагмента находится в и это действительно важно, если вы заботитесь о отслеживании пользователей без JS.
Почему в ?
Google рекомендует помещать его непосредственно в , а не внутри любого другого элемента html. Почему? Чем выше на странице фрагмент, тем быстрее он загружается. В старой версии Google Tag Manager рекомендуется поместить фрагмент в тег body, но это потенциально может привести к пропуску пользователей, которые покинули вашу страницу до того, как тег загрузится.
Это стало еще более важным с выпуском инструмента тестирования от Google A/B Optimize. Независимо от того, выполняете ли вы тест перенаправления или эксперимент A/B, если загрузка снипета быстрее, Optimize будет загружать правильную версию страницы, которую должен увидеть ваш пользователь, как можно скорее.
Поместите свой DataLayer над кодом контейнера
Нам нужно поставить dataLayer. Если вы перемещаете свой код GTM, убедитесь, что вы также перемещаете свой DataLayer. Возможно, у вас возникнет соблазн добавить ваш DataLayer после кода вашего контейнера. Это проблематично и вызовет проблемы при попытке ввода данных в dataLayer. Если вы поместите DataLayer после кода контейнера, это приведет к перезаписи слоя данных, который создает для вас код Google Tag Manager, и вы можете пропустить доступ к важной информации, когда ваши первые теги пытаются запустить.
Сценарии наихудшего случая
Мы все это слышим. Возможно, ваш сайт использует шаблон или у вас нет соответствующих прав для изменения кода .
Могу ли я поместить фрагмент GTM в другой раздел моей страницы?
Хотя это и не рекомендуется, можно установить script Google Tag Manager и теги в разделе , как показано ниже. Если вы планируете или уже используете GTM для A/B тестирования, то вы должны поместить верхний фрагмент в , чтобы убедиться, что ваши эксперименты работают корректно.
Источник: pm-ka.com
Как установить Google Tag Manager (GTM) на Битрикс?
Для внедрения Google Tag Manager(Диспетчера тегов) на сайт с CMS Bitrix воспользуйтесь следующей инструкцией:
1) Авторизуемся в Диспетчере тегов — tagmanager.google.com
2) Создаем новый аккаунт.
3) Заполняем поля — Название аккаунта, Страна, Название контейнера, выбираем, где мы будем устанавливать контейнер, в нашем случае это Веб-сайт. Жмем Создать
4) Принимаем «Соглашения об Условиях использования Диспетчера тегов Google»
5) Копируем первый фрагмент кода Диспетчера тегов.
6) Переходим в админ панель Битрикс, открываем шаблон нужного сайта (Настройки > Настройки продукта > Сайты > Шаблоны сайта ).
Кликаем по иконке , выбираем Изменить
7) Скопированный первый фрагмент кода вставляем в раздел шаблона сайта.
8) Сразу после тега вставляем второй фрагмент кода Диспетчера тегов:
9) Желательно опубликовать Диспетчер тегов, Возвращаемся Диспетчер тегов, переходим на вкладку «Рабочая область» и нажимаем кнопку «Отправить»:
Далее называем версию контейнера, при необходимости, вводим описание вносимых изменений, и отправляем на публикацию наш, пока еще пустой контейнер тегов.
10) Важно! Для корректной работы Диспетчера тегов требуется, чтобы первый код GTM располагался в разделе . Однако, в ряде случаев, Битрикс переносит javascript в конец страницы и Диспетчер тегов не активируется. Для того, чтобы скрипт GTM оставался в разделе head нужно в скрипт Диспетчера тегов вписать атрибут
data-skip-moving =»true»
Готово! Google Tag Manager размещен на сайте с CMS Bitrix, опубликован и функционирует!
Если вам требуется помощь в установке GTM — ОСТАВЬТЕ ЗАЯВКУ
Источник: web-wolf.ru