Только и слышно вокруг: «добавьте тэг, исправьте тег, запишите в тэг». А речь об одном и том же теге? Что такое тег для маркетолога?
В данной статье мы рассмотрим html тэги, хэштеги, мета теги, тэги аналитики, теги отслеживания, а на закуску — базовые настройки Google Tag Manager.
1. Что такое HTML теги?
Тэг (англ. tag — метка) это понятие широко-компьютерное. В разных обстоятельствах может обозначать разные объекты.
HTML-теги это элементы компьютерной html верстки сайта. Каждый тег заключён в треугольные скобки, например <p>text</p>.
P — это буквенное обозначение тэга параграфа. Параграф используется для размещения на странице текстов. Сайты состоят из изображений, текстов, различных блоков, заголовков, форм с полями ввода, кнопок и ссылок.
Поэтому html тегов достаточно много. Их правописание (синтаксис) регулируется правилами W2C — организации, «управляющей» интернетом.
Все новейшие тэги относятся к HTML5, стандарту записи пришедшему на смену HTML3 (не путать с CSS3 — это также новейший стандарт для стилей сайтов).
Некоторые HTML тэги состоят из из двух частей: открывающей и закрывающей, как в примере с <p>text</p>. Другие не содержит закрывающего тега, например:
<img src=“/image.jpg” alt=“image” />
Тег картинки содержит только одну пару треугольник скобок. А что это тег именно картинки, мы определяем по первому слову после открывающей кавычки — img.
Через пробел внутри тэга (то есть между одной пары треугольник скобок) стоят атрибуты тегов, через знак равно указывается значение каждого атрибута. Бывают атрибуты специфические только для определенных тегов, а бывают общие для множества разных тегов.
1.1 Параметры отслеживания внутри HTML тегов
Маркетологу важно разобраться в синтаксисе таких тегов как ссылка <a>, кнопка <button> и форма <form> — поскольку чаще всего с этими тегами связано внедрение на страницу параметров отслеживания.
Параметры отслеживания это функциональная надстройка в теле HTML страницы. На сайте имеется форма заявки:
<form action="/form.php" method="get" >
<input name="email" id="userEmail" type="text" >
<button class="submit" type="submit">Отправить</button>
</form>
Чтобы установить код отслеживания Яндекс метрики, мы можем добавить параметр отслеживания на тег формы или на кнопку отправки. При прочих равных, отслеживание отправки формы – наиболее точный вариант (ведь кто-то может нажать кнопку не заполнив данные, а нам нужна валидная отправка). Поэтому для Яндекс Метрики добавляем параметры onsubmit внутри тега form:
<form action="/form.php" method="get" onsubmit="yaCounter123456.reachGoal('ZAYAVKA'; return true;">
<input name="email" id="userEmail" type="text" >
<input class="submit" name="" type="submit" value="Отправить">
</form>
Синтаксис действия onsubmit можно посмотреть в справке Яндекса. Там же есть варианты добавления параметров на кнопку, ссылку или на выполнение события при перезагрузке страницы.
Такой метод работы с тэгами страница требует внимательности, поскольку одна неверная запятая может обрушить вашу страницу, или данные просто не отправятся. Всегда работайте с возможностью зайти на сайт через FTP.
Также здесь нужен доступа к коду сайта, что не всегда есть у маркетолога. В таких случаях помогает компоновщик тегов Google, о котором чуть ниже.
2. Мета теги — а это что?
Мета теги на странице сайта — это часть кода сайта (страницы) между тегами <head> code </head>, начинающихся со слова <meta..> или <title>.
Они, во-первых, сообщают интернету, как отображать страницу (какие стили, скрипны, шрифты прикреплены к сайту), во-вторых, помогают поисковикам классифицировать сайт/страницу, ранжировать ее и отображать ссылку при копировании (особенно для соцсетей).
Маркетолога, а точнее SEO-шника, в 2019 интересуют два главных мета тега — тайтл и дискипшн. Ну ок — еще open graph image. Давайте посмотрим на них.
Title
Тайтл — это заголовок страницы. Для Яндекса 52 символа с пробелами (если больше — будет обрезано в поисковом сниппете). Тайтл важнее, чем заголовок страницы H1.
Description
Дискрипшн — это краткое описание статьи. Должно быть тизерным (вызывающим желание кликнуть) и несущую полезность, чтобы человек смог увидеть ее прямо из поисковика.
Open Graph image
Оупенграф изображение — ссылка на картинку, которая отображается при репосте ссылки на статью в социальных медиа. Эта картинка может отсутствовать на самом сайте. Стандартный размет 1200 х 628 пкс. При этом, могут обрезаться края до квадрата: текст нужно писать по центру внутри воображаемого квадрата.
Более подробно я разобрал тайтл и дискрипшн в статье про что такое SEO.
3. Хеш теги на сайте и в соцсети
Hash tag — это когда на странице есть меню, и ссылки (называемые анкорными) с него ведут на подразделы на той же самой странице. Постраничное меню активно используется СЕО-специалистами, поскольку это повышает юзабилити и вовлеченность сайта.
Поэтому для нас — маркетологов — хеш теги на сайте важны, мы ими активно пользуемся. Ставятся они довольно просто:
- На нужном тексте прописываем будущую ссылку через # (хеш): #link1 (или другой айди блока, куда ведет ссылка).
- Я люблю задавать айди заголовкам H2-H3. В режиме правки кода внутри открывающего тега Н2 прописываем айди: <h2 id=»link1″>…</h2>
- Публикуем статью (без публикации у статьи может быть другой URI из-за чего ссылка может не сработать). Бинго!
Хеш теги в Instagram, Вконтакте
В соцсетях, таких как Вконтакте или Инстаграм, хештеги нужны для поиска внутри данной сети. В Инстаграм архиважно проставлять хештеги (сейчас их все чаще называют просто теги), чтобы получить охват для постов.
Люди ищут информацию по ключевым словам — это случай хештегов. Если они ищут конкретного пользователя или сообщество, то они добавляют знак собаки @username — такой тег, это уже ссылка на профиль пользователя (если такой ник-нейм существует).
Кроме того, без хештега невозможно попасть в рубрику Рекомендованное в Инстаграм (увеличенный в 2 раза пост в закладке Поиск). Для этого используйте среднечастотные хештеги (например, «маркетингмосква»).
Вконтакте, например можно делать поиск сразу по юзернейму и ключевому слову:
- @php2all #underscores — поиск по тегу «underscores» среди постов ВК сообщества php2all
Теги Ютуб
Теги Ютуб — это точно то же самое, что и хештеги в Инстаграм. Просто в этой сети закрепилась иная терминология.
Я пока не такой большой спец по Ютуб, но могу сказать, что важней проставлять ключевые слова в заголовок видео и делать и ваших видео Плей-листы, в названиях которых также есть ключевые слова.
Какие теги добавлять к видео на Ютуб? Смотрите поисковые подсказки Яндекс Вордстат.
4. Тэги ремаркетинга
Тег ремаркетинга — это уже не одно ключевое слово. В строгом смысле это даже не один html-тег, а целый кусок кода (как правило, на javascript).
Этот код генерируется системой контекстной рекламы, например Google Ads или Facebook Ads. Его нужно вставить определённое место в коде сайте, обычно до закрывающего тега </body> (видите, мы уже употребляем «тег» в разных значениях).
Когда на сайте установлен и корректно работает тег ремаркетинга, можно через систему аналитики — например, Яндекс Метрика или Google Analytics — получать отчёты о посещаемости и конверсиях из данных Рекламных систем. Маркетинговые тэги используются для составления аудитории посетителей сайта и для аналитики.
Отдельно по Google Ads скажу, что тег ремаркетинга можно взять из самой рекламной системы, а также сформировать цель (конверсию) и аудитории ремаркетинга внутри Google Analytics и связать их с Google Ads.
Это более профессиональный подход, потому что можно сделать более тонкую настройку аудиторий и ограничиться одним тегом Аналитикс. Однако, рекламщики народ мнительный и иногда — особенно при сложной имплементации конверсий на сайте / в приложении — они предпочитают вести рекламу и использовать «родной» тег отслеживания (если Google Ads — то и тег из Google Ads, а не из Google Analytics).
Как установить тэг от Facebook
Как установить тег ремаркетинга в Google Ads
5. Гугл тег менеджер что за зверь?
Быстро про то, что такое Google Tag Manager (GTM).
GTM — это труба.
На одном конце трубы рекламные системы, Яндекс Метрика, Аналитикс и пр. На другом конце — ваш сайт.
Один раз вы устанавливаете ГТМ в нужном месте сайта, а затем добавляете все необходимые тэги, а также события, которые вы хотите отлеживать, в интерфейсе Google Tag Manager.
Интерфейс ГТМ требует понимания логики работы, однако, он довольно прост в использовании, хотя на продвинутом уровне маркетологи прибегают к помощи программистов которые пишут целые куски кода под ГТМ для работы определенного функционала.
Все ваши коды разварачиваются на сайте через всего один код Гугл тег менеджера (называется контейнер ГТМ). При этом, не обрушивается сайт, если маркетолог накосячил с внедряемым кодом.
В общем, ГТМ — это очень удобно.
5.1 Как управлять множеством тегов ремаркетинга
Итак мы выясняли, что разные коды (в т.ч. теги) лучше всего объединять и пропускать через Google Tag Manager.
На практике вам надо установить этот тегменеджер на сайт. Он представляет из себя два куска кода — один в <head>, другой в <body>.
Как установить Google Tag Manager на Вордпресс
В Вордпрессе это проще всего сделать без всяких плагинов, просто открыв (через админку) Внешний вид / Редактор / Header.php. В этом файле и содержится нужные вам места в коде.
Да, если у вас навороченый сайт с разными шапками (а значит разными header.php) — вам нужно продублировать операцию для остальных шаблонов хедера.
Если у вас лендинг на html — тоже нечего бояться. Открываем код, ищем поиском вначале <head> — сразу после него добавляем первую часто ГТМ. Затем ищем <body> и осторожно добавляем вторую часть.
Как установить тег кол трекинга
6. Теги отслеживания и ЮТМ-метки
Ещё одно значение слова тэг в маркетинге встречается в параметрах передаваемых ссылкой. Это чаще всего ЮТМ-метки (или теги), но бывают и другие параметры отслеживания, например:
- JCLID — параметры Google Ads
- Параметры Roistat (или других систем сквозной аналитики)
- Параметры Яндекс Директ
ЮТМ-метки включает в себя пять пар «параметр — значение». Если этот хвост приписывать любой ссылки в интернете, то указанное значение можно смотреть в различных системах аналитики. Например можно написать: website.com/?utm_source=Facebook
Часть ссылки после знака вопроса маркетологи часто называют тэгом отслеживания. В данном случае она нам сообщает, чтобы переход по ссылке был с Facebook.
Довольно подробный разбор параметров отслеживания читайте в моей статье про UTM-метки.
Ну что, ближе к делу?
Смотрите мое бесплатное видео про воронки продаж Фейсбук и узнайте логику построения рекламного аккаунта, позволившую снизить мне цену заявки на 65%. Получить доступ!