GTM для сайтов на Tilda / Настройка конверсий на SVG 

У Тильды есть техническая особенность: это в первую очередь визуальный конструктор, а не полноценная система для гибкой разработки. Поэтому ссылки на иконках или кнопках часто реализованы через обёртки и картинки, из-за чего они могут быть «спрятаны» под слоями элементов.

Это создаёт сложности при подключении аналитики или настройке событий, например кликов в Google Tag Manager. Чтобы решить эту проблему, мы можем вручную добавить HTML-код (или небольшой скрипт), который будет отслеживать нужное событие — например, клик по иконке.

Это позволяет обойти ограничение конструктора и точно передавать данные в аналитику, даже если ссылка визуально «спрятана» под изображением.

На Тильде иконки, например WhatsApp, часто вставлены не как обычные кнопки, а как SVG-элементы — то есть они буквально «рисуются» кодом. Если навести на иконку в режиме разработчика, можно увидеть путь, который начинается со строки вроде d="M50 100C77.6142 100 100 77.6142 100 50...". Этот атрибут d описывает форму иконки — по нему браузер понимает, как её нарисовать.

Проблема в том, что Тильда воспринимает такие SVG не как кликабельные элементы, а как графику. Из-за этого аналитика (например, Google Tag Manager) не видит клики по иконке, потому что ссылка фактически находится под самим вектором.

Чтобы обойти это ограничение, мы можем добавить собственный HTML-код, который будет улавливать событие клика именно по этому элементу — то есть при клике на область с таким путём d=... будет срабатывать нужное действие и событие корректно передастся в аналитику.
Полная инструкция: как настроить отслеживание кликов (иконка или кнопка) в GTM и GA4
________________________________________
🔹 Шаг 1. Установи Google Tag Manager (если его ещё нет)
Убедись, что на сайте уже стоит контейнер GTM (<script>...GTM-XXXX...</script>).
Если стоит — идём дальше.
________________________________________
🔹 Шаг 2. Определи, по чему нужно отследить клик
​
Примеры:
• Иконка WhatsApp (SVG)
• Иконка телефона (тоже SVG)
Чтобы понять, как выглядит элемент:
​
1. Открой сайт
2. Нажми правой кнопкой → Просмотреть код (Inspect)
3. Наведи на элемент и скопируй кусок кода (или значение d="...", если это SVG).
________________________________________
🔹 Шаг 3. Добавь код-слушатель в GTM
​
Создай новый тег → Custom HTML → All Pages
(один раз — он может отслеживать несколько элементов, если хочешь).
​
Пример кода (универсальный шаблон):
<script>
(function() {
// Примеры "фрагментов", по которым определяем иконки
var signatures = {
whatsapp: [
'M12.9821 10.1115C12.7029 10.7767',
'M0.196998 23.295L0.131434 23.4862'
],
phone: [
'M16.8 19.2C15.4 19.2 14 18.8', // <--- заменишь на свой фрагмент d="..."
]
};

function pushDL(event, type) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: event,
ui_variant: type,
page_location: location.href,
page_title: document.title
});
}

document.addEventListener('click', function(e) {
var el = e.target;

// --- 1) WhatsApp ---
var a = el.closest('a[href*="wa.me"], a[href*="whatsapp"]');
if (a) return pushDL('whatsapp_click', 'link');

var svg = el.closest('svg');
if (svg) {
var html = svg.outerHTML;
for (var key in signatures) {
if (signatures[key].some(f => html.indexOf(f) !== -1)) {
pushDL(key + '_click', 'svg');
return;
}
}
}

// --- 2) Телефон (если обычная ссылка) ---
var tel = el.closest('a[href^="tel:"]');
if (tel) pushDL('phone_click', 'link');

}, true);
})();
</script>
​
Можно скопировать  свой фрагмент d="...",  для Вотсап или для телефон, и попросить чтобы чат GPT сам вставил это в этот код, и он вставит
​
👉 Этот код “слушает” все клики на странице
и добавляет в dataLayer события:
​
• whatsapp_click
• phone_click
________________________________________
🔹 Шаг 4. Создай переменную ui_variant
(делается 1 раз, потом используешь во всех событиях)
​
1. Переменные → Новая → Переменная уровня данных (Data Layer Variable)
2. Имя: ui_variant
3. Назови её: DLV – ui_variant
________________________________________
🔹 Шаг 5. Создай триггеры
​
Для каждого события:
Триггер 1:
• Тип: Пользовательское событие (Custom Event)
• Имя: whatsapp_click
Триггер 2:
• Тип: Пользовательское событие (Custom Event)
• Имя: phone_click
________________________________________
​
🔹 Шаг 6. Создай GA4 теги
​
Для каждого события — отдельный тег (по аналогии с WhatsApp):
Тег 1 — GA4: whatsapp_click
• Тип: GA4 Event
• Имя события: whatsapp_click
• Параметры:
o ui_variant = {{DLV – ui_variant}}
o page_location = {{Page URL}}
• Триггер: whatsapp_click
Тег 2 — GA4: phone_click
• Тип: GA4 Event
• Имя события: phone_click
• Параметры:
o ui_variant = {{DLV – ui_variant}}
o page_location = {{Page URL}}
• Триггер: phone_click
________________________________________
🔹 Шаг 7. Проверка
​
1. Нажми Preview (Просмотр)
2. Введи адрес сайта
3. Кликни по иконкам
​
4. В Tag Assistant должны появяться:
o Event: whatsapp_click
o Event: phone_click
________________________________________
🔹 Шаг 8. Добавь конверсии в GA4

ЧЕРЕЗ 24 часа!
​
1. Зайди в GA4 → Администратор → События / возможно недавние события
2. Найди whatsapp_click и phone_click
3. В колонке Отмечать как конверсию — включи 🟢 переключатель
Теперь все клики по WhatsApp и Телефону будут считаться целевыми действиями.

Если не хочешь сам заморачиваться над всем этим:

Я могу полностью настроить Google Tag Manager и GA4 под твой сайт: от установки контейнера до продвинутых событий и конверсий.
Настрою отслеживание WhatsApp, телефона, кнопок, форм, кликов по SVG, pop-up’ам — любые события, которые Тильда сама “не видит”.

📌 Оставь заявку в WhatsApp — отвечу лично:
👉 ВОТСАП
​