Weblium Sites Integration

Интеграция виджетов

Google Tag Manager

Настройка отслеживания ивентов на отправку формы/клик кнопки Google Tag Manager

Определитесь, что нужно отслеживать. Кнопку или отправку формы. Начнем с кнопки.

Для того, что бы настроить отслеживание event'a на клик кнопки, нужно:

  1. Найти кнопку в DOM'e сайта с помощью document.querySelector и внести её в переменную, которую мы назовём button
var button = document.querySelector('#cover ~ section a');
  1. После того, как кнопка была найдена, нужно навесить функцию на кнопку, которая будет срабатывать при клике. Сделаем это с помощью события onclick.
button.onclick = function () {

}
  1. Внутри функции добавляем действие, которые выслал клиент.
button.onclick = function () {
dataLayer.push({
		'event': 'Event_landing_page',
		'eventCategory': 'order',
		'eventAction': 'form_send',
	});
}
  1. Готовый скрипт выглядит вот так:
var button = document.querySelector('#cover ~ section a');
button.onclick = function () {
dataLayer.push({
		'event': 'Event_landing_page',
		'eventCategory': 'order',
		'eventAction': 'form_send',
	});
}

Для того, что бы настроить отслеживание event'a на отправку формы, нужно:

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

var form = document.querySelector('#cover ~ section form');
form.onsubmit = function () {
dataLayer.push({
		'event': 'Event_landing_page',
		'eventCategory': 'order',
		'eventAction': 'form_send',
	});
}

Подробнее о событиях onclick, onsubmit и querySelector

Facebook Pixel

Установка Facebook Pixel и отслеживания ивентов на отправку формы/клик кнопки

  1. Для установки Facebook Pixel виджета, необходимо получить его код. Поступает он от клиента. Вставляется в раздел <head>
<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '772721986392137');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=772721986392137&ev=PageView&noscript=1
https://www.facebook.com/tr?id=772721986392137&ev=PageView&noscript=1

https://www.facebook.com/tr?id=772721986392137&ev=PageView&noscript=1
https://www.facebook.com/tr?id=772721986392137&ev=PageView&noscript=1

"
/></noscript>
<!-- End Facebook Pixel Code -->
  1. После успешной установки виджета, разберемся с отслеживанием ивентов. Ивенты так же приходят нам от клиентов в соответствии с их требованиями. Для примера берём вот этот ивент, который отслеживает завершение регистрации (потенициальную конверсию клиента в покупателя):
fbq('track', 'Lead');
  1. Здесь все делается по аналогии с Google Tag Manager. Для начала найдем кнопку в DOM'e сайта с помощью document.querySelector и внесем её в переменную, которую назовём button
var button = document.querySelector('#cover ~ section a');
  1. После того, как кнопка была найдена, нужно навесить функцию на кнопку, которая будет срабатывать при клике. Сделаем это с помощью события onclick.
button.onclick = function () {

}
  1. Внутри функции добавляем действие, которые выслал клиент.
button.onclick = function () {
fbq('track', 'Lead');
}
  1. Готовый скрипт выглядит вот так:
var button = document.querySelector('#cover ~ section a');
button.onclick = function () {
fbq('track', 'Lead');
}

Для того, что бы настроить отслеживание event'a на отправку формы, нужно:

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

var form = document.querySelector('#cover ~ section form');
form.onclick = function () {
fbq('track', 'Lead');
}

Как проверить работоспособность виджета?

Что бы удостоверится в правильной установке Facebook Pixel, используется специальное расширение для Chrome - Facebook Pixel Helper. Расширение отображает как и успешную установку, так и ошибки которые могли возникнуть после нее.

Подробнее о событиях onclick, onsubmit и querySelector

Виджеты для турагенств

Виджет поиска туров OTPUSK -> https://otpusk.com

  1. В after<body> вставляем скрипт:

    var osTarget = ''; /* URL для отправки формы */
var osContainer = null; /* Элемент DIV, в котором выводить результаты поиска */
var osTourContainer = null; /* Элемент DIV, в котором выводить подробную информацию о туре */
var osLang = 'ru'; /* язык интерфейса (ru|ua) */
var osTourTargetBlank = false; /* Открывать страницу тура в новом окне? */
var osOrderUrl = null; /* Вместо формы заказа, переходить на указанный url */ </script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&subset=cyrillic" rel="stylesheet">
<link rel="Stylesheet" href="https://export.otpusk.com/os/onsite/form.css" type="text/css" />
<link rel="Stylesheet" href="https://export.otpusk.com/os/onsite/result.css" type="text/css" />
<link rel="Stylesheet" href="https://export.otpusk.com/os/onsite/tour.css" type="text/css" />
<script src="https://export.otpusk.com/api/session?access_token=2c3de-8406d-e659d-27414-4bb9b"></script>
<script src="https://export.otpusk.com/js/onsite/"></script>
<script src="https://export.otpusk.com/js/order"></script>```

  2. Радуемся 😃

Настройка и подключение GA + GTM

  1. Регистрируемся в Аналитике
  2. Привязываем код Вашей аналитики в настройках нашего сайта (сайт должен быть оплачен!) Connect Code
  3. Регистрируемся в Google Tag Manager (далее ГТМ)
  4. Код ГТМ добавляем согласно инструкций самого ГТМа на Ваш сайт в разделе “интеграции” (не забываем запаблишить сайт) Регистрируемся в Аналитике
  5. В ГТМ создаем новый "тег" Create new tag 5.1. В появившемся окне сначала создаем и настраиваем новый тег Create new tag in window 5.2. Для того что бы срабатывание ГТМ можно было отследить в Google Analytics (далее GA) тип тега должен быть GA - Universal Analytics Universal Analytics
  6. Настройка конфигурации тега
  • Типа отслеживания - Событие (клик по кнопкам, заход на страницу являются событиями)
  • В поля: Категория, Действие, Ярлык, Значение - можно писать любые значения
  • В поле “не взаимодействие” оставляем - false

Задавайте осмысленные переменные, при добавлении множества тегов это важно для понимания какой из тегов сработал!

Итог: Result

  1. Подключаем GA Находясь в этом же окне (пункт 6), в самом низу видим поле: Connect GA

Открываем выпадающее меню, в котором выбираем: "Новая переменная…"

ВНИМАНИЕ! Переменную нужно будет создать только ОДИН раз на аккаунт. Она предназначена для связки ГТМ и GA.

7.1. В открывшемся окне, в поле "Идентификатор отслеживания" нужно ввести уникальный id от GA(заходим в гугл аналитику и берем там код который вводили в пункте 2). Жмем кнопку "Сохранить" Unique ID

7.2 Задаем переменной осмысленное название. Нас возвращает на предыдущий экран. Где нужно ввести название созданного нами тега Variable name

Нажимаем кнопку сохранить. В открывшемся окнем нажимаем кнопку добавить триггер: Add new trigger

  1. Создание триггера

Пояснение: Ранее мы создали тег он нужен для того чтобы отображать действия пользователей (отправку формы, клик кнопки и тд) в GA Сейчас мы создаем триггер. При настройке триггера мы указываем элемент или событие клик на которое нам нужно отображать в аналитике. Простыми словами - Клиент заходит на сайт, кликает по кнопке, настроенный триггер на эту кнопку срабатывает и в аналитику к нам приходит оповещение.

В открывшемся окне нажимаем на + в правом верхнем углу. Попадаем на страницу, и кликаем по элементу показанному на скриншоте: Click on element

  1. Выбор типа триггера В открывшемся сайт баре выбираем нужный нам тип (можно отслеживать заход на страницу, для подсчета количества трафика, клик по кнопке и тд) Сейчас мы отслеживаем клик по кнопке в кавере сайта, потому выбираем Клик - все элементы Choose trigger type

  2. Настройка триггера Выбираем “некоторые клики” (можно оставить все тогда будет считываться любой клик на сайте) Далее нам нужно “привязаться” к нужной нам кнопке. В самом низу имеем три поля, где нам нужно выбрать:

    1. Клик по классу
    2. Содержит
    3. Class нашей кнопки. На данном этапе нужно использовать класс с хэшом скрин(нам нужен уникальный класс потому используем хэш) Tunning trigger

  3. Называем наш триггер и жмем кнопку сохранить

  4. Мы попали обратно на страницу с тегом и подключенным к нему триггером Name for trigger

Жмем кнопку сохранить и попадаем на главную страницу ГТМ. Готово вы великолепны! 😃

  1. Проверяем работоспособность На главной странице ГТМ есть кнопке "предварительный просмотр", жмем на неё Preview

  2. Заходим на сайт к которому в самом начале подключили GA и ГТМ (нужно обновить страницу) и видим панель ГТМ в которой видны созданные теги. Они распределены по категориям Category

Совершаем клик по элементу к которому ранее привязались, после чего наш тег попадает в категорию сработавших тегов Click on element

Поздравляю, Вы великолепны

  1. Возвращаемся в ГТМ Ещё раз кликаем по кнопке "предварительнный просмотр" (что бы скрыть панель ГТМ внизу сайта) и жмем кнопку отправить
  2. Заходим в GA Отчет в режиме реального времени --- события Report

Здесь видим во сколько сработал и главное какой тег Finish

Подключение Яндекс Метрики

  1. Войдите в аккаунт Яндекс.Метрики
  2. Нажмите Добавить счетчик в левом верхнем углу экрана
  3. Укажите имя счетчика
  4. Укажите адрес сайта

Account

  1. Поставьте галочку «Я принимаю условия пользовательского соглашения»
  2. Скопируйте код и вставьте в HEAD

Code

Подключение пикселя ВКонтакте

  1. Войдите в ваш аккаунт Реклама ВКонтакте
  2. Нажмите Ретаргетинг в меню слева
  3. Перейдите во вкладку Пиксели
  4. Нажмите кнопку Создать пиксель
  5. Заполните поля и нажмите Создать
  6. Скопируйте код рядом с текстом: "Для использования пикселя в JavaScript API вам потребуется его код"

Paste Code

Как добавить Privy

  1. Войдите в свой аккаунт Privy
  2. Нажмите свое имя пользователя в верхнем правом углу экрана
  3. Нажмите My Information
  4. Нажмите Privy Code в панели слева
  5. Скопируйте код
  6. Вставьте в HEAD

Paste Code

Как добавить Hello Bar

  1. Войдите в свой аккаунт Hello Bar
  2. Нажмите Create New и следуйте шагам для настройки Hello Bar
  3. Нажмите Save & Publish
  4. Нажмите I can install code myself и скопируйте код

Paste Code

Как добавить код отслеживания WisePops

  1. Войдите в свой аккаунт __WisePops
  2. Нажмите Tracking Code вверху страницы
  3. Скопируйте код отслеживания

Paste Code

Подключение VWOПодключение VWO

  1. __Зайдите в ваш аккаунт VWO
  2. Перейдите по ссылке
  3. Пройдите регистрацию сайта
  4. Скопируйте код и вставьте его в AFTER