В этом руководстве рассказывается, как реализовать Google Менеджер тегов на вашем сайте.
Как работать с уровнями данных
Чтобы создать максимально простое, гибкое и переносимое решение, рекомендуем использовать Google Менеджер тегов совместно с уровнем данных.
Уровень данных – это объект, содержащий всю информацию, которую требуется передавать в Менеджер тегов. Таким образом можно передавать события, переменные и прочие данные. При этом в Менеджере тегов можно настраивать триггеры, основанные на значении переменных (например, активацию тега ремаркетинга, когда purchase_total больше 6000 руб.) или на определенных событиях. Значения переменных можно также передавать в другие теги (например, значение purchase_total в поле со значением тега).
Вместо ссылок на переменные, сведения о транзакциях, категории страниц и другие важные данные, находящиеся в разных частях страницы, Google Менеджер тегов может ссылаться на информацию, переданную на уровень данных. Уровень данных не является обязательным. Если вы не реализуете его, то все равно сможете получать доступ к значениям со страницы с помощью функции Переменные, однако не сможете использовать события. Если применять уровень данных с переменными и их значениями, то они будут доступны для активации тегов в любой момент, вам не придется ждать, пока страница с ними будет полностью загружена.
Как добавить на страницу переменные уровня данных
Чтобы настроить уровень данных, добавьте в начало страницы перед контейнером следующий фрагмент кода:
<script> dataLayer = []; </script>
Приведенный выше фрагмент кода представляет собой пустой объект, который может быть заполнен информацией для передачи в Google Менеджер тегов. Например, нам может потребоваться задать на уровне данных переменные, чтобы указать, что это страница регистрации и что ее посетители считаются высокоценными клиентами. Для этого нужно заполнить уровень данных следующим образом:
<script>
dataLayer = [{
'pageCategory': 'signup',
'visitorType': 'high-value'
}];
</script>
Например, Google Менеджер тегов можно настроить так, чтобы теги активировались на всех страницах категории signup и/или на тех, посетители которых помечены как high-value. Код уровня данных обязательно должен размещаться выше контейнера, как описано в кратком руководстве по началу работы.
Если код уровня данных вызывается после контейнера, переменные, заданные на уровне данных, будут недоступны для Менеджера тегов, и он не сможет выборочно активировать теги при загрузке страницы. Рассмотрим примеры ниже:
Неверно
<!-- Google Tag Manager -->
...
<!-- End Google Tag Manager -->
<script>
dataLayer = [{
'pageCategory': 'signup',
'visitorType': 'high-value'
}];
</script>
Верно
<script>
dataLayer = [{
'pageCategory': 'signup',
'visitorType': 'high-value'
}];
</script>
<!-- Google Tag Manager -->
...
<!-- End Google Tag Manager -->
Все переменные, объявленные в объекте уровня данных, сохраняются, пока посетитель остается на текущей странице.
Переменные уровня данных, которые релевантны для нескольких страниц (например, visitorType), должны быть объявлены в уровне данных на каждой странице. Не обязательно задавать один и тот же набор переменных в уровне данных каждой страницы, но необходимо использовать единый принцип их именования. Другими словами, если для страницы регистрации вы задаете категорию с помощью оператора pageCategory, необходимо использовать тот же оператор (pageCategory) и на странице покупки.
Уровень данных не обязательно задавать явным образом. Поэтому, если вы решили не добавлять код уровня данных (и не указывать в нем переменные), фрагмент-контейнер Google Менеджера тегов инициирует объект уровня данных самостоятельно.
Как использовать уровень данных в обработчике событий HTML
В Google Менеджере тегов доступна специальная переменная уровня данных event, которая используется в блоках прослушивания событий JavaScript для активации тегов при взаимодействии пользователя с элементами сайта (например, кнопками). Допустим, вы хотите, чтобы тег отслеживания конверсий срабатывал при нажатии кнопки Submit в форме подписки на рассылку. События могут вызываться в результате взаимодействия пользователя с элементами сайта (ссылками, кнопками, Flash-компонентами меню) или в результате срабатывания JavaScript (например, при задержке).
Для этого используется вызов push API в качестве метода для уровня данных страницы (например, привязанного к определенным элементам, которые нужно отслеживать). Самый простой синтаксис для настройки события выглядит так:
dataLayer.push({'event': 'event_name'});
В строке event_name указывается, что собой представляет конкретное событие или элемент.
Например, чтобы настроить событие для нажатия кнопки, можно изменить ссылку кнопки, чтобы вызвать push() API:
<a href="#" name="button1" onclick="dataLayer.push({'event': 'button1-click'});" >Button 1</a>
Иногда данные, которые вы хотите собрать или использовать для активации тегов, могут загружаться только после взаимодействия пользователя со страницей. Используя комбинацию переменных и событий уровня данных, вы можете динамически передавать эту информацию на уровень данных по мере необходимости.
Переменные уровня данных могут динамически передаваться на уровень данных для сбора информации, такой как параметры, введенные в форму или выбранные в ней; метаданные видео, которое просматривает посетитель страницы; цвет товара (например, машины), выбранный пользователем; целевой URL при нажатии на ссылку и т. п.
В случае событий этот результат достигается вызовом push() API, который добавляет переменные в уровень данных и заменяет их. Самый простой синтаксис для настройки динамических переменных уровня данных выглядит так:
dataLayer.push({'variable_name': 'variable_value'});
Здесь variable_name – название переменной уровня данных, которую нужно настроить, а variable_value – значение переменной, которое нужно задать или заменить.
В примере ниже показано, как настроить динамическую переменную уровня данных для выбора цвета (например, в виджете конструктора автомобиля):
dataLayer.push({'color': 'red'});
Одновременная передача нескольких переменных
Вы можете передавать несколько переменных и событий одновременно с помощью одного оператора dataLayer.push().
Вот пример того, как это сделать:
dataLayer.push({
'color': 'red',
'conversionValue': 50,
'event': 'customizeCar'
});
Этот же принцип можно использовать для обработчика событий ссылки:
<a href="#"
name="color"
onclick="dataLayer.push({
'color': 'red',
'conversionValue': 50,
'event': 'customizeCar'});">Customize Color</a>
Следует учитывать, что передача на уровень данных переменной с тем же названием, что и у существующей, приведет к перезаписи текущего значения новым. Например, если в момент нажатия на ссылку выше на уровне данных уже была объявлена переменная color со значением blue, оно будет заменено новым (red).
Как работает асинхронный синтаксис
Google Менеджер тегов запускает теги асинхронно, чтобы не препятствовать обработке других элементов страницы. Теги, размещаемые с его помощью, также обрабатываются асинхронно. Поэтому, если один из тегов загружается медленно, это не мешает работе других тегов отслеживания.
Асинхронный синтаксис возможен благодаря объекту dataLayer [уровень_данных].
Он срабатывает в порядке очереди, то есть обрабатывает вызовы API и активирует соответствующие теги по мере поступления обращений.
Чтобы добавить в очередь элемент, используйте метод dataLayer.push. Метод dataLayer.push позволяет передавать в Менеджер тегов дополнительные метаданные с помощью переменных и задавать события.
Создание объекта dataLayer можно определить перед кодом Менеджера тегов. Если этого не сделать, то объект dataLayer будет создан Менеджером тегов.
Дополнительную информацию об асинхронном синтаксисе вы найдете в разделе об отслеживании с помощью метода dataLayer.push.
Как избежать распространенных ошибок
При настройке Менеджера тегов следует учитывать перечисленные ниже особенности.
Слой данных dataLayer нельзя переопределять
Когда вы назначаете значения в уровень данных dataLayer (например, так: dataLayer = [{'item':
'value'}]), любые существующие значения будут перезаписаны. Класс dataLayer рекомендуется объявлять в коде как можно выше, над фрагментом-контейнером и любыми другими сниппетами Google Оптимизации для скрытия страницы. После того как вы объявите уровень данных dataLayer, можно использовать метод dataLayer.push({'item': 'value'}), чтобы позднее добавить в него дополнительные значения с помощью скриптов.
В имени объектов dataLayer учитывается регистр
Если вы в названии объекта используете неверный регистр, он не сможет передавать переменные или события. Примеры:
datalayer.push({'pageTitle': 'Home'}); // Won't work
dataLayer.push({'pageTitle': 'Home'}); // Better
Имена переменных должны быть заключены в кавычки
Кавычки не обязательны для названий переменных, которые состоят только из букв, цифр и символов нижнего подчеркивания или не являются зарезервированными словами (например, function, export, native и т. д.), но мы рекомендуем всегда использовать их, чтобы избежать проблем. Примеры
dataLayer.push({new-variable: 'value'}); // Won't work
dataLayer.push({'new-variable': 'value'}); // Better
Имена переменных должны быть одинаковыми на разных страницах
Если вы используете разные имена для одних и тех же переменных на разных страницах, Менеджер тегов не сможет последовательно запускать на них теги. Примеры:
Неверный код
// Homepage:
dataLayer.push({'visitorType': 'low-value'});
// Checkout Page:
dataLayer.push({'visitor_type': 'high-value'});
Рабочий код
// Homepage:
dataLayer.push({'visitorType': 'low-value'});
// Checkout Page:
dataLayer.push({'visitorType': 'high-value'});
Вся информация, необходимая для активации тегов при загрузке страницы, должна быть объявлена в уровне данных перед фрагментом-контейнером
Для того чтобы теги активировались при загрузке страницы и выполнении заданного условия (например, на страницах, для которых переменной pageCategory присвоено значение sports), переменная pageCategory должна быть определена в уровне данных перед фрагментом-контейнером (например, 'pageCategory': 'sports'). Если переменные, передаваемые на уровень данных (например, с помощью метода dataLayer.push()), расположены после фрагмента-контейнера, они не смогут активировать теги при загрузке страниц, соответствующих определенному условию.
Теги, внедренные с помощью Менеджера тегов, не должны быть одновременно заданы в коде или добавляться с помощью других инструментов
Все теги, активируемые Менеджером тегов, должны быть перенесены в Менеджер, а не просто скопированы туда (подробнее о переносе тегов рассказывается здесь). Если одновременно внедрять теги как с помощью Менеджера тегов, так и с помощью других систем или через код сайта, это может привести к увеличению объема данных или проблемам с их целостностью. Например, если вы переносите тег отслеживания Google Аналитики в Менеджер тегов, это тег необходимо удалить из кода вашего сайта.
Переименование уровня данных
По умолчанию уровень данных, который инициирует и на который ссылается Менеджер тегов, называется dataLayer. Чтобы задать другое название, замените значение параметра уровня данных (выделено в примере ниже) в вашем фрагменте-контейнере.
<!-- 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','myNewName','GTM-XXXX');</script>
<!-- End Google Tag Manager -->
При этом название уровня данных также необходимо изменить во всех ссылках на уровень данных, например при определении уровня данных перед фрагментом-контейнером или передаче событий и динамических переменных уровня данных с помощью push() API.
<script> myNewName = [{ // ... }]; myNewName.push({'variable_name': 'variable_value'}); </script>
Перенос тегов в Менеджер тегов
Чтобы использовать Менеджер тегов максимально эффективно, перенесите в этот инструмент большую часть своих ваших тегов (кроме тех, которые не поддерживаются). Ниже приведены пошаговые инструкции по процессу переноса.
-
Создайте схему сайта (необязательно)
Прежде чем начинать миграцию, вспомните, какие теги уже внедрены на вашем сайте и какие сведения вам необходимы – например, какие действия (события) вы хотите отслеживать и какие дополнительные данные со страницы (переменные) вы хотели бы собирать. Составьте схему тегов с указанием того, для сбора каких данных они предназначены и какие события и страницы будут с ними связаны.
-
Добавьте стандартный фрагмент кода Менеджера тегов
Составив схему, добавьте на сайт один (пустой) фрагмент кода Менеджера тегов и разверните его. Подробную информацию об этом вы найдете в кратком руководстве.
-
Добавьте события и переменные
Настройте установку Менеджера тегов с помощью методов, описанных в разделе Добавьте события и переменные.
-
Добавьте теги и связанные с ними триггеры в интерфейс управления Менеджера тегов
После того как вы добавите на сайт фрагмент кода Менеджера тегов и API сбора данных, необходимо добавить теги сайта в пользовательский интерфейс, но публиковать их пока НЕ НУЖНО. Просто добавьте теги с вашего сайта в интерфейс управления Менеджера тегов и настройте их, используя соответствующие шаблоны, а также настройте триггеры.
-
Замените теги
Одновременно удалите старые теги и опубликуйте новые в Менеджере тегов. Для этого в течение нескольких минут выполните следующие операции:
- Удалите теги сайта с помощью разовой передачи кода.
- Убедитесь, что предыдущий шаг выполнен успешно, и опубликуйте текущую версию контейнера.
При этом часть данных может быть утрачена, но после завершения миграции потеря данных прекратится. Вы также можете выполнить эти операции в обратном порядке, то есть опубликовать новую версию контейнера незадолго до того, как будут внесены изменения на сайте. В этом случае вместо потери незначительной части данных может наблюдаться их дублирование.
После завершения первичной миграции любую работу с тегами можно будет осуществлять через интерфейс Менеджера тегов, а не путем изменения кода сайта.
Работа с несколькими доменами
Вы можете использовать один и тот же контейнер для нескольких сайтов. Однако мы рекомендуем развертывать каждый веб-ресурс с собственным контейнером. Тогда изменения, произведенные на одном сайте, не будут затрагивать другие сайты, на которых используется тот же самый контейнер. Однако в ситуациях, когда несколько доменов верхнего уровня или субдоменов относятся к одному и тому же сайту, управление тегами на этих сайтах с помощью одного и того же контейнера Менеджера тегов оправданно.
Если у вас один контейнер для нескольких доменов, тщательно настройте теги и триггеры в Менеджере тегов. Использование в Менеджере тегов триггера по умолчанию для всех страниц ($url matches RegEx .*) приведет к срабатыванию тегов на всех страницах всех доменов, где размещен фрагмент-контейнер. Поскольку настройки или цели некоторых тегов зависят от доменов, на которых они размещаются, может понадобиться создать собственные триггеры (или даже удалить триггер "Все страницы"), чтобы обеспечить активацию тегов на всех страницах одного или всех доменов.
Например, вы можете внедрить код отслеживания Google Аналитики через Менеджер тегов с настройками, которые поддерживают отслеживание Google Аналитики в нескольких доменах или субдоменах.
В этом случае вам потребуется вручную задать основной домен, на котором будут настроены файлы cookie Google Аналитики, добавив строку в код отслеживания Google Аналитики (например, настроить файлы cookie для общего домена .example-petstore.com на сайтах www.example-petstore.com и dogs.example-petstore.com). Однако для дополнительного сайта, например www.my-example-blogsite.com, вы можете установить файлы cookie для домена .my-example-blogsite.com. Таким образом, один из двух тегов отслеживания Google Аналитики (с настройками для .example-petstore.com и .my-example-blogsite.com) будет активировать теги в каждом из этих доменов. Если в оба домена добавить один и тот же контейнер Менеджера тегов (с помощью используемого по умолчанию триггера "Все страницы"), все теги будут срабатывать на всех страницах обоих доменов.
Использование нескольких контейнеров на одной странице
Чтобы обеспечить эффективную работу страницы, добавляйте на нее как можно меньше контейнеров Менеджера тегов.
Если вам необходимо использовать больше одного контейнера, внедрите все фрагменты-контейнеры в одном объекте уровня данных. Пример для двух контейнеров:
- Скопируйте приведенный ниже код JavaScript и добавьте его на страницу как можно ближе к открывающему тегу
<head>.<!-- 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-XXXX');</script> <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-YYYY');</script> <!-- End Google Tag Manager --> - Скопируйте приведенный ниже фрагмент и вставьте его сразу после открывающего тега
<body>.<!-- Google Tag Manager (noscript) --> <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-YYYY" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) -->
Обратите внимание, что на странице можно использовать только один общий уровень данных для всех контейнеров Менеджера тегов. Если уровней будет несколько, это может привести к возникновению проблем, в том числе со срабатыванием триггеров. Поэтому не меняйте имя уровня данных для поднабора контейнеров на странице. Если необходимо переименовать уровень данных, сделайте это для всех контейнеров на странице.
Не внедряйте контейнер Менеджера тегов с помощью пользовательских тегов HTML в другой контейнер Менеджера тегов, поскольку это может привести к возникновению проблем, например задержке срабатывания тегов во вторичном контейнере.
Flash и ActionScript
Чтобы Менеджер тегов активировал теги в зависимости от контента Flash-ролика или взаимодействия с ним, используйте метод ActionScript ExternalInterface для передачи событий и динамических переменных уровня данных из ролика SWF в уровень данных на странице контейнера. Для этого необходимо внедрить фрагмент-контейнер Менеджера тегов в HTML-код родительской страницы SWF-ролика в соответствии с этими инструкциями.
События и динамические переменные уровня данных могут передаваться из компонента Flash в Менеджер тегов вызовом метода push с помощью ExternalInterface. Например, чтобы инициировать событие при нажатии кнопки mybutton_btnс помощью ActionScript 3, добавьте приведенный ниже код в файл SWF.
import flash.display.*;
import flash.events.*;
import flash.external.*;
mybutton_btn.addEventListener(MouseEvent.MOUSE_UP, onButtonClick);
function onButtonClick( Event:MouseEvent ):void {
var name:String= "FLASH_EVENT";
if (ExternalInterface.available) {
ExternalInterface.call('dataLayer.push',{'event': name});
}
}
Чтобы метод ExternalInterface работал корректно, атрибуту allowscriptaccess при встраивании в SWF должно быть присвоено значение always.
<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'
width='300' height='300' id='player1' name='player1'>
<param name='movie' value='file.swf'>
<param name='allowfullscreen' value='true'>
<param name='allowscriptaccess' value='always'>
<param name='flashvars' value='file=playlist.xml'>
<embed id='player1' name='player1'
src='file.swf'
width='300' height='300'
allowscriptaccess='always'
allowfullscreen='true'
flashvars="file=playlist.xml"/>
</object>
Как добавить переменные уровня данных для устройств, не поддерживающих JavaScript
Для устройств, которые не поддерживают JavaScript или на которых он отключен, в Менеджере тегов предусмотрен фрагмент кода <noscript>. С его помощью осуществляется развертывание независимых от JavaScript тегов в случаях, когда основной JavaScript Менеджера тегов не может быть загружен.
Важно отметить, что для работы уровня данных (содержащего переменные уровня данных, объявляемые при загрузке страницы), а также любых событий или динамических переменных уровня данных, передаваемых на уровень данных, требуется наличие JavaScript. Поэтому, если триггеры, которые активируют теги, не зависящие от JavaScript (и которые необходимо активировать, даже если JavaScript не может быть загружен), зависят от переменных уровня данных, вы должны передать эти переменные слоя данных в окно iframe <noscript> как параметры запроса. Например, чтобы тег активировался, когда категория страницы (pageCategory) – sports, а тип посетителя (visitorType) – returning, фрагмент-контейнер на этой странице необходимо изменить следующим образом:
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX&pageCategory=sports&visitorType=returning" height="0"
width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
В примере выше все переменные уровня данных добавляются в конец исходного URL страницы окна iframe в виде текстовых параметров запроса, разделенных амперсандами.
Защита
В Менеджер тегов встроено множество функций, обеспечивающих безопасность сайтов и приложений. Помимо решений, реализованных на уровне кода, в Менеджере тегов вы можете воспользоваться управлением доступом к контейнерам, двухэтапной аутентификацией и функцией обнаружения вредоносных программ.
Администраторы могут ограничить внедрение тегов для своих установок, чтобы применялись только определенные теги. Кроме того, можно настроить Google Менеджер тегов для работы с правилами защиты контента.
Использование URL без указания протокола
По умолчанию фрагмент-контейнер Менеджера тегов всегда использует для загрузки контейнеров протокол https (например, https://www.googletagmanager.com). Это помогает защитить контейнер от отслеживания и действий злоумышленников и, как правило, повышает эффективность его работы.
Если вы хотите загружать контейнеры Менеджера тегов без указания протокола, замените https:// на // в исходном URL фрагмента-контейнера (см. выделенный код в примере ниже).
<!-- 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=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
Если вы используете URL без указания протокола, контейнер будет загружен с использованием протокола http на страницах, адрес которых начинается с http://, и https на страницах, адрес которых начинается с https://.
В более старых версиях фрагмента-контейнера Менеджера тегов для загрузки контейнеров всегда используются URL без указания протокола (например, //www.googletagmanager.com). Эти версии будут продолжать работать, вносить в них изменения не требуется.
В большинстве шаблонов тегов протокол не указывается. Однако при настройке пользовательских тегов для активации на защищенных страницах необходимо убедиться, что теги подходят для защищенного соединения или в них не указан протокол.