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

С помощью пользовательских шаблонов можно создавать собственные определения тегов и переменных, которые ваши коллеги будут использовать наряду со встроенными тегами и шаблонами переменных. Пользовательские шаблоны выполняются в изолированной среде, для доступа к которой требуется разрешение. Поэтому с их помощью создавать теги и переменные проще и безопаснее, чем работая с пользовательскими HTML-тегами и пользовательскими переменными JavaScript.

Пользовательские шаблоны тегов и переменных определяются в разделе Шаблоны Менеджера тегов. На главном экране раздела "Шаблоны" вы увидите все шаблоны тегов и переменных, которые уже определены в контейнере. В этом же разделе создаются новые шаблоны.

Вы можете экспортировать шаблон и поделиться им с другими сотрудниками организации. Также разработанные шаблоны можно публиковать в галерее общедоступных шаблонов.

Редактор шаблонов

С помощью Редактора шаблонов можно создавать, просматривать или тестировать пользовательские шаблоны. Настройки шаблонов задаются на четырех вкладках для ввода данных:

  • Информация: область для определения основных свойств шаблона, например имени и значка тега или переменной.
  • Поля: визуальный редактор для добавления полей в шаблон тега.
  • Код: область для ввода изолированного скрипта JavaScript, определяющего поведение тега или переменной.
  • Разрешения: область для просмотра и установки разрешений для тега или переменной.

Как создать шаблон пользовательского тега

Ниже рассказывается, как создать базовый тег пикселя. При активации на веб-странице этот тег передает обращение с корректной информацией об аккаунте на серверы своего поставщика.

1. Чтобы создать шаблон, выберите "Шаблоны" в меню навигации слева и в разделе Шаблоны тегов нажмите Создать.

2. На вкладке Информация добавьте данные о теге в разделах Название (обязательно), Описание и Значок.

Название – обозначение тега, которое будет видно пользователям в интерфейсе Менеджера тегов.

Описание – краткое (не более 200 символов) описание функций тега.

Значок – изображение, которое будет использоваться для тега в списках, поддерживающих значки. Изображение должно быть добавлено в виде файла PNG, JPEG или GIF с разрешением не менее 64 х 64 пикс. и размером не более 50 КБ.

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')) импортирует API sendPixel.

Вторая строка кода (const encodeUriComponent = require('encodeUriComponent')) импортирует API encodeUriComponent.

Следующая строка (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 Менеджеру тегов, выполнил ли тег свою задачу, а затем используются для настройки последовательности активации тегов и режима предварительного просмотра.

8. Нажмите Сохранить. Все обнаруженные разрешения будут загружены в Редактор шаблонов.

С некоторыми API пользовательских шаблонов связаны разрешения, определяющие возможность выполнения тех или иных действий. Когда вы добавляете в код API шаблона, например sendPixel, соответствующие разрешения появляются на вкладке Разрешения в Менеджере тегов.

9. Нажмите Разрешения, чтобы уточнить, в какие домены может отправлять данные функция sendPixel. Для этого рядом с надписью Отправка пикселей нажмите на значок развертывания значок развертывания и введите https://endpoint.example.com/ в поле Разрешенные шаблоны сопоставления 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/, будет обработан как URL, который заканчивается подстановочным знаком (https://example.com/\*).

Добавьте дополнительные шаблоны сопоставления URL в отдельных строках.

10. Нажмите Выполнить код.

Все обнаруженные ошибки появятся в окне Консоль.

11. Нажмите Сохранить и закройте Редактор шаблонов.

Шаблон тега готов к использованию.

Как использовать новый тег

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

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

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

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

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

    Переменная возвращает значение напрямую, а не сообщает о завершении через вызов data['gtmOnSuccess'].

  • Шаблоны пользовательских переменных используются в разных разделах Менеджера тегов.

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

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

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

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

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

Чтобы импортировать шаблон, выполните следующие действия:

  1. В Менеджере тегов нажмите Шаблоны.
  2. Нажмите Создать. В редакторе шаблонов откроется пустой шаблон.
  3. Нажмите на меню дополнительных действий () и выберите Импорт.
  4. Выберите нужный файл .tpl.