Пользовательские шаблоны позволяют вам писать собственные определения тегов и переменных, чтобы другие сотрудники вашей организации могли использовать их вместе со встроенными шаблонами тегов и переменных. Ориентированная на разрешения и изолированная природа пользовательских шаблонов позволяет создавать пользовательские теги и переменные более безопасным и эффективным способом, чем при использовании пользовательских тегов HTML и пользовательских переменных JavaScript .
Пользовательские теги и шаблоны переменных определяются в разделе « Шаблоны » Диспетчера тегов Google. На главном экране «Шаблоны» будут перечислены все шаблоны тегов или переменных, которые уже были определены в вашем контейнере. На этом экране также можно создавать новые шаблоны.
Вы можете экспортировать шаблон и поделиться им с другими в вашей организации, а шаблоны можно разработать для более широкого распространения в галерее шаблонов сообщества .
Редактор шаблонов
Редактор шаблонов позволяет создавать, просматривать и тестировать пользовательские шаблоны. Он имеет четыре основные области для ввода, которые помогут вам определить шаблон тега:
- Информация — определите основные свойства шаблона, такие как тег или имя переменной и значок.
- Поля — это визуальный редактор для добавления полей ввода в ваш шаблон тега.
- Код — введите изолированный JavaScript, чтобы определить, как должен вести себя ваш тег или переменная.
- Разрешения — просмотрите и установите ограничения на то, что разрешено делать вашему тегу или переменной.
Создайте свой первый шаблон пользовательского тега
В этом примере показано, как создать базовый пример пиксельного тега. Когда этот тег запускается на веб-странице, он отправляет обращение с правильной информацией об учетной записи на серверы поставщика тегов.
1. Чтобы создать свой первый шаблон, нажмите «Шаблоны» в левой панели навигации и нажмите кнопку « Создать » в разделе « Шаблоны тегов ».
2. Щелкните Информация и укажите Имя тега (обязательно), Описание и Значок .
Имя — это то, что будет представлено пользователям, когда они перейдут к реализации этого тега в пользовательском интерфейсе диспетчера тегов.
Описание — это то, на что похоже — краткое (не более 200 символов) описание того, что делает этот тег.
Значок позволяет выбрать изображение, которое будет отображаться при отображении тега в списках, поддерживающих свойство значка. Изображения значков должны быть квадратными файлами PNG, JPEG или GIF размером не более 50 КБ и размером не менее 64 на 64 пикселя.
3. Щелкните Обновить , чтобы просмотреть свой шаблон.
Справа от полей ввода находится окно предварительного просмотра шаблона . Каждый раз, когда в редакторе вносятся изменения, появляется кнопка « Обновить ». Нажмите «Обновить», чтобы увидеть, как ваши изменения повлияют на внешний вид вашего тега.
4. Нажмите «Поля» , чтобы добавить поля в шаблон тега.
Вкладка « Поля » редактора шаблонов позволяет создавать и редактировать поля в шаблоне тега. Поля используются для ввода пользовательских данных, таких как идентификатор учетной записи. Вы можете добавить стандартные элементы формы, такие как текстовые поля, раскрывающиеся меню, переключатели и флажки.
5. Щелкните Добавить поле и выберите Ввод текста . Замените имя по умолчанию (например, «text1» ) на «accountId» . В предварительном просмотре шаблона нажмите « Обновить ».
Поле будет иметь знакомый селектор переменных ( ) значок рядом с ним. Пользователи этого шаблона могут щелкнуть значок селектора переменных, чтобы выбрать переменные, активные в этом контейнере.
Следующим шагом будет добавление метки к полю:
6. Щелкните значок развертывания ( ) рядом с текстовым полем, чтобы открыть дополнительные параметры для этого поля. Введите « Идентификатор учетной записи » в поле Отображаемое имя . В предварительном просмотре шаблона нажмите «Обновить ».
Над полем должна появиться текстовая метка « Идентификатор учетной записи ».
7. Перейдите на вкладку « Код » и введите изолированный JavaScript в редакторе:
// require relevant API
const sendPixel = require('sendPixel');
const encodeUriComponent = require('encodeUriComponent');
// capture values of template fields
const account = data.accountId;
// use the provided APIs to do things like send pixels
const url = 'https://endpoint.example.com/?account=' + encodeUriComponent(account);
sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure);
Первая строка кода, const sendPixel = require('sendPixel')
, импортирует sendPixel
API .
Вторая строка кода, const encodeUriComponent = require('encodeUriComponent')
, импортирует encodeUriComponent
API .
Следующая строка, const account = data.accountId;
, получает значение accountId
, созданное на шаге 5, и сохраняет его в константе с именем account
.
Третья строка кода, const url = 'https://endpoint.example.com/?account=' + encodeUriComponent(account);
, устанавливает константу url
-адреса, которая объединяет фиксированную конечную точку URL-адреса, которая регистрирует данные аналитики, и закодированный идентификатор учетной записи, с которым был настроен тег.
Последняя строка sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure)
запускает sendPixel()
с требуемыми параметрами и отправляет запрос на указанный URL. Значения data.gtmOnSuccess
и data.gtmOnFailure
сообщают Диспетчеру тегов Google, когда тег завершил или не выполнил свою задачу, и затем используются Диспетчером тегов Google для таких функций, как последовательность тегов или режим предварительного просмотра .
8. Нажмите Сохранить , чтобы сохранить свой прогресс. Это загрузит все обнаруженные разрешения в редактор шаблонов.
Некоторые API-интерфейсы шаблонов имеют связанные с ними разрешения , которые определяют, что они могут или не могут делать. Когда вы используете API-интерфейс шаблона, такой как sendPixel
, в своем коде, Диспетчер тегов покажет соответствующие разрешения на вкладке « Разрешения ».
9. Щелкните Разрешения , чтобы уточнить, на какие домены sendPixel
разрешено отправлять данные. Для записи « Отправить пиксели » нажмите значок «Развернуть» ( ) и введите
https://endpoint.example.com/
в поле Разрешенные шаблоны сопоставления URL .
Когда шаблон тега настроен на отправку данных, вы должны указать Разрешенный шаблон сопоставления URL -адресов в соответствующем разрешении, чтобы ограничить, куда можно отправлять данные. Если URL-адрес, указанный в вашем коде, не соответствует разрешенному шаблону сопоставления URL-адресов, вызов sendPixel
завершится ошибкой.
Шаблон сопоставления URL-адресов должен использовать HTTPS и указывать шаблоны хоста и пути. Хост может быть доменом (например, " https://example.com/
") или конкретным субдоменом (например, " https://sub.example.com/
"). Путь должен состоять как минимум из " /
". Используйте звездочку ( *
) в качестве подстановочного знака для обозначения поддомена или шаблона пути любой длины (например, " https://\*.example.com/test/
"). Звездочка — это подстановочный знак, который улавливает различные возможные шаблоны, например, « \*.example.com/
» будет соответствовать www.example.com
, shop.example.com
, blog.example.com
и т. д. Звездочка должна быть экранируется символом обратной косой черты: " \*
". URL-адрес без дополнительных символов (например, " https://example.com/
") считается заканчивающимся подстановочным знаком (т.е. эквивалентен " https://example.com/\*
").
Укажите дополнительные шаблоны соответствия URL в отдельных строках.
10. Нажмите « Выполнить код» и посмотрите в окне консоли на наличие проблем.
Любые обнаруженные ошибки появятся в окне консоли .
11. Нажмите Сохранить и закройте Редактор шаблонов.
Теперь шаблон тега должен быть готов к использованию.
Используйте свой новый тег
Процесс создания нового тега, использующего ваш новый шаблон пользовательского тега, аналогичен любому другому тегу:
- В Диспетчере тегов Google нажмите Теги > Создать .
- Ваш новый тег появится в разделе « Пользовательский » окна « Новый тег ». Щелкните ее, чтобы открыть шаблон тега.
- Заполните необходимые поля для настройки шаблона тега.
- Нажмите « Триггер» и выберите соответствующий триггер, когда тег должен активироваться.
- Сохраните тег и опубликуйте свой контейнер.
Создайте свой первый шаблон пользовательской переменной
Шаблоны пользовательских переменных аналогичны шаблонам тегов с несколькими заметными отличиями:
Шаблоны пользовательских переменных должны возвращать значение.
Вместо вызова
data['gtmOnSuccess']
для индикации завершения переменные напрямую возвращают значение.Шаблоны пользовательских переменных используются в разных частях пользовательского интерфейса Диспетчера тегов.
Вместо перехода в « Теги» > «Создать» , чтобы создать новую переменную на основе пользовательской переменной, перейдите в « Переменные» > «Создать» .
Полное руководство по созданию шаблона пользовательской переменной см. в разделе Создание пользовательской переменной.
Экспорт и импорт
Чтобы поделиться пользовательским шаблоном со своей организацией, вы можете экспортировать пользовательский шаблон и импортировать его в другие контейнеры Диспетчера тегов. Чтобы экспортировать шаблон:
- В Диспетчере тегов нажмите Шаблоны .
- Нажмите на имя шаблона, который вы хотите экспортировать из списка. Это откроет шаблон в редакторе шаблонов.
- Откройте меню «Дополнительные действия» ( more_vert ) и выберите « Экспорт ».
Чтобы импортировать шаблон:
- В Диспетчере тегов нажмите Шаблоны .
- Щелкните Создать . Это откроет пустой шаблон в редакторе шаблонов.
- Откройте меню «Дополнительные действия» ( more_vert ) и выберите « Импорт ».
- Выберите файл
.tpl
, который вы хотите импортировать.