Хотите отображать поля формы обратной связи сделанной при помощи плагина Contact Form 7 в несколько колонок? Это простое руководство позволит вам сделать это за пару минут.

Вставьте этот CSS код любым удобным способом. Как вариант, это может быть: файл style.css вашей темы, дополнительные стили в настройщике активной темы или дополнительный плагин для вставки CSS.

Готовый код

Разметка

<div class="horizontalForm">

<div class="horizontalField">
        <label> Ваше имя
         [text* your-name autocomplete:name] </label>
</div>

<div class="horizontalField">
        <label> Ваш e-mail
         [email* your-email autocomplete:email] </label>
</div>


        
<div class="formSubmit">  
[submit "Отправить"]
</div>
[acceptance acceptance] Даю <a href="/politika/" target="_blank" rel="nofollow">согласие</a> на обработку персональных данных [/acceptance]
</div>

Стили

/* Контейнер */
.horizontalForm {
	display: flex;
	flex-wrap: wrap;
	margin-left: calc( -20px/2 );
	margin-right: calc( -20px/2 );
	align-items: flex-end;
	row-gap: 15px;
	margin-bottom: 40px
}

/* Поля */
.horizontalField {
	width: 40%;
}

/* Кнопка */
.formSubmit {
	width: 20%
}

.wpcf7-submit {
	width: 100%
}


.horizontalField, .formSubmit {
	padding-right: calc(20px/2);
	padding-left: calc(20px/2);
}

.horizontalField input, .horizontalField label,
[data-name="acceptance"]
{
	width: 100%
}

/* Подтверждение */
.wpcf7-list-item {
	margin-left: 10px
}

/* Спиннер */
.wpcf7-spinner {
	display: none;
}

/* Ошибка валидации */
.wpcf7-not-valid-tip {
	position: absolute;
	top: -38px;
	right: 0
}

input[type="text"].wpcf7-not-valid, input[type="email"].wpcf7-not-valid, input[type="tel"].wpcf7-not-valid {
	border-color: #dc3232
}

@media (max-width: 800px) {
	.horizontalForm {
		flex-direction: column
	}
	
	.horizontalField, .formSubmit {
		width: 100%
	}
	
	.formSubmit {
		order: 1
	}
}

Поля имя и email выстроятся в две колонки, а текстовая область для сообщения будет под ними.

Как убрать автоматическую вставку тега P в Contact form 7

По умолчанию Contact Form 7 вставляет тег <p> когда создаёт свою разметку. Это приводит к неприятным сюрпризам и чтобы отключить автовставку тега, нужно сделать следующее:

Через wp-config.php

  1. Найдите в корневой папке вашего сайта файл wp-config.php;
  2. Прокрутите файл до конца и отыщите комментарий /* Это всё, дальше не редактируем. Успехов! */ или /* That's all, stop editing! Happy blogging. */;
  3. Вставьте этот код define( 'WPCF7_AUTOP', false ); НАД надписью из пункта 2;
  4. Сохраните файл.

Через functions.php

Нужно вставить в functions.php темы или через плагин вставки кода эту строку:

add_filter('wpcf7_autop_or_not', '__return_false');

Видео как вставлять код через плагин сниппетов

Вот таким образом мы очень просто можем отображать форму Contact Form 7 в 2, 3 и даже 4 колонки. Разумеется, невозможно разобрать 1000 и 1 ситуацию всего в одной статье. Пишите в комментариях свои ситуации! Будем разбирать и дополнять статью вместе. Только указывайте какой вариант кода используете.

Контейнеры в Elementor появились больше года назад, но я вижу, что многие по-прежнему их не используют и отчасти это моя ответственность.

Нарушаю собственный режим тишины, затворничества и потихоньку возвращаюсь.

В этом руководстве мы смотрим как устроены контейнеры в конструкторе сайтов и страниц Elementor.

Прочтите его до конца, а ещё лучше посмотрите видео, потому что после контейнеров мы будем разбирать другие возможности, которые появились за время моего медийного отсутствия. Эти возможности непосредственно связаны с контейнерами, поэтому важно понять, как они работают.

К тому же, рано или поздно Elementor удалит старую структуру секций, рядов и колонок, и на контейнеры перейти придётся.

Ну что ж, почитая старые традиции говорю: Поехали!

Контейнеры Elementor, видеоруководство

Смотреть в VK
Смотреть на Rutube
Смотреть на Дзен

Что такое контейнеры

Что такое контейнеры в Flexbox

Для начала, давайте разберёмся что такое контейнеры в принципе, а потом уже пойдём в Elementor.

Есть такая вещь как каскадные таблицы стилей или CSS. А в CSS есть модуль Flexbox или на сленге — флексы. Флексбокс позволяет более гибко управлять элементами на странице с помощью простых свойств.

Флекс контейнер и то как он работает — это неотъемлемая часть флексов.

Философию Flexbox, свойства ему присущие и практику применения я разобрал в своём курсе «CSS Flexbox на каждый день». Поняв флексбоксы вы 100% поймёте как устроены сетки и макеты в Elementor и любых других конструкторах.

С программой и преимуществами курса вы можете ознакомиться по ссылке 👇🏻

Забирайте изучайте, а мы идём дальше.

Визуальное управление CSS Flexbox

Новички зачастую не понимают, что Elementor не какая-то машина по производству сайтов, а лишь надстройка на WordPress с помощью которой мы можем создавать дизайн визуально и либо совсем без кода, либо почти без кода.

Так вот, контейнеры в Элементор — это ни что иное, как визуальное представление CSS Flexbox. Где мы с помощью специальных опций задаём настройки поведения самого контейнера и его содержимого.

Как начать использовать контейнеры

Во-первых включить контейнеры в настройках

Для этого идём в Elementor > Настройки > вкладка Функционал. Флекс-контейнер выбираем Активен и сохраняем настройки.

Как включить контейнеры в Elementor

После этого родительские и дочерние секции из редактора исчезнут как класс, но то, что было создано с их помощью до этого, останется.

И тут резонный вопрос: а как перейти на контейнеры? Для этого есть конвертация.

Конвертация из секций в контейнеры

Откройте в Elementor собранную страницу или шаблон. Есть 2 способа перевести секции в контейнеры:

Индивидуально каждую секцию

Выбрать секцию. На вкладке Настройки появится кнопка Преобразовать. Нажмите её и Elementor сконвертирует секцию в контейнер создав её копию;

Конвертировать секцию в контейнер Elementor

Все секции в документе

Перейти в настройки страницы (иконка шестерёнки):

и нажать кнопку преобразовать.

Преобразование секций в контейнер Elementor

Elementor создаст копии всех секций сделав из них контейнеры.

После конвертации нужно пройтись и всё проверить, внести исправления где необходимо и затем удалить старые секции.

Обзор настроек контейнера

Контейнер — это родительский блок внутри которого размещаются элементы.

Макет контейнера

Как будет вести себя контейнер, как Flex или как Grid. В этом уроке мы выбираем Flex, а по Grid поговорим в другом.

Макет контейнера elementor

Размеры макета

Здесь, как и в секциях всё по-прежнему:

Размеры контейнера Elementor

Имейте в виду, что это не ширина контейнера в целом, а ширина контента внутри. Дело в том, что контейнер состоит из двух частей:

  1. Внешняя обёртка — растягивается во всю ширину независимо от заданной;
  2. Внутренняя обёртка — вот её ширину мы как раз и выбираем. Именно она ограничивает ширину контента.

Если задать фоновое изображение или цвет, то он применяется к Внешней обёртке и будет на всю ширину экрана. Поэтому, чтобы задать ограниченный по ширине фон, нужно вставить внутрь ещё один контейнер и задать фон ему.

Направление

Это аналог свойства флекс-контейнера flex-direction.

Управляет расположением дочерних элементов:

  1. По горизонтали или в ряд. Значение свойства row
  2. По вертикали или как колонка. Значение свойства column
  3. По горизонтали в обратном порядке. Значение свойства row-reverse
  4. По вертикали в обратном порядке. Значение свойства column-reverse
Направление содержимого контейнера Elementor

Распределение содержимого

Это аналог свойства флекс-контейнера justify-content. Оно отвечает за выравнивание дочерних элементов относительно основной оси контейнера. Всю философию осей я здесь объяснять не буду, отсылаю вас к своему курсу по флексам.

Однако, какие есть варианты выравнивания и как они работают разберём.

  1. Начало или значение свойства контейнера flex-start. Элементы выстраиваются в начале контейнера: слева или вверху;
  2. Центр или значение свойства контейнера center. Элементы выстраиваются по центру;
  3. Конец или значение свойства контейнера flex-end. Элементы выстраиваются в конце контейнера: справа или внизу;
  4. Расстояние между или значение свойства контейнера space-between. Элементы равномерно распределяются по контейнеру. Первый и последний элемент прижимаются к его краям;
  5. Расстояние около или значение свойства контейнера space-around. Элементы равномерно распределяются по контейнеру. Расстояние перед первым и после последнего элементов равно половине расстояния между всеми элементами;
  6. Равное расстояние или значение свойства контейнера space-evenly. Одинаковое расстояние между элементами, а также в начале и конце.
Распределение содержимого контейнера Elementor

Философия осей на пальцах

Я проговорил ранее, что начало может быть как слева, так и сверху и это зависит от настройки направления. Если выбрано направление:

Переключение направлений контейнеров Elementor

Переключаясь между настройками направления мы видим как иконки распределения содержимого и выравнивания меняют своё расположение. Это и есть краеугольный камень флексов если вы это поймёте вы поймёте как устроен Flexbox ну и как устроены контейнеры в Elementor.

Таким образом, если в Направлении выбран Ряд, то распределение содержимого работает по горизонтали. Если же выбрана Колонка — по вертикали.

Подробно о философии Flexbox я рассказывал в курсе. Забирайте 👇🏻

Выравнивание элементов

Это аналог свойства флекс-контейнера align-items. Оно отвечает за выравнивание дочерних элементов по второстепенной оси.

Если выбрать направление Ряд, то основной осью будет горизонталь, а второстепенной — вертикаль.

Если же выбрать направление Колонка, то уже наоборот основной осью станет вертикаль, а второстепенной — горизонталь.

Доступны следующие варианты выравнивания:

  1. Начало или на языке флексов flex-start. Элементы выстраиваются в начале контейнера: слева или вверху;
  2. Центр или значение свойства center. Элементы выстраиваются по центру;
  3. Конец или значение свойства flex-end. Элементы выстраиваются в конце контейнера: справа или внизу;
  4. Растянуть или на языке флексов stretch. Значение по умолчанию. Элементы заполняют весь контейнер по второстепенной оси.
Выравнивание элементов контейнера Elementor

Отступ между элементами

Это аналог универсального свойства флекс-контейнера gap. Отвечает за… что бы вы думали: отступы между элементами.

Если задать значение в любой из единиц измерений, то вы получите одинаковый отступ между элементами и по горизонтали, и по вертикали.

Отступ между элементами контейнера Elementor

Но если выбрать произвольное значение (иконка карандаша), то можно ввести размеры в формате: 40px 30px. Где первое значение будет отступом по вертикали (между рядами), а второе — по горизонтали (между колонками).

Произвольный отступ между элементами контейнера Elementor

Перенос рядов

Отвечает за то, будут ли элементы, которые не помещаются, переносится на следующие ряды.

По умолчанию все элементы будут пытаться уместиться в 1 ряд сжимаясь на сколько это возможно. Однако, если выбрать значение Переносить, то всё, что не помещается будет переноситься на следующие ряды.

Перенос рядов контейнера Elementor

Выравнивание содержимого

Эта опция появляется только если в предыдущей выбрано Переносить, так как она является аналогом свойства флекс-контейнера align-content. Оно выравнивает ряды флекс контейнера внутри, когда на второстепенной оси есть дополнительное пространство.

Свойство будет работать только когда свойство контейнера flex-wrap: wrap, а значит элементы располагаются в несколько рядов. В нашем случае, когда установлена настройка Переносить.

Варианты расположения такие же как у опции распределение содержимого, поэтому просто перечислю их без подробностей:

Выравнивание содержимого контейнера Elementor

Обзор настроек элемента

Если контейнер это родитель, то всё, что внутри него является элементами по отношению к нему.

У элементов во Flexbox есть свои свойства. В Elementor эти свойства вынесены во вкладку Расширенные.

Ширина

Отвечает за ширину элемента. Чаще всего вы будете оставлять по умолчанию или использовать Во всю ширину 100% и Произвольно. Лучше всего смотрите видеоруководство. Там я показал примеры использования ширины.

Ширина элемента контейнера Elementor

Индивидуальное выравнивание

Это аналог свойства флекс-элемента align-self — переопределяет выравнивание относительно второстепенной оси.

Так, если Выравнивание элементов в контейнере задано Конец все элементы окажутся в конце второстепенной оси. Если же в настройках конкретного элемента выбрать Начало, то только он окажется в начале.

Доступны варианты:

Индивидуальное выравнивание элементов в контейнере Elementor

Порядок

Это аналог свойства флекс-элемента order. Отвечает за управление порядком отображения элемента.

По умолчанию flex-элементы располагаются в исходном порядке, как они прописаны в HTML или в нашем случае добавлены в виде виджетов. Однако свойство order управляет порядком, в котором они появляются в flex-контейнере.

При назначении этого свойства элементам, они отправляются в самый конец выстраиваясь в соответсвии с цифрой порядка от меньшего к большему. Элементы без свойства order выстраиваются в прежнем порядке.

Если говорить на языке Elementor, то у нас есть значения:

В произвольном можно задавать как положительные так и отрицательные значения. При отрицательном элемент переносится в самое начало в соответствии с цифрой, при положительном аналогично, но в самый конец.

Порядок элементов контейнера Elmenentor

Размер

Блок размер соответствует свойствам flex-grow и flex-srink. Первый отвечает за коэффициент увеличения, а второй — сжатия.

Увеличение

Суть свойства в том, что при указании значения, элемент пытается увеличиться на величину этого значения.

Чтобы увидеть эффект, всем элементам нужно задать Увеличение или его произвольное значение = 1. Для элемента же, который нужно увеличить, нужно задать коэффициент увеличения.

Так, если есть 2 кнопки и:

то вторая кнопка увеличится вдвое по отношению к первой.

Относительное увеличение элемента контейнера Elementor

Сжатие

В противоположность увеличению управляет сжатием элемента. Значения больше нуля задают его коэффициент и, соответственно степень сжатия.

Когда на уровне контейнера Перенос установлен как Не переносить, элементы, которые не помещаются будут сжиматься пока смогут.

Если задать одному элементу Сжатие = 3, то он сожмётся сильнее остальных в 3 раза. Если же задать Сжатие = 0, то элемент не будет сжиматься вовсе.

Сжатие элемента контейнера Elementor
Сжатие = 3
Отключение сжатия элемента контейнера Elementor
Сжатие = 0

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

Самый простой пример — изображение и текст в 1 ряд. Даже если задать изображению ширину 300 пикселей, в флексах это устроено так, что размер будет лишь пытаться стать таким, если позволяют условия. Скорее всего, изображение будет сжиматься и чтобы этого избежать нужно установить степень сжатия — 0.

Пример сжатия элементов контейнера Elementor

Параметры Контейнера в глобальных настройках

Находятся в глобальных настройках:

далее раздел Макет.

Глобальные настройки контейнеров Elementor

Ширина макета

Глобальная ширина, которая будет ограничивать ширину контента контейнера. По умолчанию выставлена 1140px как некий золотой стандарт веба. Если изменить, то измениться ширина содержимого всех контейнеров, в которых она не задана индивидуально.

Глобальная ширина макета контейнера Elementor

Внутренний отступ контейнера

По умолчанию установлен на 10px и по мне так эта настройка ни туда, ни сюда. Для колонок этот отступ полезен, а вот для контейнера который нужен как обертка для виджетов где-нибудь внутри колонки — нет.

Внутренний отступ контейнера Elementor

Так что в любом случае придется либо добавлять отступы туда, где они нужны, либо удалять где нет.

На проектах, которые делаю выставляю 0 по кругу, а потом где нужно задаю вручную.

Отступ между элементами по-умолчанию

Выставляется нужный минимальный отступ. Тот, что по умолчанию 20px, на мой взгляд оптимальный. Если нужно больше или убрать, лучше делать это на уровне контейнера.

Отступ между элементами контейнера Elementor по умолчанию

Преимущества и недостатки контейнеров в Элементор

Настройки мы разобрали и теперь самое время поговорить о плюсах и минусах контейнеров в Elementor. На самом деле, минусы в основном связаны с самой реализацией. Ну а так минусов у флексов конечно же практически нет.

Разумеется лучше посмотреть видео. Я там это наглядно показываю на примерах.

Преимущества контейнеров

Недостатки реализации контейнеров в Elementor

Практика сборки макетов

В видео я показал несколько примеров сборки макета:

Выводы и резюме

Стоит ли переходить на контейнеры? Те, кому было сложно разобраться конечно же скажут, ну их, буду продолжать использовать секции. Поверьте, Elementor постепенно будет подталкивать нас переходить на контейнеры, потому как это удобнее и эффективнее.

К тому же, некоторые новые полезные и удобные фишки о которых мы поговорим в ближайшее время, не будут работать, если не включить контейнеры.

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

Ставьте ⭐️⭐️⭐️⭐️⭐️, делитесь статьёй в соцсетях и пишите комментарии.

Новый материал через неделю, поэтому не прощаемся. Хорошего дня!

Тоже достал спам приходящий с форм Elementor Pro? Тогда смотри видео и внедряй один из способов защиты форм Элементор от спама.

Связанные видео

Выделение части заголовка — https://youtu.be/IfwOCA9b_Xc

Плагины для защиты Elementor от спама

Создать капчу — https://www.google.com/recaptcha/admin/create

Правила скрытия капчи — https://developers.google.com/recaptcha/docs/faq#id-like-to-hide-the-recaptcha-badge.-what-is-allowed

Атрибуция reCaptcha v3

Сайт защищён Google reCAPTCHA с применением
<a href="https://policies.google.com/privacy" target="_blank" rel="nofollow noreferrer">Политики конфиденциальности</a> 
и <a href="https://policies.google.com/terms" target="_blank" rel="nofollow noreferrer">Правилами пользования</a>.

Скрытие reCaptcha V3

.grecaptcha-badge {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

9 марта 2021 года Elementor изменит тарифы и не в нашу пользу, его маму любил в кино водил.

Ладно, чтобы сбавить градус котла в котором бурлит известная субстанция стоит оговориться, что это будет только для новых клиентов. Для тех, кто находится на своём тарифе ничего не изменится и на тарифе Expert также и останется 1000 сайтов.

Однако, обо всём по порядку.

Что произойдёт с тарифами 9 марта

Для Expert, Studio и Agency Pro обещают добавить киты сайтов. Судя по всему будут наборы шаблонов, но в чём будет разница между тем, что есть сейчас пока не понятно.

Кстати, если переходить с тарифа Expert на Agency в период с 9 марта по 9 июня 2021, то можно будет получить 50% скидку на стоимость перехода.

Нужна ли VIP поддержка?

Лично мне — нет, а вы смотрите сами. Я не помню, когда последний раз писал в поддержку. Если и нахожу баг, то пишу на на их issue трекере в Github. Всё равно поддержка редко подсказывает что-либо дельное, а время ответа порой оставляет желать лучшего.

То ли дело мой закрытый клуб. Вступаете, платите один раз (по крайней мере пока) и задаёте вопросы в чате Telegram или группе ВК на русском. Не я отвечу, так другие участники точно. Записаться в клуб.

Для чего изменили тарифы

Говорят, что нужно расширять команду, на это нужны деньги. Нам то с вами от этого ни холодно ни жарко. Команду они уже давно расширяют, а обновления выходят всё реже.

Кучу всего нужно доработать, просьбы висят годами и до сих пор идёт погоня за wow-факторами. Похоже Elementor заигрался в Apple и пытается копировать их модель, чтобы выпускать обновления, которые создают инфоповоды, а потому выходят редко. Однако, про последние обновления могу сказать, что слабоватые инфоповоды.

Обыграно это естественно так, что вроде как они оптимизируют тарифы с учётом роста разработчиков, добавляют новые плюшки в виде VIP поддержки, бла бла бла, но по факту, раньше можно было взять лицензию на 1000 сайтов за 199$, а с 9 марта за эти деньги только на 25 сайтов. Вот такая Элементарная арифметика.

Что делать сейчас

  1. Если нет лицензии и думали приобрести, то сейчас самое время купить Elementor Pro Expert;
  2. Если есть лицензия, например Expert, то нужно её продлевать постоянно иначе потом придётся покупать заново на новых условиях;
  3. Если есть младшая лицензия и планируете расти, то нужно проапгрейдится до Expert до 9 марта.

Что бы я делал после 9 марта, если бы не было лицензии

Представители Elementor заявили, что они не особо заинтересованы в рынке СНГ. Мол он не такой денежный, там много пиратят и так далее.

Мой ответ такой: пусть тогда команду разработчиков поддерживает вечно зелёно-серыми та часть населения Земли, в которой они заинтересованны, а мы будем пользоваться бесплатной версией и дополнениями сторонних разработчиков, которые частично или полностью закрывают задачи, а некоторые перекрывают с головой.

Crocoblock

Хороший советский набор дополнений с русской поддержкой. Закрывает задачи разработчика на 1000%. В том числе, замещает большую часть функций, которые есть в Elementor Pro, а которую не замещает можно закрыть другими дополнениями.

Купить Crocoblock

Промокод: wplovers

Dynamic Content

Пакет виджетов и функций ориентированные на динамический вывод данных. Есть шаблонизатор, позволяющий делать шаблоны архивов, записей, товаров и т. д.

Купить Dynamiс Content

Element Pack

Гигантский пакет виджетов, в том числе виджеты оформляющие сторонние плагины такие как Contact Form 7, WooCommerce, Easy Digital Downloads и т. д.

Купить Element Pack

Выводы

Разумеется, я буду пользоваться Elementor Pro потому как всё равно продлеваю да и условия с количеством сайтов для тех, кто на тарифе Expert пока не меняются.

Тем не менее, камень в наш огород нехилый и лояльность начала таять на глазах и пора присматривать запасные варианты.

Пишите в комментариях что думаете, только без мата.

Ноябрь и начало декабря — замечательная пора, когда можно хорошо сэкономить ведь это время скидок на Чёрную Пятницу и Киберпонедельник. Здесь вы найдёте скидки на инструменты для создания сайтов. Представленные продукты публикуются «как есть» и я не все из них использую, однако, в этот раз решил, что несправедливо лишать вас возможности узнать о скидках не только на любимые мной инструменты, но и на остальные тоже.

Особое внимание

Наиболее интересные предложения, на которые стоит обратить внимание

Поиск

Категория

Другие предложения

Не менее интересные предложения, которые вам могут пригодиться.

Поиск

Категория

Друзья, напоминаю, что я не имею отношения ни к одному из представленных решений (кроме курсов) и содержимое сайта носит информационный характер. Настоятельно рекомендую прочесть политику рекомендаций на этом сайте.

Сегодня получил письмо от PayPal-бизнес Россия с новостями о том, что с 31 июля 2020 прекращаются транзакции внутри России. Дабы не быть голословным цитирую текст письма.

Из письма PayPal. Подробнее

PayPal прекращает обработку внутрироссийских платежей с 31 июля 2020 года.
По результатам стратегической оценки нашей деятельности в России, мы приняли решение прекратить обработку локальных платежей, включая оплату товаров в магазинах и перевод средств между пользователями.
С 31 июля 2020 года подобные транзакции будут автоматически отклоняться. Если вы предлагаете оплату через PayPal покупателям из России, пожалуйста, добавьте информацию об этом изменении на ваш сайт.
Вы, как и прежде, сможете получать переводы из-за границы от 300+ миллионов международных пользователей PayPal и покупать в миллионах магазинов по всему миру.

Чем это грозит бизнесу и Российским пользователям? Да ничем. Переводы не будут работать только внутри России. Переводить, получать деньги из-за рубежа, а также покупать товары за пределами России можно как и прежде. Судя по сообщению принимать платежи НЕ из России тоже можно. Позже напишу как оно будет по факту.

Почему PayPal не прижился в России?

По моему мнению не достаточно просто перевести сайт, открыть подразделение и зарегистрировать НКО. PayPal не создали достаточные конкурентоспособные условия для привлечения пользователей как среди физических лиц, так и для бизнеса.

Так, например, комиссии за транзакции были самыми высокими среди российских систем приёма платежей. К тому же сервис не соответствует законодательству относительно применения контрольно кассовой техники. Банально приходилось пробивать чеки руками или через сторонний сервис. Кроме того, деньги приходят на счёт не на следующий день, как во многих интернет-эквайрингах, а через несколько дней.

Что до физических лиц, так никто не станет переводить деньги через PayPal внутри России с комиссией, когда есть переводы на карту. Максимум это могут быть переводы от человека у которого уже есть сумма на счёте PayPal. Гонять деньги с карт через стороннюю систему — ну такое.

Как это отразиться на пользователях WordPress?

В феврале 2020 я проводил мастер-класс по созданию интернет-магазина на WooCommerce. Показывал плагин и объяснял как принимать платежи через PayPal. Собственно для пользователей WordPress и WooCommerce всё то же самое: ничего не меняется. Внутри России принимаем платежи другими системами, а международные будем посмотреть чуть позже. Кому-то так и вовсе не нужон этот ваш ПейПэл заморский.

Позже дополню как будет с приёмом платежей из-за границы, а пока пойду напишу на сайте, что PayPal только для иностранных платежей. Чего и вам советую.

Email на странице контактов мы пишем всегда, а вот заботиться о его защите от спам-ботов далеко не каждый. Хотя… это только до выхода этой статьи и видео.

Этот код нужно вставить в файл functions.php вашей или дочерней темы. Также этот код можно вставить с помощью php сниппета плагина Woody Snippents.

//Шифрование Email
function email_encode_function( $atts, $content ){
	return '<a href="'.antispambot("mailto:".$content).'">'.antispambot($content).'</a>';
}
add_shortcode( 'email', 'email_encode_function' );

//Шифрование Номера телефона с ссылкой
function phone_link_encode_function( $atts, $content ){
	return '<a href="'.antispambot("tel:".$content).'">'.antispambot($content).'</a>';
}
add_shortcode( 'phone-link', 'phone_link_encode_function' );

//Шифрование Номера телефона без ссылки
function phone_encode_function( $atts, $content ){
	return '<span>'.antispambot($content).'</span>';
}
add_shortcode( 'phone', 'phone_encode_function' );

Для шифрования Email его просто нужно обернуть в шорткод [email]info@yoursite.com[/email] и вставить в статью, виджет сайдбара, виджет конструктора страниц (Elementor, Divi, WP Backery и др.).

С номером телефона почти аналогично. Если нужно зашифровать просто номер телефона, то нужно использовать эту конструкцию [phone]+7 900 123 4567[/phone]
Если же нужно сделать номер телефона ссылкой, то запишите номер телефона так:
[phone-link]+7 900 123 4567[/phone-link]

Очень много запросов было по поводу того как сделать эффект пробегающего блика на кнопке да ещё и в конструкторе Elementor. Сам эффект блика на кнопке я взял из одного примера, немного доработал и интегрировал в Элементор.

Для работы мы будем использовать бесплатную версию плагина Unlimited Elements. С его помощью можно создавать собственные виджеты для Elementor из любого кода, который вы можете найти в интернете.

Скачать архив готового виджета можно по этой ссылке и импортировать к себе.

HTML код будущей кнопки

<div class="flare-button-wrapper" style="text-align: {переменная выравнивания}">
  <a class="btn_box" href="#"><span class="btn_flare"></span>Заказать тест-драйв</a>
</div>

А это стили CSS

@-webkit-keyframes sheens {
    0%,
    79% {
        opacity: 0;
        filter: alpha(opacity=0);
        -webkit-transform: rotateZ(60deg) translate(-5em, 7.5em);
        transform: rotateZ(60deg) translate(-5em, 7.5em)
    }
    80% {
        opacity: 1;
        filter: alpha(opacity=100);
        -webkit-transform: rotateZ(60deg) translate(-5em, 7.5em);
        transform: rotateZ(60deg) translate(-5em, 7.5em)
    }
    95% {
        opacity: 1;
        filter: alpha(opacity=100);
        -webkit-transform: rotateZ(60deg) translate(1em, -11em);
        transform: rotateZ(60deg) translate(1em, -11em)
    }
    to {
        opacity: 0;
        filter: alpha(opacity=0);
        -webkit-transform: rotateZ(60deg) translate(1em, -9em);
        transform: rotateZ(60deg) translate(1em, -9em)
    }
}

@keyframes sheens {
    0%,
    79% {
        opacity: 0;
        filter: alpha(opacity=0);
        -webkit-transform: rotateZ(60deg) translate(-5em, 7.5em);
        transform: rotateZ(60deg) translate(-5em, 7.5em)
    }
    80% {
        opacity: 1;
        filter: alpha(opacity=100);
        -webkit-transform: rotateZ(60deg) translate(-5em, 7.5em);
        transform: rotateZ(60deg) translate(-5em, 7.5em)
    }
    95% {
        opacity: 1;
        filter: alpha(opacity=100);
        -webkit-transform: rotateZ(60deg) translate(1em, -11em);
        transform: rotateZ(60deg) translate(1em, -11em)
    }
    to {
        opacity: 0;
        filter: alpha(opacity=0);
        -webkit-transform: rotateZ(60deg) translate(1em, -9em);
        transform: rotateZ(60deg) translate(1em, -9em)
    }
}

.btn_box {
  background: #264894;
  background: -webkit-gradient(linear,left top,right top,from(#264894),to(#0778bf));
  background: linear-gradient(to right,#264894 0%,#0778bf 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#264894', endColorstr='#0778bf',GradientType=1 );
  -webkit-box-shadow: 0 8px 18px 0 rgba(55,129,208,.53) !important;
  box-shadow: 0 8px 18px 0 rgba(55,129,208,.53) !important;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  border-bottom: 4px solid #22529a;
  text-shadow: 0 1px 0 rgba(27,174,91,.004);
  background-position: 0 100%;
  background-size: 100%;
  color: #fff;
  -webkit-transition: .5s;
  transition: .5s;
  padding: 28px 35px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  display: inline-block
}

.btn_flare {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    overflow: hidden;
}

.btn_flare:after {
    content: "";
    position: absolute;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(229,172,142,0)),color-stop(50%,rgba(255,255,255,.7)),color-stop(50%,rgba(229,172,142,0)));
    background: linear-gradient(to bottom,rgba(229,172,142,0),rgba(255,255,255,.7) 50%,rgba(229,172,142,0));
    -webkit-transform: rotateZ(60deg) translate(-5em,7.5em);
    -ms-transform: rotate(60deg) translate(-5em,7.5em);
    transform: rotateZ(60deg) translate(-5em,7.5em);
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-animation: sheens 3s infinite;
    animation: sheens 3s infinite;
    z-index: 1;
}

.btn_box:hover {
    background-size: 150%;
  border-color: #22529a;
}

Вы можете использовать этот код просто верстая собственную тему, вставить в существующую или интегрировать эффект пробегающего блика на кнопке в конструктор сайтов и страниц Elementor. Во всех случаях этот код сработает.

Важное исправление

В видео я допустил небольшую погрешность и сделал поле для ссылки простым текстовым полем. Вам нужно изменить тип атрибута с Текстовое поле, на Ссылка, обновить атрибут и обязательно нажать обновить виджет.

Unlimited Elements Link attribute

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

Ссылка кнопки с бликом и возможности динамики

Кстати, в архиве, который можно скачать в зелёном блоке выше, уже всё исправлено.

Где брать идеи эффектов

Идеи эффектов и сам код я часто ищу на сервисе Codepen. Потрясающее сообщество и платформа для демонстрации кода имеет библиотеку народного творчества, которое изумляет представленными решениями.

Напишите в комментариях какие ещё эффекты вы бы хотели реализовать и поделитесь этой статьёй на страницах в социальных сетях, своих и не только ????

Обновления статьи

Здесь буду публиковать все изменения, которые вносил в код. Архив по ссылке выше также обновляется по мере исправлений и дополнений.

11.12.2019 — Исправлено: одинаковое выравнивание для всех кнопок на странице

Привет всем! Я не считаю Хэлоуин праздником, но большинство разработчиков тем и плагинов либо сами с запада, либо работают на западный рынок и подчиняются их календарю. Некоторые из них делают специальные предложения и самое время ими поделиться.

Crocoblock — 13% только на безлимитный пожизненный тариф
Сроки: 29 октября — 3 ноября

Astra Pro — 25% на все тарифы
Сроки: 30 окрября — 2 ноября

WP Rocket — 25% для новых пользователей
Сроки: с 29 октября по 4 ноября

Schema Pro — 25% на все тарифы
Сроки: 30 окрября — 2 ноября

Ultimate Addons for Elementor — 25% на все тарифы
Сроки: 30 окрября — 2 ноября

TemplateMonster — 20% на всё
Сроки: 30-31 октября

Предвосхищая ваш вопрос об Elementor, отвечу что нет, в этот Хэллоуин скидок не будет, так что ждём Чёрную пятницу.
Да и в целом вижу тенденцию среди разработчиков не давать скидки на Halloween, а оторваться позже в ноябре.

Привет друзья! Давайте сразу так: обойдёмся без нудных клишированных вступлений вроде «в настоящее время отслеживание показателей очень важно бла-бла-бла». Ну, Come on, все знают зачем они пришли на эту страницу. Вам нужно настроить цели Google Analytics, Яндекс метрики, а также пробрасывать события для пикселей Facebook, Вконтакте и сделать это максимально просто, верно? Значит за дело!

Настройка целей — это не боль и страдание, а комплекс эффективных системных действий

Джейсон Стейтем

Итак, всё началось с того, что то руководство по настройке целей для конструктора Elementor, которое я записал, перестало работать и нужно было выкатить что-то более универсальное и отказоустойчивое. Покажу я весь процесс на примере меню WordPress и целевой страницы сделанной в конструкторе Elementor. Однако, это не означает, что инструкция применима только к этим инструментам. Благодаря ей вы поймёте общий принцип работы с Google Tag Manager и сможете настроить цели хоть на WordPress, хоть на Drupal с Joomla, хоть на чёрте лысом.

Подготовка к настройке отслеживания событий в GTM

Важный момент, чтобы не путаться в дальнейшем. Для начала нужно посмотреть на нашу целевую страницу и наметить какие именно цели мы будем отслеживать. У меня получилось так:

  1. Номер телефона в хедере;
  2. Кнопка Заказать звонок в хедере;
  3. Основная лид-форма;
  4. Номер телефона в футере;
  5. Кнопка Заказать звонок в футере;
  6. Форма заказа звонка в попапе (всплывающем окне).

План целей в Excel или Google Spreadsheet

Далее нужно сразу прописать соответствие человекопонятных названий целей их идентификаторам. В таблице так и разметил:

Человекопонятное название целиCSS селекторКатегория (Category)Действие (Action)Ярлык (Label)Идентификаторы целей метрики и событий FB/VK
Номер телефона в хедере#phone_headerCallLeadHeaderCall_Lead_Header
Кнопка Заказать звонок в хедере#getcall_headerButtonMediumHeaderButton_Medium_Header
Основная лид-форма#main_formFormLeadMainForm_Lead_Main
Номер телефона в футере#phone_footerCallLeadFooterCall_Lead_Footer
Кнопка Заказать звонок в футере#getcall_footerButtonMediumFooterButton_Medium_Footer
Форма заказа звонка в попапе#getcall_formFormLeadGetcallForm_Lead_Getcall

Разбираемся откуда взялись эти странные данные в столбцах. Первое что нужно вспомнить, так это то, как выглядит добавление целей в Google Analytics.

И сразу становится понятно откуда. В столбцах таблицы мы прописываем то, что в дальнейшем напишем при настройке отслеживания целей GA.

Что прописать в качестве идентификаторов целей?

Да что угодно и я серьёзно. Google Analytics нужно, чтобы было заполнено хотя бы одно поле любыми символами. Однако, в нашем случае более эффективно заполнить латинскими символами без пробелов, так как мы будем пробрасывать события не только в GA, но и в другие системы. Я заполнил английскими словами, мне так удобнее. Вы можете заполнять русской транслитерацией.

Вот какой логикой руководствовался я. У нас есть поле «Категория» и в данном случае я определил 3:

  1. Call — звонок. Предполагается, что при клике по номеру он и происходит;
  2. Form — форма. Тут всё понятно, заполняется какая-то форма;
  3. Button — кнопка. Нажатие кнопки.

Следующий столбец «Действие» я заполнил исходя из таких соображений:

И последнее (но не самое) поле «Ярлык». Отвечает за уточнение двух предыдущих, чтобы как-то разделить похожие действия. Сюда я просто поместил местоположение элементов, а именно: Header, Main и Footer.

Таблица разметки целей в Google Spreadsheet

В итоге мы получили уникальные комбинации для дальнейшей настройки целей. Уникальные это важно, так как от этого зависит точность отслеживания.
И вот вопрос: «а что же в 5 столбце?» А в нём я сделал простую функцию Excel СЦЕПИТЬ и объединил значения столбцов в уникальные идентификаторы, которые мы будем использовать при создании целей в Яндекс Метрике и сегментации аудиторий в Facebook и Вконтакте. Посмотреть как делал и скачать можно в этой Google таблице.

Также, в таблице есть столбец для CSS-селекторов, но их мы заполним позже так как пока вы можете запутаться.

Вам нужен Google Chrome

Все настройки я рекомендую выполнять в браузере Google Chrome, так как он специально создавался Google для его же сервисов и максимально совместим с ними. В других браузерах наблюдаются проблемы, поэтому во избежании пользуйтесь родственным софтом.

Расширение Tag Assistant для Google Chrome

Google Chrome уже наготове? Тогда установите расширение Tag Assistant. Оно поможет с проверкой размещения тега Google Tag Manager.

Расширение Помощник по пикселю Facebook для Google Chrome

Если вы будете настраивать отслеживание для Facebook, то вам также понадобится установить расширение Facebook Pixel Helper. Он поможет с проверкой пикселя и событий Facebook.

Плагин для вставки кода

Способов вставить код в WordPress превеликое множество. Мне нравится делать это через специальный плагин, так как это удобно по нескольким причинам:

  1. Не нужно лезть в код темы раз за разом. Я достаточно хорошо в этом разбираюсь, но сниппет с кодом в админке создать всяко проще;
  2. Не нужно создавать дочернюю тему только ради вставки кода;
  3. Можно смело менять темы, а сниппеты всё-равно останутся;
  4. Можно экспортировать типовые сниппеты и импортировать на другие проекты.

В разное время я пользовался разными плагинами, пока мой друг не сделал удобное для меня решение Woody ad snippets. Качаем, ставим и идём дальше.

Блокировщики рекламы

Имейте в виду, что блокировщики рекламы могут препятствовать отслеживанию. Недавно я установил приложение AdGuard для Android, которое напрочь отрубает всё отслеживание и рекламу в браузерах. В итоге пару часов потребовалось, чтобы до меня дошло почему же не срабатывают цели при заходе со смартфона.

При этом, проблем с расширением AdBlock Plus замечено не было и на ПК все события прекрасно фиксируются.

Настройка и работа с Google Tag Manager (GTM)

Что такое Google Tag Manager

Это специальный сервис от Google, который работает по принципу контейнера в который можно разместить почти любой код, который нужно выполнять на сайте или в мобильном приложении. Внутри сервиса можно задавать условия по которым будут выполняться те или иные действия. Этим мы и воспользуемся: разместим коды отслеживания Google Analytics, Яндекс Метрики, пикселей Facebook и Вконтакте, затем настроим отслеживание и передачу событий в эти системы.

Как ещё лучше понять GTM?

Хочу привести метафору из реальной жизни, чтобы вам было проще понять принцип работы Google Tag Manager. Представим себе некого парня, который хочет познакомиться с девушкой. И вот наш герой пришёл в парк, сел на лавочку в проходном месте и вдруг понял, что никогда не знакомился, поэтому, чтобы немного освоиться начал просто наблюдать за всеми людьми, просто смотреть на них. Держите эту метафору в голове, дальше мы будем неоднократно к ней обращаться.

Регистрация в Google Tag Manager

Переходим на сайт Tag Manager. Вам понадобиться аккаунт Google. Авторизуйтесь или зарегистрируйте новый. После этого увидите панель диспетчера тегов. Для начала работы нужно нажать Создать аккаунт.

Главная панель Google Tag Manager

Далее нужно заполнить данные аккаунта и контейнера:

Регистрация аккаунта и контейнера Google Tag Manager

Нажимаем Создать и подтверждаем условия соглашения.

Далее попадаем на главный экран, где видим наш аккаунт и контейнер.

Давайте разберём разницу между аккаунтом и контейнером:

Если обратиться к нашей метафоре, то Аккаунт — это все мужчины, а Контейнер — наш конкретный парень на скамейке. Вы можете создать один или несколько аккаунтов с контейнерами для ваших клиентов и отдельно для себя, чтобы навести порядок в вашем диспетчере тегов.

Размещение кода Google Tag Manager на сайт

Чтобы разместить тег на сайт нужно кликнуть по контейнеру в таблице и при первом переходе покажется всплывающее окно с кодом для вставки. Если не показалось или вы его случайно закрыли, то достаточно кликнуть по его идентификатору в верхней части рабочей области:

Код для вставки тега GTM

Видим 2 кода:

Код gtm для вставки на сайт

Копируем первую часть и идём в Консоль > Woody snippets (должен быть установлен и активирован) > Добавить сниппет > Универсальный сниппет

Пишем название сниппета, чтобы потом проще было его искать, вставляем первую часть кода, а настройки выбираем такие:

Добавление первого кода диспетчера тегов

Нажимаем Опубликовать.

Копируем второй код и создаём сниппет по тому же принципу, только на этот раз выбираем Место добавления НЕ head, а Footer. Снова жмём опубликовать.

Добавление кода диспетчера тегов GTM Noscript

Вообще, правильно вставить второй код после открывающего тега <body>, однако такое сложно реализовать в плагине ввиду разнообразия подходов авторов тем к их разработке. 100% правильно это можно сделать вставив второй код GTM в шаблон темы, но ради 0,2% людей с отключенным JavaScript оно того не стоит.

Проверка контейнера Google Tag Manager

Ранее мы установили расширение для браузера Tag Assistant. Перейдите на главную страницу вашего проекта, затем нажмите на иконку расширения в верхней панели, нажмите Enable и перезагрузите страницу.

После этого ваш контейнер должен выглядеть примерно следующим образом. Жёлтый он оттого, что в нем сейчас нет опубликованных тегов и скоро мы это исправим. Контейнер видно в ассистенте, а значит он установлен правильно.

Предварительный просмотр работы диспетчера тегов

Возвращаемся в Tag Manager и нажимаем на Предварительный просмотр.

Страница перезагрузится, а вверху появится сообщение «Предварительный просмотр рабочей области…» Теперь просто перейдите на ту страницу сайта где нужно настроить цели, если уже там, то перезагрузите её и увидите, что загрузился быстрый просмотр.

Нам пишут, что тегов пока нет и это правильно. Скоро мы это исправим.

Добавляем первые переменные

Для того, чтобы понимать что такое переменные достаточно вспомнить нашего парня, которого мы оставили в парке на скамейке. Сейчас он смотрит на всех людей и именно так работает диспетчер тегов, он всегда активен. Однако, сейчас он просто установлен и всё, без каких-либо конкретных действий.

Помним, что наш парень хочет познакомиться с девушкой и не с абы какой, а значит ему нужно определиться с параметрами подходящей особы. Рост, комплекция, цвет волос и так далее. Всё это условия по которым парень будет считать девушку красивой.

Вот и переменные нужны для того, чтобы использовать их в дальнейшем при задании условий того, подходит ли нам какое-либо действие посетителя на сайте или нет. Перейдём в раздел Переменные. В блоке Встроенные переменные нажмём Настроить.

В выдвигающейся панели найдём раздел Клики, проставим все галочки и можно закрывать эту панель.

Как видите, переменные из раздела Клики добавились в блок Встроенные переменные. Разберём каждую из них:

Понимаю, что пока может быть не понятно, но станет понятнее когда настроим триггеры.

Добавляем первые триггеры

Триггер — это спусковой крючок. Определённое действие пользователя, которое запускает некую цепочку процессов.

Что может быть триггером для действий нашего ловеласа? Девушка посмотрела в его сторону и проявила некоторые вербальные и невербальные сигналы: улыбнулась, поправила волосы, достала телефон и прихорошилась на селфи-камеру.

Настроим первый триггер. Переходим в Триггеры > Создать.

Нужно назвать триггер. Пока у меня это Клик по ссылкам. Далее кликаем по блоку настройка триггера.

В выдвигающемся блоке выберем Только ссылки. Так наш триггер будет срабатывать только при клике по ссылкам.

Дальше появится блок с настройками триггера. Пока выберем Все клики по ссылкам и нажмём Сохранить. Пока потому что хочу вам сначала показать как это работает, а уже после задавать условия.

Триггер клик по всем ссылкам

Закрываем всплывающий блок и нажимаем в правом верхнем углу рабочей области Предварительный просмотр. После переходим на сайт, перезагружаем страницу и после кликаем по любой ссылке. Только делайте это колесом мыши или с зажатым Ctrl/Cmd чтобы страница открылась на новой вкладке, иначе вы ничего не увидите.

А увидеть нужно вот что. В нашем окне предпросмотра диспетчера тегов появилось новое действие Link Click, но оно тоже пустое так как мы не определили ни одного тега. Это не хорошо и не плохо, я просто хотел вам показать что диспетчер тегов начал отслеживать клики по всем ссылкам, но пока никуда не передаёт так как мы это не настраивали. В переводе на метафору с нашим героем любовником это означает, что он начал подходить ко всем девицам, которые ему улыбнулись.

Однако, и это ещё не всё. Я специально сделал сначала отслеживание кликов по всем ссылкам, чтобы показать, как отработались наши переменные и вам стало понятно для чего мы их добавляли. Если перейти на вкладку Variables, то мы увидим ценную информацию об элементе по которому мы кликнули.

Здесь присутствуют уже знакомые нам переменные. Часть из них заполнена, а часть нет, так как эти данные просто отсутствуют в коде элемента. Собственно о коде. Давайте взглянем на него и посмотрим как заполнялись переменные. Чтобы посмотреть код, нужно нажать F12, выбрать иконку со стрелочкой и навести на ссылку, которую мы нажали.

Соответствие переменных коду элемента

Отслеживаем клик по некоторым ссылкам

Вот мы и подошли к интересному. Наш ловелас подходил ко всем девушкам, которые ему улыбались, но понял, что хочет подходить только к брюнеткам. На языке GTM это означает, что нам нужно задать условия, кстати взятые из переменных, по которым будет срабатывать триггер.

Клик по кнопке-ссылке

Начнём с того, что кнопка может быть выполнена кнопкой, например через тег <button> или ссылкой через тег <a>. У нас есть 2 кнопки Заказать звонок и чтобы понять как сделаны они, вновь прибегнем к инструменту разработчика нажав F12 и выделив кнопку стрелочкой.

Отслеживание кнопки ссылки в GTM

В моём случае кнопка сделана в конструкторе Elementor и она является ссылкой, просто выгладит как кнопка. Значит отслеживать её мы будем как клик по ссылке. Клики по другим элементам рассмотрим позже.

Сейчас у моей кнопки есть классы, которые добавил конструктор и они не годятся для отслеживания так как не уникальны и присутствуют во всех кнопках. Благо разработчики предусмотрели поле для ввода уникального ID и вот его то мы и укажем в триггере.

Задаём ID кнопки в Elementor

Обязательно вносим CSS-селектор в нашу таблицу с указанием типа селектора. Знак # перед означает, что это ID, а знак . — класс. Сохраняем изменения и смотрим что изменилось в коде.

ID кнопки для отслеживания в коде

Идём в GTM и редактируем триггер, который создавали. Делаем это для того, чтобы не удалять тот триггер, что есть, а просто изменить его.
Переименовываем на «Кнопка Заказать звонок в хедере» (см. таблицу), кликаем по настройкам триггера и на этот раз выбираем Некоторые клики по ссылкам. Далее в полях выбираем:

  1. Click ID — означает, что клик будет засчитан только при наличии у элемента значения ID;
  2. Равно — тип соответствия условию. В нашем случае точное соответствие;
  3. В моём случае getcall_header, что является ID кнопки.

Этим мы сказали триггеру, чтобы он передавал только клики по ссылкам с ID getcall_header. Как вы понимаете этот ID должен быть уникальным если вы хотите отслеживать разные элементы. При этом, GTM так и будет смотреть на клики по всем ссылкам, но передавать дальше только те, что соответствуют ID. Чтобы это понять и увидеть нам нужно добавить несколько тегов и это будут: код отслеживания Google Analytics и передача события в GA. Сохраняем изменения, закрываем выпадающее окно где мы редактировали триггер.

Добавление Google Analytics в Google Tag Manager

Важное замечание!
Если у вас подключены любые другие коды отслеживания, то перед добавлением в GTM их нужно удалить с сайта иначе статистика будет дублироваться, а на сайте могут возникать ошибки.

Потом не говорите, что не предупреждал ????

Как мы уже знаем, GTM это контейнер в который можно поместить всё, что угодно, в том числе и коды отслеживания систем аналитики. Для начала нужно зарегистрировать саму Google Analytics и я уверен, что вы справитесь с этим самостоятельно. Нам останется лишь подключить её в GTM.

Подключение Google Analytics через Google Tag Manager

Переходим в GA > Клик по шестерёнке в левом нижнем углу > Выбираем аккаунт > Выбираем ресурс > Настройка аккаунта.

В настройках ресурса копируем Идентификатор отслеживания.

Идём в GTM > Переменные > В блоке Пользовательские переменные нажимаем Создать. Называем переменную. В моём случае это «Идентификатор отслеживания GA».
Кликаем по блоку конфигурация переменной и во всплывающей панели выбираем Настройки Google Analytics.

Переменная GTM Настройки Google Analytics

Вставляем в поле Идентификатор отслеживания одноимённый уникальный код вида UA-XXXXXXXXX-X, который скопировали из Google Analytics. Поле Домен cookie оставляем по умолчанию auto. Сохраняем настройки.

Переменная GTM идентификатор GA

Google tag Manager теперь знает нашу аналитику, но пока не передаёт никаких данных. Чтобы это исправить идём в Теги > Создать.

В открывшемся окне пишем название тега, у меня это «Отправка данных в GA» и кликаем по блоку Конфигурация тега. Откроется боковая панель и в ней нужно выбрать Google Аналитика – Universal Analytics. Далее в блоке конфигурации нужно выбрать:

Теперь нажимаем на блок Триггеры и в выезжающей панели выбираем All Pages. Так мы задействуем наш код отслеживания Google Analytics на всех страницах сайта.

Отслеживание всех страниц GTM

Сохраняем тег, нажимаем Предварительный просмотр идём на сайт и перезагружаем страницу. Наконец-то видим изменения в предварительном просмотре.

Сработал тег отслеживания GA

Сработал тег отправки данных в Google Analytics и если сейчас перейти в GA, нажать Отчёт в реальном времени, то в разделе общие вы увидите, что прямо сейчас на сайте некоторое количество посетителей отличное от нуля.

Вернёмся на сайт и в предварительном просмотре переключимся в раздел Page View. Далее нажмём на задействованный тег Отправка данных в GA.
Видим зелёную галочку. Она свидетельствует об успешной отправке данных. Ниже видим задействованные триггеры и среди них знакомый нам All pages, который мы и выбирали при создании тега в GTM для GA.

Предварительный просмотр All pages

Итак, данные поступают в Google Analytics, а значить можно отправлять в неё события. Тем более наша кнопка уже заждалась, когда мы к ней вернёмся.

Отправка событий из Google Tag Manager в Google Analytics

Есть кнопка и триггер по её ID, есть подключенная GA и мы готовы отправить в неё событие.
Теги > Создать. Название берём из таблицы «Кнопка Заказать звонок в хедере».
Нажимаем Конфигурация тега и выбираем Google Аналитика – Universal Analytics.

Этими настройками мы дали задание GTM отправлять событие на наш идентификатор GA с определёнными параметрами. Теперь осталось выбрать триггер.
Клик по блоку Триггеры > выбираем Кнопка Заказать звонок в хедере. Выходит, что и триггер и тег называются одинаково, чтобы точно понимать какой триггер для какого тега.

Настройка передачи событий из GTM в GA с триггером

Снова Сохраняем, жмём Предварительный просмотр и обновляем страницу сайта. А теперь кликнем по ссылке для которой триггер НЕ задан и следом по нашей кнопке. В предварительном просмотре появилось 2 события Link Click. Если выберем первое, то увидим Tags Fired On This Event — None, ну а если второе, то видим, что тег сработал:

Тег GTM сработал по ID тригеру

Ну и самое главное. Заходим в Google Analytics > Отчёты в реальном времени > События и видим то самое событие с теми самыми идентификаторами. Это уже 80% успеха 🙂

Однако, событие это ещё не конверсия (цель) и их нам предстоит настроить позже когда закончим с передачей событий всех элементов на лендинге и некоторых других.

Я не показываю как настраивал вторую кнопку в подвале так как это делается по тому же принципу. Разница лишь в CSS-ID и идентификаторах событий.

Отслеживаем клик по номеру телефона

Казалось бы, всё должно быть просто, номер телефона — та же ссылка и настроить её можно было как и кнопку, но в моём случае к этой ссылке нельзя добавить ID. Перейдём в конструктор Elementor и взглянем на виджет.

У этого виджета есть только ID контейнера, а ID ссылки вставить невозможно. Взглянем на код:

Код кнопки Elementor

Добавленный мной ID сильно далеко от нашей ссылки. И тут вопрос: «с чего я взял, что клик происходит именно по ссылке?». А вот с чего. Если кликнуть по номеру и обратиться к предварительному просмотру на вкладке Variables, то увидим, что в Click URL вернулось значение номера телефона с протоколом tel:

Определение ссылки в предпросмотре GTM

Отслеживаем ссылку на номер телефона или электронную почту по протоколу tel или mailto

Важное ответвление инструкции для тех у кого один номер или НЕ нужно отслеживать клики по номерам в разных местах. Покажу быстро и только на примере создания триггера, так как настройка отправки данных аналогична кнопке-ссылке.

GTM > Триггеры > Создать > Пишем название триггера и жмём на блок Настройка триггера. В боковой панели выбираем Только ссылки. Условия активации триггера — Некоторые ссылки.
Активировать триггер при наступлении события и выполнении всех этих условий:

  1. Click URL
  2. содержит
  3. tel:
Триггер клик по ссылке с tel

После создаём тег отправки события в GTM и целей как я покажу далее. Google tag Manager будет отправлять в это событие все клики по ссылкам с tel:

Кстати, аналогичным образом можно отслеживать и ссылки с протоколом mailto: для адресов электронной почты.

Отслеживание кликов в GTM по DOM селектору

Вернёмся к нашей ссылке, которой нельзя присвоить ID. Здесь нужно ввести такое понятие как DOM — Document Object Model. Каждый элемент в HTML документе является объектом. Некоторые объекты являются родительскими, а некоторые дочерними.
В нашем случае тег <a> является дочерним (вложенным) объектом родительского объекта с ID #phone_header. Модель DOM позволяет обратиться к родительскому элементу с ID через вложенный элемент. Сейчас станет более понятно как это.

Переходим на сайт, жмём F12 и смотрим код номера телефона. Выбираем ссылку и нажимаем правой кнопкой мыши > Copy > Copy selector. У меня получился такой селектор phone_header > div > div > a

Копирование селектора в инструментах разработчика

Переходим в GTM > Триггеры > Создать. Название — Номер телефона в хедере. Клик по Настройка триггера > выбираем Только ссылки.
Условия активации триггера — Некоторые клики по ссылкам. Условия:

  1. Click Element
  2. соответствует селектору CSS
  3. #phone_header > div > div > a
Создание триггера клик по css селектору

Нажимаем сохранить и идём делать тег. Делаем его по аналогии с кнопкой. Скрины приводить не буду, напишу алгоритм:

  1. Теги > Создать;
  2. Название тега — Номер телефона в хедере;
  3. Конфигурация тега > Тип тега Google Аналитика – Universal Analytics;
  4. Тип отслеживания — Событие;
  5. Параметры отслеживания событий (берём из таблицы):
    1. Категория — Call;
    2. Действие — Lead;
    3. Ярлык — Header;
  6. Не взаимодействие — False;
  7. Настройки Google Analytics — выбираем переменную с кодом отслеживания GA;
  8. В качестве триггера выбираем одноимённый тегу Номер телефона в хедере;
  9. Сохраняем тег;
  10. Жмём предварительный просмотр и перезагружаем страницу на сайте.

Клик по ссылке и видим, что тег отработал как часы.

Проверка тега при клике по css-селектору

А в Google Аналитике появилось новое событие:

Событие GA при нажатии на номер телефона

Для номера телефона в футере я проделаю всё то же самое фоном. Там ведь аналогично кнопке меняется лишь CSS селектор и идентификаторы событий, примеры которых вы найдёте в таблице.

Отслеживание в GTM кликов по произвольным объектам

Немного отступим от нашей первоначальной структуры лендинга и разберём пример, когда вам нужно отследить клик по объекту, который ссылкой не является. Например, изображение или абзац с текстом. Некоторые кнопки также могут быть сделаны не ссылкой, а тегом <button>. В этом случае она тоже является объектом.
Настройка происходит аналогично за исключением лишь одного нюанса — при создании триггера нужно выбрать не Только ссылки, а Все элементы. Приступим!

Триггеры > Создать. Называем, к примеру, «Клик по картинке». Нажимаем на настройку триггера и в боковой панели выбираем Все элементы.

Триггер клик по всем элементам

Вновь видим знакомые опции: Все клики и Некоторые клики. Я выбрал некоторые клики. Далее задал ID custom_element в настройках Elementor как и показывал ранее в случае с DOM-объектами. Снова скопировал селектор, получился такой custom_element > div > div > img. Вставил селектор в поле соответствия. Ничего нового, всё как ранее.

Триггер клик по объекту через css селектор

Тег вы уже вполне можете создать самостоятельно, мы это уже делали. Я лишь покажу, что у меня получилось.

Тег для клика по объекту

Разумеется после этого нажимаем Предварительный просмотр и идём перезагружать страницу сайта. Теперь, если кликнуть в любом месте GTM фиксирует эти клики, но никуда не отправляет. ровно аналогичная ситуация с ссылками.

GTM фиксирует клики по всем объектам

Однако, стоит кликнуть по картинке и мы увидим, что GTM отследил событие и отправил его в Аналитику.

Клик по объекту и отправка в аналитику

Как видите, всё просто и аналогично тому, что мы делали с ссылками. Разница лишь в том, что мы выбрали в триггерах.

Отслеживание заполнения форм в Google Tag Manager

У нас остались 2 формы: основная по центру и в попапе. Настраиваются они аналогично, поэтому разберём только основную.

В настройках формы того же Elementor Pro есть поле для ввода ID. Заполнять нужно без #.

ID для формы Elementor Pro

После этого идём в GTM > Переменные и добавим стандартные переменные для форм. В блоке Встроенные переменные нажимаем Настроить, в боковой панели ищем раздел Формы и прокликиваем всё пункты.

Переменные для отслеживания форм

По старой традиции идём создавать триггер. Название — Основная лид-форма, как и написано в таблице. Кликаем по блоку Настройка триггера и выбираем Отправка форм.

Триггер GTM отправка формы

Далее, по аналогии с кнопками-ссылками заполняем условия активации триггера. Выбираем Некоторые формы и задаём:

  1. Form ID — означает, что заполнение формы будет засчитано только при наличии у формы указанного ID;
  2. Равно — тип соответствия условию. В нашем случае точное соответствие;
  3. В моём случае main_form, что является ID кнопки.
Условный триггер GTM для отправки формы

Традиционно создаём Тег, называем как в таблице «Основная лид-форма». Нажимаем Конфигурация тега и выбираем Google Аналитика – Universal Analytics.

Клик по блоку Триггеры > выбираем Основная лид-форма.

Тег отслеживания форм GTM

Сохраняем предпросмотр, обновляем страницу и пробуем заполнить форму. Видим новый тип события Form Submit и уведомление о том, что наша форма улетела в GA.

Отслеживание заполнения форм предпросмотр GTM

Ну и доказательство из Google Analytics:

Отслеживание заполнения форм события в Google Analytics

Примечательно то, что данные улетают в GA только после успешной отправке, что исключает ложные срабатывания. Отправка данных работает даже если вы настроили переадресацию после отправки. Единственное, вы вы не сможете увидеть событие в предпросмотре, но увидите событие в Googlе Аналитике.

Отслеживание форм в попапе Elementor

Хочется отдельно упомянуть то, что отслеживание форм описанное выше, работает и во всплывающих окнах Elementor Pro. Знаю у пользователей были с этим проблемы и Google Tag Manager их решает. Главное всё правильно настроить и задать ID формы в попапе. В моём случае это #getcall_form.

Я всё проверю и создам цель фоном, чтобы не тратить время. Покажу вам лишь результат в предпросмотре:

Отправка данных заполнения формы в попапе

И Google Аналитике:

События по заполнению формы в попапе Elementor

Отслеживание форм Contact Form 7

Предвижу вопросы касательно отслеживания заполнения форм, сделанных плагином Contact Form 7.

Отслеживание кликов по пунктам меню WordPress

Формы, ссылки это конечно хорошо, но порой нужно отслеживать клик по пункту меню WordPress. Это может понадобиться, к примеру, для построения воронки действий пользователя от клика по пункту меню до заказа. Также, по пункту меню может открываться попап и можно тоже строить воронку на его открытие и целевое действие уже внутри всплывающего окна. На самом деле, всё что угодно можно отслеживать. Тут, как говорится: «был бы кейс, а применение найдётся».

Как и в случае с номером телефона сделанным в Elementor, пункт меню тоже не имеет отдельного ID/класса и задать его весьма проблематично. Здесь на помощь приходят переменные Click Text и Click URL. Мы привяжемся к тексту пункта меню и ссылке на которую он ведёт.

Для начала перезагрузим страницу и кликнем по любому пункту меню. У меня это Каталог. Нужно кликать с зажатым Ctrl/Cmd или по колесу мыши, чтобы ссылка открылась на новой вкладке.
Обратимся к предпросмотру, кликнем по событию Link Click и перейдём на вкладку Variables. В моём случае видим, что:

К этим данным и привяжемся. Идём в триггеры, создаём новый, называем, выбираем тип Клик только ссылки и Некоторые ссылки. Заполняем условия:

  1. Click Text — Содержит — Каталог;
  2. Click URL — Содержит — katalog.
Условия триггера клик по пункту меню WordPress

Второе условие добавил нажав на клик по иконке +.
Зачем 2 условия? Дело в том, что пункты меню больше всего подвержены переменам и два условия для подстраховки. Имейте в виду, что если пункт меню и слаг (содержание ссылки) целевой страницы изменятся, то событие перестанет улетать в GA.

Кстати о ней. Давайте делать Тег для отправки кликов по пунктам меню в Google Analytics. Алгоритм аналогичен ссылкам и вы уже справитесь сами, а я лишь покажу как получилось у меня:

Думаю, доказательства того, что всё улетает в GA больше не нужны ????

Отслеживание кликов по внешним ссылкам

Внешняя ссылка — это любая ссылка, адрес которой не равен адресу нашего сайта. Чтобы понимать по каким внешним ссылкам кликают больше можно создать событие и затем анализировать его через Google Analytics. Что с этим делать потом — ваше дело, но я бы использовал так:

Это уже стало рутиной, но что ж поделаешь надо закончить. Идём в Триггеры > Создать. Назовём его «Клики по внешним ссылкам». Тип триггера — Клик-Только ссылки. И условия клика по некоторым ссылкам такие:

  1. Click URL — переменная в которую подставляется ссылка по которой кликнули;
  2. не содержит — условие, которое необходимо чтобы отсеять все клики по внутренним ссылкам;
  3. test.wplovers.pw — домен, который не нужно отслеживать (у вас будет свой);
Триггер GTM клик по внешним ссылкам

Бывают случаи когда у вас есть несколько сайтов и вы не хотите отслеживать переходы и на них тоже. В этом случае нужно использовать регулярные выражения и тогда если я хочу исключить из внешних ссылок test.wplovers.pw и wplovers.pw, необходимо задать следующие условия:

  1. Click URL;
  2. не соответствует регулярному выражению;
  3. test.wplovers\.pw|wplovers\.pw.
Триггер GTM клик по внешним ссылкам с регулярным выражением

Создадим Тег типа Событие и в Параметры отслеживания событий напишем:

На последнем я бы остановился подробнее. Тут всё просто — это переменная в которую подставится адрес ссылки по которой будет произведён клик и эта ссылка будет передаваться в Google Analytics. Вот, что получилось в моём теге:

Тег GTM клик по внешним ссылкам передача в GA

Естественно сохранил Тег и Предварительный просмотр. На сайт создал небольшой текст куда добавил 3 ссылки:

  1. test.wplovers.pw
  2. wplovers.pw
  3. google.com

Перезагрузил страницу, кликнул по всем ссылкам, но отработалась только внешняя на google.com

Предпросмотр клик по внешним ссылкам передача в GA

В итоге в отчётах Google Аналитики это выглядит так:

Клик по внешним ссылкам отчет в GA

Внешние ссылки отправляются в GA и теперь осталось настроить отчёты в ней или для более визуального представления — в Googole Data Studio.

Подключение и отслеживание сторонних сервисов

Далее рассмотрим подключение сервисов, которые не относятся к Google, а именно: Яндекс Метрика, Facebook и Вконтакте.

Важное замечание!
В этом блоке я покажу как отслеживать цели и события сторонних сервисов в том случае, если вам НЕ нужна Google Analytics. Если вы используете все сервисы сразу, то из этого блока вам понадобится лишь то, как подключать коды отслеживания и пиксели. Как передавать данные во все системы одновременно, есть отдельный блок ниже.

Договорились? Тогда идём дальше!

Подключение Яндекс Метрики через Google Tag Manager

Алгоритм прост до безобразия. Сначала зарегистрируйте Яндекс Метрику. Уверен, вы с этим без проблем справитесь.

Копируем код в настройках счётчика Яндекс Метрики:

Код Яндекс Метрики

Идём в GTM > Теги > Создать. пишем понятное название. Я сделаю «Отправка данных в ЯМ» по аналогии с Google Analytics. Жмём на блок Конфигурация тега и в боковой панели выбираем Пользовательский HTML.

Тип триггера GTM Пользовательйский HTML

Вставляем код метрики в большое поле

Код метрики в GTM

Кликаем по блоку триггеры и выбираем уже знакомый нам All Pages.

Триггер All pages

Сохраняем Тег и вот тут внимание. Поскольку Яндекс Метрика является сторонним сервисом, просто нажать Предварительный просмотр недостаточно.

Принцип сохранения изменений в рабочей области Google Tag Manager

Дело в том, что до этого все изменения, которые мы делали, хранились в виде предпросмотра. Считайте это черновиком. Этот предпросмотр доступен только при условии, что мы входим на сайт в том же браузере и мы с вами наблюдали его работу в панели предпросмотра. То же самое касается Google Analytics. Поскольку мы делаем всё в рамках одного Google-аккаунта данные без проблем долетают и до GA. Однако, сторонние сервисы не увидят никаких изменений пока мы не опубликуем их. На этот раз нужно нажать Отправить в правом верхнем углу рабочей области GTM.

Функция отправить в GMT

Сохранение работает по принципу системы контроля версий, где каждая публикация — это отдельная версия. Сделано это для того, чтобы можно было увидеть, что мы делали в каждой версии и не держать это в голове.

К слову, в повседневной практике я стараюсь выполнять и публиковать действия смысловыми группами, чтобы проще было ориентироваться и вспомнить, «что же я делал вчера?..» ???? В данном же руководстве я публиковал всем скопом и то только когда припекло. Просто имейте это в виду и выработайте в этом плане свою систему.

Итак, нажали Отправить и появилось окно где нам предложили назвать версию, добавить более полное описание и показали состав версии. Я написал лишь название и нажал Опубликовать.

Отправка версии рабочей области GTM

Увидим приблизительно такую картину и чтобы вернуться в рабочую область нажмём на ссылку вверху.

Информация о опубликованной версии GTM

Ах да! Яндекс метрика же… ????Проверяем работу счётчика Метрики. Переходим в Счётчики > Мои счетчики и нажимаем на значок обновить возле счётчика. У вас он скорее всего будет красным или оранжевым, но после обновления должен позеленеть. Если это произошло, то попробуйте перезагрузить страницу и повторить проверку. Если всё равно не зеленеет, то вы сделали что-то не так либо на этапе установки кода GTM, либо счётчика Метрики.

Проверка счётчика Яндекс Метрика

Счётчик готов, переходим к настройке отправки событий в Яндекс Метрику.

Отправка событий из Google Tag Manager в Яндекс Метрику

Принцип отправки событий очень похож с тем, что мы делали для Google Analytics. Если вы используете только Яндекс Метрику, то имейте в виду, что у вас также должны быть настроены Переменные и Триггеры, так как это основные условия работы GTM. Благо мы это уже делали выше и теперь лишь осталось создать Теги GTM для каждого целевого действия на сайте. Я создам лишь некоторые, остальные делаются аналогично.

Теги > Создать. Называем тег так, чтобы было понятно. У меня будет «ЯМ — Номер телефона в хедере». Конфигурация тега > Специальные > Пользовательский HTML. В поле нужно вставить специальный код. Я взял его из справки Яндекса, чтобы вы понимали.

<script>
	ym(XXXXXX, 'reachGoal', 'TARGET_NAME');
</script>

Кликаем по блоку триггеров и выбираем триггер, соответствующий действию. У меня это «Номер телефона в хедере». Должно получиться так:

Настройка отправки события в Яндекс метрику

Имейте в виду, что приведённый выше код работает как для ссылок так и для форм, поскольку Яндекс Метрике по сути без разницы, что вы отслеживаете. Ей важно, что прилетело какое-то событие и на это событие создана цель (созданием целей Метрики мы займёмся в отдельном блоке ниже). Захватом событий разного типа, как вы помните, у нас занимается GTM за счёт Переменных и Триггеров. После, через настройку тега мы передаём эти события дальше.
Отправка остальных событий делается по аналогии. Я создам события для кнопки в хедере и формы в попапе уже без вашего участия и конечно же нажму Отправить, чтобы новые настройки улетели в чистовик и Метрика их увидела.

Перезагружаем страницу и проверяем события. Покажу только клик по номеру в шапке:

Отработка тегов GTM

Видим, что отработались 3 тега:

  1. Клик по внешним ссылкам, так как номер телефона считается внешней ссылкой, ибо не добавлен в исключения триггера;
  2. Номер телефона в хедере — улетело в GA;
  3. ЯМ — Номер телефона в хедере — улетело в ЯМ.

Имейте в виду, что изменения в Метрике вы увидите только после создания целей. Самые нетерпеливые могут перейти в раздел статьи, создать цель и проверить её. Ну, а мы пока займёмся Фейсбуком.

Подключение пикселя Facebook через Google Tag Manager

До того как подключить пиксель Facebook через Google Tag Manager у вас должен быть создан рекламный аккаунт. После этого переходите в Events Manager, увидите примерно такое:

Менеджер событий Facebook

Жмём на кнопку, выбираем «Добавление кода пикселя на сайт вручную». Копируем код, но окно пока не закрываем.

Код пикселя Facebook

Идём в GTM и по аналогии с Яндекс Метрикой создаём Тег, называем «Пиксель Facebook» и в качестве конфигурации выбираем Пользовательский HTML. Вставляем код пикселя Facebook в основное поле.
Раскрываем спойлер Расширенные настройки и в списке Настройки активации тега выбираем Один раз на страницу (это важно!).
Нажимаем на блок триггеры и выбираем знакомый All Pages.

Добавление тега GTM для пикселя Facebook

Сохраняем тег и нажимаем Отправить в правом верхнем углу. Называем и публикуем версию и идём обратно на Facebook.

Отправить тестовый трафик Facebook

А на Фейсбуке у нас открытое окно с кодом. Нужно прокрутить вниз, вставить ссылку на сайт в поле для проверки пикселя и нажать Отправить тестовый трафик. Откроется страница и во первых, в Предварительном просмотре отобразится событие с пикселем Facebook, а во-вторых — в окошке на Фейсбуке появится надпись Активен.

Проверка пикселя Facebook

Дальше нам предложат настроить события, но мы будем отправлять свои, а Facebook подхватит их автоматически, поэтому на этом шаге нажимаем Отмена.

Отправка событий из Google Tag Manager в Facebook

Пора отправить наши события в Фейсбук. Для этого в GTM нужно снова создать тег. Я назову его по аналогии с Метрикой — «FB — Номер телефона в хедере». В качестве конфигурации вновь выбираем Пользовательский HTML. Вставляем этот код в основное поле, ID события меняем на своё из таблицы.

<script>
  fbq('trackCustom', 'ID события');
</script>

В данном случае, тип события trackCustom применяется поскольку мы используем свои, неизвестные Фейсбуку идентификаторы событий.

Раскрываем спойлер Расширенные настройки и в списке Настройки активации тега выбираем Один раз на событие (это важно!). Открываем ещё один спойлер Порядок активации тегов, ставим галочку перед Активировать тег перед тегом… , нажимаем Выбрать тег и в боковой панели выбираем наш тег с Пикселем Facebook.
Это необходимо для того, чтобы тег отслеживания активировался только после полной загрузке пикселя.

Нажимаем на блок триггеры и выбираем тот триггер, для которого мы отправляем событие. В моём случае «Номер телефона в хедере». В итоге получится так:

trackCustom в Facebook через GTM

Остальные события добавляются аналогично и не важно форма это или ссылка. Публикуем версию контейнера, идём на сайт, перезагружаем страницу, выполняем целевое действие.

Событие в Facebook ушло

Данные в Facebook улетели и чтобы точно в этом удостоверится, воспользуемся помощником по пикселю. Клик по иконке в панели браузера покажет такое:

Помощник по пикселю Facebook

Видим, что были захвачены просмотр и выполнение нашего события, а если кликнуть View Analytics, то попадём в раздел с графиком и отчётами по пикселю и событиям. Я выполнил несколько целевых действий и вот, что вышло:

Статистика по пикселю Facebook

В списке отражаются посещения и события. Что с ними делать поговорим ниже. Имейте в виду, что появятся они с небольшой задержкой и пока вы ждёте можно настроить пиксель и отправку событий в Вконтакте.

Подключение пикселя Вконтакте через Google Tag Manager

Здесь всё аналогично Фейсбуку, лишь интерфейсы другие. Перейдите в раздел Ретаргетинг рекламного кабинета Вконтакте. Если вы не собирали аудитории, то у вас там будет пусто, но нам сейчас нужно перейти в раздел Пиксели.

Просмотр аудиторий 
ретаргетинга Вконтакте

Далее нажимаем Создать

Список пикселей Вконтакте

Во всплывающем окне вводим название, вставляем домен где будет работать пиксель без протокола http/https, выбираем тематику сайта и нажимаем Создать.

Создание пикселя Вконтакте

В появившемся окне копируем код и идём в GTM > Теги > Создать. Называем «Пиксель Вконтакте», и в качестве конфигурации выбираем Пользовательский HTML. Вставляем код пикселя VK в основное поле.
Раскрываем спойлер Расширенные настройки и в списке Настройки активации тега выбираем Один раз на страницу (это важно!).
Нажимаем на блок триггеры и выбираем знакомый All Pages.

Добавление пикселя Вконтакте в GTM

Сохраняем тег и нажимаем Отправить в правом верхнем углу. Называем и публикуем версию, идём обратно в Вконтакте и закрываем всплывающее окно.
В таблице должен появиться наш пиксель, но какое-то время он будет со статусом неактивен. Нужно подождать пока статус изменится на работает.

Статус пикселя Вконтакте

Кстати, пока проверяется пиксель Вконтакте, можно настроить отправку событий из GTM в VK.

Отправка событий из Google Tag Manager в Вконтакте

Вконтакте молодцы так как не пихают всё в один пиксель, что экономит драгоценные миллисекунды при загрузке страницы на случай, если вам нужно лишь собирать аудиторию. Однако, чтобы отслеживать события нужно подключить библиотеку JS API ВКонтакте и инициализировать код пикселя.

Асинхронное подключение JS API ВКонтакте и инициализация кода пикселя ретаргетинга

Идём в GTM и нужно снова создать тег. Я назову его — «JS API ВКонтакте». В качестве конфигурации вновь выбираем Пользовательский HTML. Вставляем этот код в основное поле:

<div id="vk_api_transport"></div>
<script>
  var pixel;

  window.vkAsyncInit = function() {
    pixel = new VK.Pixel('VK-XXXX-XXXXX-XXXXXXX');
  };

  setTimeout(function() {
    var el = document.createElement("script");
    el.type = "text/javascript";
    el.src = "https://vk.com/js/api/openapi.js?159";
    el.async = true;
    document.getElementById("vk_api_transport").appendChild(el);
  }, 0);
</script>

где VK-XXXX-XXXXX-XXXXXXX — это уникальный код пикселя ретаргетинга и вот где его взять.

Кликните по названию пикселя в таблице и нажмите редактировать.

Редактировать пиксель Вконтакте

Откроется окно редактирования пикселя. Нам нужен уникальный код пикселя.

Уникальный код пикселя

Копируем и вставляем его в наш код. У меня получилось так:

<div id="vk_api_transport"></div>
<script>
  var pixel;

  window.vkAsyncInit = function() {
    pixel = new VK.Pixel('VK-RTRG-402045-1QhpY');
  };

  setTimeout(function() {
    var el = document.createElement("script");
    el.type = "text/javascript";
    el.src = "https://vk.com/js/api/openapi.js?159";
    el.async = true;
    document.getElementById("vk_api_transport").appendChild(el);
  }, 0);
</script>

Перестрахуемся и запустим подключение после пикселя.
Раскрываем спойлер Расширенные настройки и в списке Настройки активации тега выбираем Один раз на страницу . Открываем ещё один спойлер Порядок активации тегов, ставим галочку перед Активировать тег перед тегом… , нажимаем Выбрать тег и в боковой панели выбираем наш тег с Пикселем Вконтакте.

Нажимаем на блок триггеры и выбираем уже набивший оскомину All Pages. И вот, что должно получиться:

Подключение JS API и инициализация пикселя Вконтакте

Сохраняем тег и идём дальше.

Отправка событий в ВК, наконец-таки

Тут всё аналогично Фейсбуку, поэтому покажу быстро. GTM > Cоздать тег. Назову его — «ВК – Номер телефона в хедере». В качестве конфигурации вновь выбираем Пользовательский HTML. Вставляем этот код в основное поле, ID события меняем на своё из таблицы.

<script> 
    VK.Retargeting.Event('ID события'); 
</script>

Для перестраховки раскрываем спойлер Расширенные настройки и в списке Настройки активации тега выбираем Один раз на событие (это важно!). Открываем ещё один спойлер Порядок активации тегов, ставим галочку перед Активировать тег перед тегом… , нажимаем Выбрать тег и в боковой панели выбираем наш тег с JS API.

Нажимаем на блок триггеры и выбираем тот триггер, для которого мы отправляем событие. В моём случае «Номер телефона в хедере». В итоге получится так:

Создание тега отправки событий из GTM в VK

Я создал такое же событие для формы обратного звонка в попапе так как все события создаются аналогично, разница лишь в триггерах. Публикую версию контейнера и идём смотреть на сайт.

События на сайте после добавления пикселя ВК

Видим отработанные события при открытии сайта. Теперь выполняем целевое действие.

Cобытия по клику GTM

Видим, что Google Tag Manager успешно отработал события, но передал ли в ВК?

Как ещё проверить улетает ли событие в Вконтакте?

К сожалению, но для Вконтакте нет инструментов проверки таких как для GTM и Facebook, однако, можно проверить событие с помощью Инструмента разработчика. Вызываем его по F12, переходим на вкладку Network, перезагружаем страницу и выполняем целевое действие. В окне появилась куча событий и чтобы отфильтровать вводим в окно поиска vk. В итоге должно остаться несколько событий. Часть из них относятся к событию просмотра страницы, а часть — к целевому действию. На скриншоте видно, что в запросе присутствует ID пикселя и ID события, а также Status Code: 200 с зелёным шариком, что свидетельствует о том, что событие успешно передано.

Проверка передачи событий в инструменте вебмастеров

С Вконтакте у нас всё. В разделе про цели и аудитории я расскажу, что делать с этими событиями, а пока пару слов про MyTarget.

Настройка MyTarget через Google Tag Manager

А её не будет. Система не такая популярная, поэтому я решил сэкономить силы и время. Сделал этот блок только ради того, чтобы написать что так тоже можно.
Нужно лишь смотреть руководство по созданию счётчиков, пикселей и аудиторий MyTarget, а подключать в GTM аналогично вышеприведённым инструкциям. Думаю, вы уже поняли, что они похожи.

Если от вас будет много просьб, тогда дополню этот раздел подробной инструкцией. А пока идём настраивать цели, конверсии и аудитории.

Цели, конверсии, аудитории

Итак, события успешно «улетают» во все основные системы, и мы готовы настроить цели и аудитории в соответствии с полученными данными. Начнём в том же порядке — с целей Google Analytics.

Настройка целей Google Analytics

Помните как мы настраивали события GTM и отправляли их в Google Аналитику? Так вот, цели должны настроиться с теми же идентификаторами и тогда это уже будут не просто события, а цели.

Идём в настройки Google Analytics и в блоке Все данные по веб-сайту выбираем Цели.

Настройки цели GA

Кликаем добавить цель.

Добавить цель GA

В мастере создания цели выбираем следующее:

  1. шаг. Установка цели — Вместо шаблона выбираем Собственная (в самом низу) > Далее;
  2. шаг. Описание цели — пишем название из нашей таблицы, Тип выбираем Событие > Далее;
  3. Подробные сведения о цели:
    1. Категория — Call;
    2. Действие — Lead;
    3. Ярлык — Header.

Вот, что должно получиться. На последнем шаге нужно нажать сохранить.

Создание цели в Google Analytics

Идём на сайт, перезагружаем страницу и выполняем целевое действие. В отчётах в реальном времени > Конверсии, появилась новая конверсия в соответствии с целевым действием.

Отчет в реальном времени GA конверсии

Остальные цели создаются по тому же принципу и просто имейте в виду, что если вы удачно передали событие в GA на одном из предыдущих шагов, то это уже 80% успеха. Останется лишь сопоставить События с Целями и дело в шляпе.

Настройка целей в Яндекс Метрике

Настроим цели Метрики. Для этого в списке счётчиков нажимаем шестерёнку:

Переход в настройки Яндекс Метрики

Из настроек идём в цели метрики

Переход к целям Метрики

Нажимаем Добавить цель и во всплывающем окне пишем название из таблицы. Если вы настраиваете цель для последующей настройки ретаргетинга в Яндекс Директ, то поставьте соответствующую галочку, это упростит настройку. Тип условия выбираем JavaScript-событие и вписываем идентификатор из таблицы.

Добавление цели Яндекс Метрики по событию

Входим на сайт в режиме инкогнито либо в том браузере, где вы не авторизованы в Яндексе. Это важно так как иначе цель не будет засчитана. Кликаем по номеру телефона или что вы там настраиваете и спустя некоторое время (иногда нужно подождать минут 10-15) видим, что конверсия сработала. Смотреть нужно в Метрике > Отчёты > Стандартные отчёты > Конверсии.

Отчёт конверсии в Яндекс Метрике

Составная цель в Яндекс Метрике

Я неспроста сделал клик по кнопке промежуточным событием так как сам клик не является конверсионным действием. В Яндекс Метрике есть составные цели, которые позволяют выстроить воронку движения посетителя до целевого действия. Создаём!

Также идём в Настройка > Цели > Добавить цель. Название у меня будет «Заказ звонка в попапе — кнопка в хэдере», ретаргетинг вновь на ваше усмотрение, а вот Тип условия как раз Составная цель.

Составная цель Яндекс Метрики

Снова смотрим сайт в режиме инкогнито, кликаем по кнопке, заполняем форму и в отчётах видим:

Отчёт о конверсиях по составным целям Яндекс Метрики

У меня вышло 2 заполнения формы так как Метрика долго обновляла статистику и пришлось перепроверить. Кнопку кликнул 3 раза, чтобы показать как выглядит отчёт если попап открыл, а форму не заполнил. Как это использовать?

Яндекс Метрика — всё. На очереди Facebook.

Что делать с событиями Facebook

Мы отправляем данные в Facebook по нескольким причинам:

  1. Сбор аудитории для ретаргетированной рекламы в Facebook;
  2. Поиск похожей аудитории для рекламы на основе собранной, чтобы повысить охват;
  3. Анализ посещаемости;
  4. Отслеживание конверсий и эффективности рекламы.

Да-да, сейчас аналитическая система Facebook — это некий аналог Google Analytics. Итак, что же можно сделать после того как события отправлены.

Создание конверсий Facebook

Как и в случае с Google Аналитикой, в Фейсбук прилетают события, он их фиксируют, но они аморфны и нужно решить что это будет. Тем более, что мы использовали не стандартные события от Фейсбук, а произвольные. Поэтому нужно создать конверсии сопоставив им события, чтобы и мы и Facebook понимали, что это за действие.

На главном экране Events Manager нужно нажать создать конверсию.

Создание конверсии в Events Manager Facebook

В открывшемся окне, в выпадающем списке нужно выбрать одно из зафиксированных событий.

Выбор события конверсии Facebook
Заполнение данных конверсии Facebook

После того как нажимаем создать, выйдет окно с оповещением о том, что конверсия создана и её можно использовать в рекламном аккаунте. Реклама в Facebook — отдельная песня и здесь мы её разучивать не будем.

Теперь в отчёте по специально настроенным конверсиям появились только что созданные и уже пошла статистика.

Отчет по специально настроенным конверсиям Facebook

Создание аудиторий Facebook на основе событий

Понятно дело, что просто конверсии вам возможно и не нужны. Нужнее на их базе создавать аудитории ретаргетинга. Вот несколько примеров использования:

Кликаем в панели Events Manager Создать аудиторию > Пользовательская аудитория.

Создание пользовательской аудитории Facebook

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

Связать пиксель с рекламным аккаунтом Facebook

Перейдите по ссылке в сообщении и в разделе Пиксели зайдите в Связанные объекты и выберите там ваш рекламный аккаунт. Его конечно же нужно перед этим создать, но эта статья не об этом.

Связь рекламы с пикселем Facebook
Связь рекламы с пикселем Facebook 2

Также нужно разрешить пользователю управлять пикселем

Связь пользователя с пикселем Facebook
Разрешение пользователю управлять пикселем Facebook

После этого добавление аудиторий должно заработать и вы увидите такое окно. Выберите в нём рекламный аккаунт и нажмите Далее.

Выбор рекламного аккаунта Facebook

Рядом с пикселем должен быть зелёный индикатор, что говорит о том, что всё работает. Нажимаем на список Все посетители сайта и выбираем одно из наших событий.

Создание аудитории Facebook

Введите количество дней за которое нужно собрать аудиторию (максимум 180), назоваите аудиторию, у меня будет «Клик по номеру в шапке» и нажмите создать аудиторию.

В следующем окне вам предложат создать рекламу или найти похожую аудиторию, но можно просто нажать готово.

Аудитория Facebook создана успешно

Разобраться с тем как это использовать дальше, перекладываю на ваши могучие умы и иду писать инструкцию по Вконтакте. Благо там всё проще.

Создание аудиторий Вконтакте на основе событий

Смысл событий Вконтакте лишь в одном — сбор аудиторий для дальнейшего использования в рекламе.
В разделе ретаргетинг нажимаем создать аудиторию.

Создание аудитории Вконтакте

Я заполнил так:

Создание аудитории вконтакте по событию

При желании можно добавить дополнительные параметры вроде определённых страниц, но это уже совсем другая история про ретаргетинг Вконтакте, а не про WordPress.

Теперь в списке отображается наша аудитория, а через некоторое время появится количество попавших в неё пользователей.

Список аудиторий ретаргетинга Вконтакте

Для остальных событий, аудитории создаются аналогичным образом. Далее на их основе можно создавать рекламу в Вконтакте, добавлять эти аудитории или вычитать некоторые из общей массы. В общем, есть где разгуляться.

Автоматическая отправка событий во все системы

Итак, базу мы с вами освоили и теперь вы готовы к более серьёзным свершениям и давайте подведём краткие итоги того, что мы сделали.

  1. Настроили прослушивание событий в Google Tag Manager;
  2. Научили его различать только те, что нам нужны;
  3. Подключили другие системы через диспетчер тегов;
  4. Настроили отправку событий в другие системы.

На 4 шаге мы настраивали теги отправки событий для каждой конверсии и для каждой системы по отдельности, и это весьма утомительный и неэффективный процесс. Я показал его лишь в учебных целях и для тех, кому не нужен Google Analytics. Если вы из тех людей, то спокойно пользуйтесь отдельным подключением и всё. Однако, если вам нужно подключить всё и сразу, то это эта часть инструкции для вас.

Важное замечание!
Перед тем как мы продолжим нужно удалить все теги передачи событий во все системы кроме Google Analytics. Теги подключения кодов отслеживания, API и пикселей не троньте!

Потом не говорите, что не предупреждал ????

Список тегов после зачистки

Вот, что получилось у меня после зачистки. Как видите, осталось только то о чём я предостерегал выше.

Минутка благодарности

Инструкция этого блока не появилась у меня в голове. За основу я взял эту статью и видео. По мне они не особо понятные широким массам. Автор объясняет довольно сбивчиво и на скорую руку, поэтому я решил приложить к этому свою гениальность объяснять сложные вещи с любовью и на понятном языке и про свою скромность тоже не забыл ????. Тем не менее, я благодарен автору за материал.

Изучаем события Google Analytics

Итак, GTM смотрит на то, что происходит на сайте подобно нашему пикаперу из метафоры выше. В тот момент, когда посетитель выполняет целевое действие, в Google Analytics передаётся закодированная строка события.

Зайдите на свой сайт, нажмите F12, в открывшемся инструменте разработчика перейдите на вкладку Network и перезагрузите страницу. А теперь выполните целевое действие. Помните, мы это уже делали когда проверяли отправку событий в ВК? В окне появится куча всяких событий и чтобы отсеять лишнее нам нужно ввести в окно поиска слово analytics. Останется всего несколько событий одно из которых — наше целевое действие.

Запрос который улетел в Google Analytics
https://www.google-analytics.com/collect?v=1&_v=j79&a=1571421060&t=event&ni=0&_s=1&dl=http%3A%2F%2Ftest.wplovers.pw%2Ftest-analitiki%2F&ul=ru-ru&de=UTF-8&dt=%D0%A2%D0%B5%D1%81%D1%82%20%D0%B0%D0%BD%D0%B0%D0%BB%D0%B8%D1%82%D0%B8%D0%BA%D0%B8%20-%20Journez&sd=24-bit&sr=1680x1050&vp=1665x435&je=0&ec=Call&ea=Lead&el=Header&_u=SACAAEAB~&jid=&gjid=&cid=904356779.1563671363&tid=UA-113475200-2&_gid=1654345249.1567170863&gtm=2wg8l2PKRQPNK&z=1568218448

Значение Request URL это и есть наш запрос в GA. Как я понял, что это именно то, что нам нужно? Легко! Прокручиваем ниже до раздела Query String Parameter (параметр строки запроса). Это то же самое, что мы видели выше, только там это было записано в одну строку, а здесь разложено в формате ключ:значение, а значит в более читаемом виде.

Параметры строки запроса в Google Analytics
v: 1
_v: j79
a: 1571421060
t: event
ni: 0
_s: 1
dl: http://test.wplovers.pw/test-analitiki/
ul: ru-ru
de: UTF-8
dt: Тест аналитики - Journez
sd: 24-bit
sr: 1680x1050
vp: 1665x435
je: 0
ec: Call
ea: Lead
el: Header
_u: SACAAEAB~
jid: 
gjid: 
cid: 904356779.1563671363
tid: UA-113475200-2
_gid: 1654345249.1567170863
gtm: 2wg8l2PKRQPNK
z: 1568218448

Видите что-то знакомое? Да-да, это наши параметры отслеживания, которые мы прописывали, когда создавали Теги отправки событий в GA. Паззл сложился!

Что нам это даёт? А то, что мы можем взять нужные параметры из этой строки запроса, сделать из них переменную GTM и использовать в Триггерах. Конкретно, нам нужны следующие ключи и их значения:

Создание переменной для передачи параметров в DataLayer

Для начала пару слов о DataLayer или иначе Уровне данных в Google tag Manager. Это некий буфер, который выполняет запрограммированные операции на вашем сайте, результат которых передаётся в GTM, а тот в свою очередь распределяет дальше. DataLayer это отдельная большая тема и пишу об этом просто как гиперссылку, чтобы вы могли найти информацию если интересно. Мы же просто поработаем с ним без погружения в детали.

Переходим в GTM > Переменные и в блоке пользовательские переменные нажимаем Создать. Называем нашу переменную customTask (именно так, иначе не сработает). Жмём по блоку Конфигурация переменной и боковой панели выбираем Собственный код JavaScript. В поле вставляем этот код:

function () {
  return function(tracker) {
    var originalSendHitTask = tracker.get('sendHitTask');
    tracker.set('sendHitTask', function(model) {
      originalSendHitTask(model);
      var hitPayload = model.get('hitPayload'); // получаем все улетающие параметры в виде строки
      console.log(hitPayload); // выведем в консоли, чтобы посмотреть какой формат
      var GaEventVars = {}; // все параметры из строки закинем в объект
      hitPayload.replace(/([^=&]+)=([^&]*)/g, function(m, key, value) {
          GaEventVars[decodeURIComponent(key)] = decodeURIComponent(value);
      }); 
      // и этот объект передадим в DataLayer в переменную 'GaEventParams' и создадим gtm-событие GaEvent
      window.dataLayer.push({'event':'GaEvent', 'GaEventParams': GaEventVars});
      
    });
  }
}
Добавление переменной customTask в GTM

Из комментариев в коде видно, что скрипт собирает данные и передаёт переменную GaEventParams, а также создаёт новое событие GaEvent, которое будет отображаться в предпросмотре GTM.

Подключение customTask к счётчику Google Analytics

Чтобы наш скрипт срабатывал его нужно к чему то привязать. Тем более, что привязать его нужно к тому откуда он будет брать данные, а именно из Google Analytics.

Открываем ранее созданную переменную, которую мы назвали «Идентификатор отслеживания GA» и в спойлере дополнительные настройки выбираем Поля, которые необходимо задать, нажимаем + Поле и в Название поля пишем customTask, а в Значение нажимаем + и в боковой панели выбираем нашу переменную customTask. В это поле должен вставиться такой текст {{customTask}}.

Подключение customTask к счётчику Google Analytics

Разумеется нужно опубликовать контейнер и перейти на сайт и перезагрузить страницу. Теперь, после каждого события, которое задействует Google Analytics, у нас появляется новое событие GaEvent.

События GaEvent

Почему в моём случае их 3? Давайте считать!

  1. При загрузке страницы у нас срабатывает отслеживание Google Analytics;
  2. При клике по номеру телефона срабатывает событие клик по номеру, которое также передаётся в GA;
  3. При том же клике срабатывает триггер на внешние ссылки и это событие также улетает в GA.

При этом, если переключиться на вкладку Data Layer, то мы увидим в нём содержимое нашей строки запроса. То есть, наш скрипт из customTask отработал успешно.

Просмотр содержимого Data Layer

Получение переменной GaEventParams из Data Layer

Теперь нам нужно вытащить виртуальную переменную GaEventParams, созданную в Data Layer, и поместить в обычную переменную Google Tag Manager. Если этого не сделать GTM будет ругаться на то, что в Data Layer переменная есть, но он её не знает. Так познакомим их! ????
Для этого идём в GTM > Переменные > Пользовательские переменные > Создать. Название пишем «GaEventParams». Клик по блоку Конфигурация переменной, выбираем из списка Переменная уровня данных.

Сохраняем переменную, обновляем предпросмотр, перезагружаем страницу сайта и видим, что данные из Data Layer переданы в переменную GaEventParams.

Данные переданы из Data Layer в переменные

Триггер на событие GaEvent

Мы создали новое событие, но как мы помним, оно сейчас просто выполняется и ничего не делает. Ровно как наш парень на скамейке в парке из метафоры, который лишь определил, что ему нравится в девушках. Для того, чтобы что-то произошло нам нужно создать триггер, который станет мотивом выполнить действие дальше.

Идём в Триггеры и создаём новый с названием «GaEvent». Клик по блоку Настройка триггера и в боковом меню выбираем Пользовательское событие.

Триггер на пользовательское событие GaEvent

То есть, мы дали задание триггеру обрабатывать все пользовательские события с идентификатором GaEvent.

Отправляем события во все системы одновременно

НУ вот и настал момент истины. Теперь нам нужно создать Тег, который будет отправлять данные во все системы.

GTM > Теги > Создать. Назову «Отправка событий во все системы». Клик по блоку Конфигурация тега, выбираем тип Пользовательский HTML и добавим в основное окно этот код:

<script>
(function(){
  var gaEventParams = {{GaEventParams}};
   console.log(gaEventParams);
  
    // нас интересуют только События
   if(gaEventParams.t == "event") {
      
      // определяем название (объединяем ec,ea,el в одно значение)
      var event_name = gaEventParams.ec + '_' + gaEventParams.ea + '_' + gaEventParams.el;
      
      // отправляем в Яндекс Метрику
      try {
        	ym(XXXXXX, 'reachGoal', event_name);
        } catch (e) {}
      
      // отправляем в Facebook
      try {
              fbq('trackCustom', event_name); 
        } catch (e) {}
      
      // отправляем в VK
      try {
              VK.Retargeting.Event(event_name); 
        } catch (e) {}
  }
    
})();
</script>

Помните, что в коде для яндекса нужно заменить XXXXXX на идентификатор вашего счётчика. Вот что выполняет этот скрипт в момент срабатывания.

  1. Смотрит содержимое события GaEvent;
  2. Проверяет условие, чтобы это было именно событие event, а не что-то другое, например pageview(просмотр страницы);
  3. Помним, что в ec, ea, el ключах строки запроса хранятся данные наших событий. На этом шаге, скрипт берёт значения этих ключей и соединяет их в одну строку разделяя знаками _;
  4. Далее происходит отправка во все системы по очереди, а вместо переменной event_name подставляется строка, получившаяся на шаге 3.

Помните последнюю графу в нашей таблице? Именно для этого мы соединяли элементы цели и разделяли _, чтобы сделать идентификаторы целей более универсальными.

После вставки кода нужно нажать на блок Триггеры, выбрать из списка созданный ранее GaEvent и затем сохранить тег.

Тег отправка событий во все системы

Фильтрация внешних ссылок

Помните мы создавали триггер для клика по внешним ссылкам? Так вот, это тоже является событием и оно мешает отправке данных во все системы. Каким образом?

Такой идентификатор получился путём соединения значений ключей и разделения их знаком _, о чём я только что писал выше. Поэтому, нам нужно добавить 2 фильтра.
Первый — на уровне триггера, который срабатывает на номер телефона.
Второй — на уровне кода, чтобы скрипт не отправлял события в системы при определённых условиях.

Если вы используете отслеживание кликов по внешним ссылкам, то рекомендую выполнить инструкцию ниже.

Фильтрация на уровне триггера

Открываем наш триггер с названием «Клики по внешним ссылкам», нажимаем на Настройки триггера и добавляем ещё одно условие:

  1. Click URL;
  2. не соответствует регулярному выражению;
  3. tel\:|mailto\:

Теперь триггер не будет срабатывать если ссылка содержит указанные ранее домены и протоколы в адресе.

Добавление дополнительного фильтра для номеров и email
Фильтрация отправки событий на уровне кода

Чтобы в системы не поступали лишние события, нужно добавить дополнительное условие в код. При выполнении скрипт будет смотреть не выполняется ли условие и если выполняется, то будет останавливать отправку. Секрет прост. Нужно добавить в код отправки событий во все системы вот такое условие:
&& gaEventParams.ea != "Клик по исходящей ссылке"
где Клик по исходящей ссылке — это значение поля Действие в Теге для отправки кликов по внешним ссылкам (выше про это было).
В итоге код для Отправки событий во все системы будет таким:

<script>
(function(){
  var gaEventParams = {{GaEventParams}};
   console.log(gaEventParams);
  
    // нас интересуют только События
   if (gaEventParams.t == "event" && gaEventParams.ea != "Клик по исходящей ссылке") {
   
      
      // определяем название (объединяем ec,ea,el в одно значение)
      var event_name = gaEventParams.ec + '_' + gaEventParams.ea + '_' + gaEventParams.el;
      
      // отправляем в Яндекс Метрику
      try {
        	ym(XXXXXX, 'reachGoal', event_name);
        } catch (e) {}
      
      // отправляем в Facebook
      try {
              fbq('trackCustom', event_name); 
        } catch (e) {}
      
      // отправляем в VK
      try {
              VK.Retargeting.Event(event_name); 
        } catch (e) {}
  }
    
})();
</script>

Проверка работы связки

Заходим на сайт в режиме инкогнито. Открываем инструмент для вебмастеров нажав на клавишу F12, переходим на вкладку Network и нажимаем очистить.

Очистка событий инструментов для вебмастеров

После этого выполняем целевое действие. Имейте в виду, если у вас включен вебвизор в Яндекс Метрике, то при перемещении курсора будут появляться новые события. Ничего страшного, сейчас мы отфильтруем запросы и всё встанет на места.

Вводим в поле поиска часть идентификатора цели и изучаем то, что осталось:

Запросы на вкладке Network инструмента разработчиков

А осталось всего 4 события. У меня первая Метрика. Если в правой части прокрутить вниз, то увидим, что в разделе Query String Parameters улетел запрос с нашим идентификатором цели:

Проверка запросов в Яндекс Метрику

Следующий на очереди Google Analytics и с ним тоже всё хорошо. Ещё бы, он ведь у нас интегрирован без всяких кодов, но мало ли, вдруг что-то мешает.

Проверка отправки событий в Google Analytics

Следующий Facebook и его строка запроса выглядит так:

Проверка запросов в Facebook

Ну и замыкает всё это дело событие Вконтакте

Проверка отправки событий в Вконтакте

Проверка целей Метрики методом от Яндекса

В справке Яндекс Метрики предложено проверять цели с добавлением специального параметра ?_ym_debug=1 в конце ссылки. Выглядеть это будет так:
http://yoursite.com/?_ym_debug=1

После того как вы перешли на сайт по такой ссылке, нужно снова открыть инструмент разработчика, перейти на вкладку Console и выполнить целевое действие (важно чтобы оно не перезагружало страницу иначе ничего не увидите).

Проверка целей яндекса через _ym_debug=1

Как видите, Метрика успешно зафиксировала цель.

Проверка событий Facebook помощником по пикселю

Это мы уже проходили, поэтому просто напомню, что так тоже можно. Выполняем целевое действие на странице и видим примерно такую картину:

Проверка целевых событий Facebook

Что если вам нужно отправлять события в MyTarget

Раз уж выше я упоминал про MyTarget, то вероятно вам понадобится отправлять события и в него. В этом случае просто добавляется кусок кода, который на 98% соответствует их документации. И тогда полный код отправки во все системы будет таким:

<script>
(function(){
  var gaEventParams = {{GaEventParams}};
   console.log(gaEventParams);
  
    // нас интересуют только События
   if(gaEventParams.t == "event") {
      
      // определяем название (объединяем ec,ea,el в одно значение)
      var event_name = gaEventParams.ec + '_' + gaEventParams.ea + '_' + gaEventParams.el;
      
      // отправляем в Яндекс Метрику
      try {
          ym(XXXXXX, 'reachGoal', event_name);
        } catch (e) {}
      
      // отправляем в Facebook
      try {
              fbq('trackCustom', event_name); 
        } catch (e) {}
      
      // отправляем в VK
      try {
              VK.Retargeting.Event(event_name); 
        } catch (e) {}
        
      // отправляем в MyTarget (Mail.ru)
      try {
            var _tmr = window._tmr || (window._tmr = []);
			_tmr.push({ id: ID-счётчика, type: 'reachGoal', goal: event_name });
        } catch (e) {}
    
  }
    
})();
</script>

Вместо ID-счётчика нужно написать тот, что получили при регистрации в Рейтинге. Имейте в виду, что этот код без фильтрации кликов по внешним ссылкам.

Краткое резюме того, что сделали

Вы этом блоке мы проделали большую работу и давайте резюмируем то, что ms сделали для лучшего понимания всей картины:

  1. Вывели запрос, адресованный GA в DataLayer GTM за счёт переменной customTask;
  2. Подключили customTask к переменной счётчика Google Analytics, чтобы при его срабатывании активировалось наше задание. Кроме того, создали новую переменную GaEvent;
  3. Получили GaEventParams из Data Layer, чтобы можно было на него настроить Триггер;
  4. Сделали триггер, который срабатывает при активации события GaEvent;
  5. Создали Тег, который на основе всего предыдущего отправляет события во все системы.

Прелесть этого метода в том, что нам не нужно создавать Теги для каждой системы по отдельности. Достаточно создать их один раз для Google Analytics и распределить по остальным системам.

Заключительные штрихи и выводы

Ну, вот и пора закругляться, но в заключении последний штрих (Да успокойте его кто-нибудь уже! ???????? )

Исключите себя из статистики

Если вам нужно чтобы GTM не фиксировал ваши посещения нужно отключить вставку кода отслеживания в том случае если вы залогинены как администратор и/или редактор. Для этого перейдём в Woody Snippets, прокрутим страницу вниз и настроим дополнительную логику выполнения сниппета:

Настройки логики Woody Snippets

То же самое нужно проделать и со вторым кодом Google Tag Manager.

Единственное, что я рекомендую — это сделать эти настройки в самом конце, когда уже всё настроили и проверили.

Это точно всё…

На мой взгляд хорошая получилась инструкция. Вы взяли 2% информации о GTM и других системах, которая закроет 80% ваших потребностей в отслеживании конверсий. Понятное дело, что вместить в одно руководство всё не получится. Просто возьмите этот гайд и докрутите его под себя воспользовавшись документацией сервисов, которые мы разобрали в этом руководстве.

Разумеется, всё о чём написано выше не претендует на несокрушимую истину. Вы можете знать более оптимальный способ и я призываю вас делиться кейсами в комментариях. Только пишите хоть что-то, просто ссылки модерацию не пройдут.

Единственное о чём прошу, не нужно писать очевидные функции GTM вроде импорта и экспорта контейнеров. Пишите только интересные приёмы.

Слова напутствия

Наверное тут надо подбодрить что у вас всё получится и похвалить тех у кого получилось. Так вот, из-за большого объёма может показаться, что всё это сложно. Просто наберитесь терпения, вникните один раз, проделайте 2-3 и на четвёртый уже будете это дело как орехи щёлкать. Имейте в виду, что Google Tag Manager — это не страшный зверь от «корпорации добра», а лишь работяга, который выполняет наши поручения по сбору данных на сайте и отправке их в разные системы. Помните, не боги горшки обжигают и всё у вас получится.

Следующая страница →