Custom Templates у Google Tag Manager: розширюємо можливості GTM

Google Tag Manager (GTM) – це безплатний інструмент від Google, який дає змогу додавати, керувати й оновлювати теги на сайті без залучення розробників. Завдяки йому можна швидко впроваджувати аналітику, пікселі реклами, скрипти чи навіть банер консенту – усе в одному місці.

GTM має широкий набір вбудованих тегів: для Google Analytics, Google Ads, Floodlight, Hotjar, LinkedIn тощо. Але іноді цього недостатньо. Наприклад, коли треба:

• додати піксель Meta або TikTok із додатковими параметрами, які не підтримуються стандартно;
• інтегрувати нестандартний API;
• впровадити власний вимірювальний протокол.

У таких випадках відбувається перехід до іншого виду роботи – використання Custom HTML-тегів. Вони потужні, але мають недоліки – низьку безпеку, відсутність структури та валідації параметрів. Саме тому Google створив Custom Templates.

Що таке Custom Templates

Custom Templates – це користувацькі шаблони тегів або змінних у GTM, створені на основі sandboxed JavaScript (ізольованого середовища виконання коду). Простіше кажучи, це спосіб безпечно додавати власну логіку в GTM і ділитися нею з іншими. Водночас ви уникатимете ризиків, пов’язаних із Custom HTML.

Кожен шаблон має JSON-структуру, яка описує дозволені методи (напр. fetch, logToConsole), вхідні параметри, UI-поля для користувачів (назви змінних, чекбокси, селектори тощо).

Отже, Custom Templates – це мінідодаток всередині GTM.

Для чого потрібні Custom Templates

Custom Templates дають можливість:

• розширити стандартний функціонал GTM без небезпеки, що код «зламає» сторінку;
• підтримувати кастомні інтеграції, зокрема: Meta Conversion API (через сервер-сайд GTM), TikTok Advanced Matching, CRM → GA4 Measurement Protocol або власні API-запити до бекенду;
• спростити роботу команди – створити шаблон один раз і дати колегам просто заповнювати поля.

Приклади реальних шаблонів

• Facebook Conversion API Tag – завдяки йому можна відправляти події напряму до Meta без ручного коду.
• GA4 Event Tag (Server) – зручно використовувати для налаштування серверної аналітики.
• TikTok Pixel Tag – готовий шаблон для подій AddToCart, Purchase, CompletePayment тощо.
• Custom HTTP Request Tag – універсальний спосіб відправити дані в будь-який ендпоінт.
• Cookie Consent Templates – для управління згодами користувачів (GDPR/Consent Mode).

Усі ці шаблони доступні в Community Template Gallery.

Де брати вже готові шаблони

Google пропонує офіційне сховище – Community Template Gallery. Тут можна знайти сотні перевірених шаблонів: від Meta і TikTok до Sendinblue чи Klaviyo. Додаєш у контейнер – і використовуєш, як будь-який інший тег чи змінну.

Як створити свій шаблон

Якщо стандартних або наявних у галереї шаблонів недостатньо, можна створити власний. Для цього GTM має інструмент Template Editor:

1. У розділі Templates → New → Tag Template натисни Create.

2. Опиши, які поля користувач може заповнювати (наприклад, ID пікселя або API ключ).

3. Додай код у вкладці Code – він працює в sandbox-середовищі.

4. У розділі Permissions дай дозвіл на лише потрібні дії (наприклад, Send HTTP Request).

5. Збережи й протестуй шаблон – тепер ним можна користуватись як стандартним тегом.

Приклад

Уявімо, що ви хочете надсилати кожну подію Form Submit із сайту в CRM через webhook. Замість використання Custom HTML можна створити безпечний шаблон із Template Editor.

Поля шаблону (вкладка Fields):

Код шаблону (вкладка Code):

// Sandbox APIs



const queryPermission = require('queryPermission');



const getUrl = require('getUrl');



const sendHttp = require('sendHttp');



const logToConsole = require('logToConsole');



const JSON = require('JSON');



// 1) Безпечно читаємо gclid з URL (тільки якщо це дозволено у Permissions)



var gclid = null;



if (queryPermission('get_url', 'query', 'gclid')) {



  gclid = getUrl('query', false, null, 'gclid'); // returns string|null



}



// 2) Формуємо payload



const payload = {



  event: data.eventName,



  email: data.userEmail



};



// Додаємо gclid лише якщо він є



if (gclid) {



  payload.gclid = gclid;



}



// 3) Відправляємо POST



sendHttp(data.endpointUrl, {



  method: 'POST',



  headers: { 'Content-Type': 'application/json' },



  body: JSON.stringify(payload)



})



.then(function(response) {



  logToConsole('✅ Event sent to CRM', {



    status: response && response.statusCode,



    payload: payload



  });



  data.gtmOnSuccess();



})



.catch(function(err) {



  logToConsole('❌ CRM request failed', err);



  data.gtmOnFailure(err && err.message ? err.message : 'Request failed');



});

Налаштування тегу та тест (вкладка Testing + Preview):

Save шаблон → Tags → New → Tag Type → Custom → Send Event to CRM.

Заповніть поля:

• Endpoint: ваш URL (для тесту зручно взяти тимчасовий webhook, як-от webhook.site).
• Event name: form_submit.
• Email: тестовий email.

Тепер додайте тригер (наприклад, Form Submission або Click). Далі увімкніть Preview, відтворіть подію → в консолі побачите лог і статус відповіді, де брати готові шаблони.

Ось і все! Геть не так і складно!

Висновки

Custom Templates – це еволюція GTM. Вони:

• роблять роботу з тегами безпечнішою (sandboxed середовище);
• спрощують повторне використання коду;
• зменшують залежність від розробників;
• відкривають можливість створювати власні інструменти під будь-які завдання аналітики.

Якщо ти часто працюєш із кастомними подіями чи API – спробуй Custom Templates. Вони заощадять час, нерви й зроблять контейнер GTM більш професійним.