Маркетологу не нужно быть разработчиком. Но минимальный HTML/CSS/JS необходим для работы с GTM, лендингами, tracking и аналитикой.
#beginner #technical #block-04
Что нужно знать
HTML - структура страницы
<!DOCTYPE html>
<html>
<head>
<title>Страница продукта</title>
<!-- Здесь GTM snippet (head) -->
</head>
<body>
<!-- Здесь GTM snippet (body) -->
<header>
<nav>Навигация</nav>
</header>
<main>
<h1>Заголовок</h1>
<p>Текст с <a href="/page">ссылкой</a></p>
<button id="cta-button" class="btn-primary">Оформить заявку</button>
<form id="lead-form" action="/submit">
<input type="email" name="email" placeholder="Email">
<button type="submit">Отправить</button>
</form>
</main>
</body>
</html>
Для маркетолога важно:
idиclass- используются в GTM для click triggers и CSS selectors<form>- form submission triggers в GTM<a href>- отслеживание outbound clicksdata-*атрибуты - часто используются для передачи данных в GTM
CSS - внешний вид (минимум)
/* Селекторы - те же, что в GTM CSS Selector triggers */
#cta-button { } /* ID selector */
.btn-primary { } /* Class selector */
button[type="submit"] { } /* Attribute selector */
nav a { } /* Descendant selector */
JavaScript - поведение
// dataLayer push - самое важное для маркетолога
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'form_submit',
'form_id': 'lead-form',
'user_email_hash': 'sha256...'
});
// DOM manipulation (для Custom HTML tags в GTM)
document.getElementById('cta-button').addEventListener('click', function() {
dataLayer.push({ 'event': 'cta_click', 'cta_text': this.textContent });
});
// Чтение данных со страницы (DOM scraping)
var price = document.querySelector('.product-price').textContent;
var productName = document.querySelector('h1').textContent;
Chrome DevTools - минимум для маркетолога
| Tab | Зачем | Shortcut |
|---|---|---|
| Elements | Найти CSS selector для GTM trigger | Right click → Inspect |
| Console | Проверить dataLayer, запустить JS | F12 → Console |
| Network | Увидеть запросы к GA4, Meta Pixel | F12 → Network → filter «collect» |
| Application | Cookies (_ga, _fbp, _fbc) | F12 → Application → Cookies |
Полезные Console-команды
// Посмотреть весь dataLayer
console.table(dataLayer);
// Найти все кнопки на странице
document.querySelectorAll('button');
// Найти элемент по CSS selector (как в GTM)
document.querySelector('#cta-button');
// Проверить наличие GTM
google_tag_manager; // Если установлен - вернёт объект
Подробнее: 10.31 - Chrome DevTools для аналитика
🔧 Практика
- Откройте любой сайт → Inspect → найдите ID и class кнопки CTA
- В Console:
console.table(dataLayer)- какие данные есть? - В Network tab: отфильтруйте «collect» - видны ли GA4 запросы?
- Напишите dataLayer.push для события «клик по CTA» с 3 параметрами