Подключение целей Яндекс.Метрика на виджеты с кнопками в конструкторе сайтов Tilda

Привет.

Давайте на примере детально разберём подключение целей Яндекс.Метрики к любой кнопке или ссылке на сайте в конструкторе Tilda, если в настройке блока на сайте отсутствует специальная уникальная ссылка для отправки данных в систему аналитики. Покопавшись в интернете я нашел информацию только в общих чертах, ввиду чего решил написать эту статью и облегчить путь к решению этой задачи будущих маэстро E-Commerce. В примере мы с Вами научимся создавать цели в Яндекс.Метрика, создавать в конструкторе сайтов Tilda блок с HTML кодом, работать с Java Script, который поможет связать наш сайт с системой аналитики.

Перейдём к конкретному примеру:

Описанные ниже действия будут приведены на примере настроенного блока BF905 или BF905A (виджеты с каналами связи WhatsApp, Telegram, Телефон, Почта и т.д.) Предположим Вы хотите, чтобы данные о нажатии по этим кнопкам уходили в Яндекс.Метрику, но в этих блоках не генерируются специальные ссылки для отправки данных в аналитику.

Для начала создадим те самые цели в инструменте Яндекс.Метрика. Для этого, в личном кабинете счётчика, переходим в «настройки», «цели» и нажимаем «добавить цель». Затем задаём три параметра (Снимок 1):

1. Ввести произвольное, понятное Вам, название цели.

2. Выбрать тип условия цели, в нашем случае это «JavaScript-событие».

3. Ввести идентификатор цели, по которому будут распределяться данные, пришедшие в метрику с сайта. Это тоже может быть понятное для Вас, произвольное название.

Подтверждаем нажатием на «ОК» и затем создаём аналогичным образом цели под другие требуемые каналы связи из блока BF905 или BF905A. В моём случае их получилось четыре (Снимок 2):

Затем нам необходимо идентифицировать нужные для нас цели на сайте и сохранить их в виде ссылок, при переходе по которым будет срабатывать наш будущий Java Script и отправлять данные в Яндекс.Метрика. Для этого переходим на наш опубликованный сайт, наводим курсор на виджет с каналами связи и нажатием правой кнопки мыши выбираем пункт «посмотреть код» (Если используете браузер Google Chrome). В открывшейся консоли, в коде чуть ниже, будут те самые, нужные нам ссылки, которые мы скопируем правой кнопкой мыши (Снимок 3):

В моём случае сохранённые ссылки из блока BF905A имеют следующий формат:

1. https://t.me/theAltSert

2. https://api.whatsapp.com/sen? phone=74952121796

3. mailto:info@thealt.ru

4. tel:+74952121796

Под цифрой 5 обозначен виджет с каналами связи, из которого мы извлекли нужные нам ссылки.

Затем нам нужно добавить на сайт связующий элемент, который будет отправлять в метрику данные, основываясь на переходах по ссылкам, адреса которых мы с Вами сохранили. Переходим в конструктор сайта Tilda и добавляем на страницу с размещённым на ней виджетом блок Т123 (вставка HTML кода), куда мы и запишем заветный скрипт, который поможет решить нашу задачу. В моём случае я вставил блок T123 сразу под Хедером (шапка сайта). (Снимок 4):

1. блок Т123 (вставка HTML кода)

2. Виджет с каналами связи в блоке BF905A.

Затем открываем редактор блока T123 кнопкой «Контент» и по очереди записываем код для каждой цели, по достижении которой мы хотим получить данные в Яндекс.Метрику. Ниже приведён общий пример скрипта и объяснение переменных:

$(document).ready(function () {

$(«[href='ссылка']»).click(function () {yaCounterxxxxxx.reachGoal('идентификатор цели');

});

});

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

'ссылка'- Задаётся адрес ссылки, которую мы определяем как цель. Задаём одну из сохранённых ранее ссылок на каналы связи.

yaCounterxxxxxx- Вместо «xxxxxx» задаём уникальный номер счётчика из Вашего личного кабинета Яндекс.Метрика (Снимок 5)

'идентификатор цели'- задаём идентификатор, который мы присвоили цели в начале нашей статьи в Яндекс.Метрике, основываясь на выбранной ссылке под цель.

Скрипт говорит нам о том, что если происходит переход по определённой ссылке (в нашем примере нажатие на кнопку WhatsApp, телефон, Telegram и т.п.), то скрипт отправляет данные в Яндекс.Метрику о достижении цели с определённым номером счётчика и идентификатором цели.

Получаем запись следующего вида, на примере ссылки на WhatsApp (Снимок 6):

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

В моём примере получилось четыре скрипта для четырёх каналов связи: WhatsApp, Телефон, Telegram, Email (Снимок 7):

Записанные нами скрипты в блоке T123 будут отправлять каждое событие в Яндекс.Метрику, которое происходит по нажатию на виджет в блоке BF905A с определённой кнопкой, вызывающее переход по указанным ссылкам.

Остаётся проверить корректность отправки данных. Для этого мы заходим на опубликованный сайт и сами пробуем перейти по всем кнопкам в каналы связи. Затем, через некоторое время (данные уходят с небольшой задержкой), проверим отчёт о достижении целей в личном кабинете Яндекс.Метрика. Для этого заходим в «отчёты», «конверсии» и просматриваем график достижения целей. Если всё работает корректно, Вы увидите записи в достижениях заданных целей (Снимок 8):

На этом я закончу свой пример. Если у Вас возникли какие-либо вопросы, пишите комментарии, постараемся разобраться вместе.

Спасибо за внимание!