04.05 - Основы HTML/CSS/JS для маркетолога

Маркетологу не нужно быть разработчиком. Но минимальный HTML/CSS/JS необходим для работы с GTM, лендингами, tracking и аналитикой.

#beginner #technical #block-04

Что нужно знать

HTML - структура страницы

<!DOCTYPE html>

<html>

<head>

<title>Страница продукта</title>

</head>

<body>

<nav>Навигация</nav>

</header>

<main>

<h1>Заголовок</h1>

<p>Текст с <a href="/page">ссылкой</a></p>

<button id="cta-button" class="btn-primary">Оформить заявку</button>

<button type="submit">Отправить</button>

</form>

</main>

</body>

</html>

Для маркетолога важно:

id и class - используются в GTM для click triggers и CSS selectors
<form> - form submission triggers в GTM
<a href> - отслеживание outbound clicks
data-* атрибуты - часто используются для передачи данных в 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 параметрами