Краткое руководство по пользовательским шаблонам

Пользовательские шаблоны позволяют вам писать собственные определения тегов и переменных, чтобы другие сотрудники вашей организации могли использовать их вместе со встроенными шаблонами тегов и переменных. Ориентированная на разрешения и изолированная природа пользовательских шаблонов позволяет создавать пользовательские теги и переменные более безопасным и эффективным способом, чем при использовании пользовательских тегов 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. Нажмите Сохранить и закройте Редактор шаблонов.

Теперь шаблон тега должен быть готов к использованию.

Используйте свой новый тег

Процесс создания нового тега, использующего ваш новый шаблон пользовательского тега, аналогичен любому другому тегу:

  1. В Диспетчере тегов Google нажмите Теги > Создать .
  2. Ваш новый тег появится в разделе « Пользовательский » окна « Новый тег ». Щелкните ее, чтобы открыть шаблон тега.
  3. Заполните необходимые поля для настройки шаблона тега.
  4. Нажмите « Триггер» и выберите соответствующий триггер, когда тег должен активироваться.
  5. Сохраните тег и опубликуйте свой контейнер.

Создайте свой первый шаблон пользовательской переменной

Шаблоны пользовательских переменных аналогичны шаблонам тегов с несколькими заметными отличиями:

  • Шаблоны пользовательских переменных должны возвращать значение.

    Вместо вызова data['gtmOnSuccess'] для индикации завершения переменные напрямую возвращают значение.

  • Шаблоны пользовательских переменных используются в разных частях пользовательского интерфейса Диспетчера тегов.

  • Вместо перехода в « Теги» > «Создать» , чтобы создать новую переменную на основе пользовательской переменной, перейдите в « Переменные» > «Создать» .

Полное руководство по созданию шаблона пользовательской переменной см. в разделе Создание пользовательской переменной.

Экспорт и импорт

Чтобы поделиться пользовательским шаблоном со своей организацией, вы можете экспортировать пользовательский шаблон и импортировать его в другие контейнеры Диспетчера тегов. Чтобы экспортировать шаблон:

  1. В Диспетчере тегов нажмите Шаблоны .
  2. Нажмите на имя шаблона, который вы хотите экспортировать из списка. Это откроет шаблон в редакторе шаблонов.
  3. Откройте меню «Дополнительные действия» ( ) и выберите « Экспорт ».

Чтобы импортировать шаблон:

  1. В Диспетчере тегов нажмите Шаблоны .
  2. Щелкните Создать . Это откроет пустой шаблон в редакторе шаблонов.
  3. Откройте меню «Дополнительные действия» ( ) и выберите « Импорт ».
  4. Выберите файл .tpl , который вы хотите импортировать.