/rating_on.png "Звёзд: 1")
/rating_off.png "Звёзд: 5")
(5 оценок, среднее: 4,20 из 5)
Загрузка...Это должно звучать знакомо: ваша команда или вы только что решили перейти на Google Tag Manager. Однако вы застряли на первом шаге, где нужно установить код контейнера.
Google рекомендовал разместить код контейнера непосредственно перед тегом открытия тега <body>, но размещение Google Tag Manager теперь немного отличается. Вместо того, чтобы размещать его в разделе <body>, Google Tag Manager разбил контейнер на две части, один из которых должен быть в начале тега <head>, а другой вначале тега <body>.
Где я могу найти свой фрагмент?
Диспетчер тегов Google предоставляет вам точный код по его добавлению на сайт.
Код установки находится в верхней навигационной панели в соответствии с параметром Admin, в разделе «Параметры контейнера» есть опция «Установить Диспетчер тегов Google».
Следующий экран с вашим фрагментом кода должен выглядеть следующим образом.
Что делает этот код?
Давайте рассмотрим код контейнера и посмотрим, что он на самом деле делает.
1 2 3 4 5 6 7 | <!-- Google Tag Manager --> <script>(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-5WMQ352');</script> <!-- End Google Tag Manager --> |
В первой части мы видим тег скрипта. Script- это функция JavaScript, которая загружает ваш контейнер на вашу страницу. Он делает это, создавая новый тег сценария и устанавливая источник в URL-адресе вашего контейнера. Это важная частьона помещается в <head>.
Он также сообщает, что ваша страница загружает ваш GTM-контейнер асинхронно, а это означает, что остальная часть страницы может продолжать загрузку, когда Google делает свое волшибство.
1 2 3 4 | <!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5WMQ352" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) --> |
Во второй части мы видим тег без script. Это работает как резервная копия, позволяющая отслеживать пользователей без JavaScript (которых не будет так много). Тег no script указывает браузеру, если у пользователя нет встроенного JavaScript, а затем отображает версию GTM iframe. Некоторые метки и пиксели могут быть настроены так, что они будут загружаться должным образом, даже для тех, у кого нет JavaScript. Эта часть фрагмента находится в <body> и это действительно важно, если вы заботитесь о отслеживании пользователей без JS.
Почему в <head>?
Google рекомендует помещать его непосредственно в <head>, а не внутри любого другого элемента html. Почему? Чем выше на странице фрагмент, тем быстрее он загружается. В старой версии Google Tag Manager рекомендуется поместить фрагмент в тег body, но это потенциально может привести к пропуску пользователей, которые покинули вашу страницу до того, как тег <body> загрузится.
Это стало еще более важным с выпуском инструмента тестирования от Google A/B Optimize. Независимо от того, выполняете ли вы тест перенаправления или эксперимент A/B, если загрузка снипета быстрее, Optimize будет загружать правильную версию страницы, которую должен увидеть ваш пользователь, как можно скорее.
Поместите свой DataLayer над кодом контейнера
Нам нужно поставить dataLayer. Если вы перемещаете свой код GTM, убедитесь, что вы также перемещаете свой DataLayer. Возможно, у вас возникнет соблазн добавить ваш DataLayer после кода вашего контейнера. Это проблематично и вызовет проблемы при попытке ввода данных в dataLayer. Если вы поместите DataLayer после кода контейнера, это приведет к перезаписи слоя данных, который создает для вас код Google Tag Manager, и вы можете пропустить доступ к важной информации, когда ваши первые теги пытаются запустить.
Сценарии наихудшего случая
Мы все это слышим. Возможно, ваш сайт использует шаблон или у вас нет соответствующих прав для изменения кода <head>.
1 2 3 4 5 6 7 8 9 10 11 | <!-- Google Tag Manager --> <script>(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-5WMQ352');</script> <!-- End Google Tag Manager --> <!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5WMQ352" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) --> |
Ну, не сразу. Возможно, вы уже установили Диспетчер тегов Google и не хотите выделять ценные ресурсы для внесения такого изменения. Хотя старый метод все еще работает, он может быть не таким точным в отслеживании ваших пользователей и может повлиять на любое тестирование.
По той же причине, что мы рекомендуем разместить Google Analytics в разделе head, вы хотите, чтобы ваш контейнер GTM загружался как можно скорее, поэтому ваши аналитические и маркетинговые теги могут загружаться как можно скорее. Это помогает обеспечить охват как можно большего числа пользователей.
Вот и все, это довольно просто. Моя рекомендация – следовать инструкциям Google Tag Manager и поместить код контейнера GTM как можно ближе к верхней части <head> вашей страницы.
Если у вас остались какие-либо вопросы по установке GTM, пожалуйста пишите комментарий ниже или отправьте мне электронное письмо.
Об авторе
Антон Курусь
Создатель этого блога. Люблю узнавать новое и развиваться в интересующих меня областях.
Хочешь сбежать от повседневности — не останавливайся в развитии.
There are no comments