Установка JS-контейнера

Для повышения эффективности аудиторных и ретаргетинговых кампаний трекинг контейнер использует асинхронный матчинг с DMP и SSP системами, что приводит к росту охвата и качества размещений.
При матчинге не осуществляется передача домена, таким образом нет риска трансляции аудитории площадки внешнему партнеру.

JS-контейнер Mediasniper допустимо устанавливать на страницы сайта 2 способами:

1. Размещение JS-контейнера напрямую на страницы сайта

2. Размещение JS-контейнера через Google Tag Manager (GTM)

📘

JS-контейнер: поддерживаемые действия

JS-контейнер Mediasniper поддерживает следующие определенные действия, срабатывающие автоматически:

• vclick (validate click) - загрузка контейнера
  

• aclick (active click) 
  

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

• a6 - активный клик по версии Google Analytics, означающий переход на следующую страницу. Срабатывает автоматически.
  

JS-контейнер Mediasniper поддерживает следующие произвольные действия:

• а1 - аN - это любое другое произвольное действие, настраиваемое в зависимости от того, какое событие произошло.
  

Например, здесь а1 - это клик по ссылке, а2 - клик по кнопке.

Для вызова определенных действий используется функция generalPixel.postClick()

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

1. Установка JS-контейнера MediaSniper напрямую на страницы сайта

Текущий раздел документации описывает, как разместить JS-контейнер Mediasniper на страницах сайта и настроить вызов функции, которые должны срабатывать при клике на ссылку и при клике на кнопку:

❗️

JS-КОД, УКАЗАННЫЙ НИЖЕ - ЭТО ПРИМЕР.
УСТАНАВЛИВАТЬ ЕГО НА СТРАНИЦЫ ВАШЕГО САЙТА НЕ НУЖНО.
МЕНЕДЖЕР ВЫШЛЕТ ВАМ КОД, СГЕНЕРИРОВАННЫЙ ДЛЯ ВАШЕЙ РЕКЛАМНОЙ КАМПАНИИ

HTML

<script async src="https://static.terratraf.io/engine/GP.js"></script>

<script>
	 window.generalPixel = window.generalPixel || [];
	 window.generalPixel.push({type:'GPID', id:'XXXXXXXX'});
	 window.generalPixel.push({UserID:'XXX'});
</script>

Клик по ссылке
generalPixel.postClick('a1')
Клик по кнопке
generalPixel.postClick('a2')

Добавление JS-контейнера Mediasniper в исходный код страницы:

1. Для установки контейнера необходимо на все страницы сайта разместить код, сразу после открывающегося тега body
2. Добавляем вызов функции generalPixel.postClick() через событие onClick

Пример корректного размещения JS-контейнера и вызов функции generalPixel.postClick() можно найти вот здесь: http://demo.terratraf.com/container/gp/onclick_test/

Проверяем, что все работает, заходим на страницу http://demo.terratraf.com/container/gp/onclick_test/?s_trk=test и видим, что при загрузке страницы вызывается JS-контейнер:

По нажатию на ссылку происходит вызов функции “Клик по ссылке” generalPixel.postClick('a1'):

По нажатию на кнопку происходит вызов функции ”Клик по кнопке”
generalPixel.postClick('a2'):

2. Установка контейнера через Google Tag Manager (далее GTM)

Google Tag Manager - инструмент от компании Google, который позволяет размещать JS-коды сторонних сервисов (таких как Яндекс Метрика, Google Analytics, LiveInternet и др.) на страницах сайта и управлять ими из одного интерфейса.

Текущий раздел документации описывает как разместить JS-контейнер Mediasniper на страницах сайта и настроить вызов функции, которые должны срабатывать при клике на ссылку, при клике на кнопку и при переходе на определенную страницу:

❗️

JS-КОД, УКАЗАННЫЙ НИЖЕ --- ЭТО ПРИМЕР. НЕ НУЖНО ЕГО УСТАНАВЛИВАТЬ НА СТРАНИЦЫ ВАШЕГО САЙТА.
МЕНЕДЖЕР ВЫШЛЕТ ВАМ КОД ИМЕННО ДЛЯ ВАШЕЙ РЕКЛАМНОЙ КАМПАНИИ

HTML

<script async src="https://static.terratraf.io/engine/GP.js"></script>

<script>
	 window.generalPixel = window.generalPixel || [];
	 window.generalPixel.push({type:'GPID', id:'XXXXXXXX'});
	 window.generalPixel.push({UserID:'XXX'});
</script>

//Клик по ссылке gtm
generalPixel.postClick('a1')
//Клик по кнопке gtm
generalPixel.postClick('a2')
//Переход на страницу demo.terratraf.com/container/gp/gtm_test/
generalPixel.postClick('a3')
//Отправка формы с контактами
generalPixel.postClick('a4')

📘

Дополнительная информация о Google Tag Manager

Как начать работать с GTM можно прочитать тут: https://support.google.com/tagmanager/answer/6103696?hl=ru&ref_topic=3441530 .

Как установить контейнер Google Tag Manager в CMS Wordpress: http://prometriki.ru/ustanovka-google-tag-manager-v-wordpress/

После того, как вы создали аккаунт и разместили код контейнера GTM на страницах сайта, нужно создать теги для JS-контейнера Mediasniper и требуемых функций.

Создание тега вызова контейнера Mediasniper:

1. Выбираем в левом меню “Теги” и нажимаем кнопку “Создать”.

2. В поле Имя тега вводим название нового тега, например, “Вызов JS-контейнера”. В конфигурации тега выбирает Тип тега - для наших кодов Пользовательский HTML. После этого появится поле HTML, куда мы и вносим наш код. В настройках Триггеры выбираем триггер “Все страницы” и нажимаем кнопку “Сохранить”:

Если вы все сделали правильно, то вновь созданный тег появится в списке тегов:

Создание триггера для функции а1 "Клик по ссылке GTM":

Эта функция будет срабатывать при нажатии на определенную ссылку, а именно при нажатии на ссылку с id = test_link_gtm

1 .Нужно зайти в меню “Переменные” и настроить условия активации действия по событию "Клики". В нашем случае достаточно выбрать только Click ID, но можно выбрать все условия:

2. После этого создадим условие срабатывания функции, т.е. создадим новый триггер.
3. Заходим в меню “Триггеры” и нажимаем кнопку “Создать”.
4. В поле Имя триггера вводим название нового триггера, например, “Клик по ссылке с id test_link_gtm”.
5. В настройках триггера выбираем тип триггера “Клик-Только ссылки”.

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

Для этого установим флажок "Ждать теги". При такой настройке ссылка не откроется до тех пор, пока не будут выполнены все теги или пока не истечет время ожидания, также установим флаг “Проверка ошибок”, теги будут активироваться только при успешном открытии ссылки. В противном случае они будут срабатывать при каждом нажатии на ссылку.

В Условиях включения указываем фильтр Page URL содержит terratraf - это означает, что клики на ссылках будут “прослушиваться” на всех страницах сайта, содержащих слово terratraf.

В Условиях активации выбираем "Некоторые клики по ссылкам" и указываем следующее условие срабатывания триггера - Click ID равно test_link_gtm и нажимаем кнопку “Сохранить”.

Создание тега для функции a1 "Клик по ссылке GTM":

1. Заходим в меню “Теги”

2. Нажимаем кнопку “Создать”. В поле Имя тега вводим название нового тега, например, “Клик по определенной ссылке”.

3. В конфигурации тега выбираем Тип тега - Пользовательский HTML.

4. После этого появится поле HTML, где нужно разместить JS-код вызова функции generalPixel.postClick("a1").

5. В настройках Триггеры выбираем триггер “Клик по ссылке с id test_link_gtm” и нажимаем кнопку “Сохранить”:

Создание триггера для функции а2 "Клик по кнопке GTM"

1. Заходим в меню “Триггеры” и нажимаем кнопку “Создать”.
2. В поле Имя триггера вводим название нового триггера, например, “Клик по кнопке с id testGtmButton”.
3. В настройках триггера выбираем тип триггера “Клик-Все элементы”.

В Условиях активации выбираем "Некоторые клики" и указываем следующее условие срабатывания триггера - Click ID равно testGtmButton и нажимаем кнопку “Сохранить”.

Создание тега для функции а2 "Клик по кнопке GTM"

1. Заходим в меню “Теги”

2. Нажимаем кнопку “Создать”. В поле Имя тега вводим название нового тега, например, “Клик по определенной кнопке”.

3. В конфигурации тега выбираем Тип тега - Пользовательский HTML.

4. После этого появится поле HTML, где нужно разместить JS-код вызова функции generalPixel.postClick("a2").

5. В настройках Триггеры выбираем триггер “Клик по кнопке с id testGtmButton” и нажимаем кнопку “Сохранить”:

Создание триггера для функции а3 "Переход на страницу demo.terratraf.com/container/gp/gtm_test/"

1. Заходим в меню “Триггеры” и нажимаем кнопку “Создать”.
2. В поле Имя триггера вводим название нового триггера, например, “Переход на определенную страницу”.
3. В настройках триггера выбираем тип триггера “Просмотр страницы-Окно загружено”.

🚧

Обратите внимание

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

• как только браузер приступит к синтаксическому анализу страницы ("Просмотр страницы")
  

• по окончании сборки модели DOM ("Модель DOM готова")
  

• когда страница загрузится полностью, включая изображения, скрипты и другие встроенные объекты ("Окно загружено"). 
  

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

Все теги типа "Просмотр страницы", взаимодействующие с DOM для подстановки значений переменных, должны использовать настройку "Модель DOM готова". Это необходимо для правильного определения переменных.

4. В Условиях активации выбираем "Некоторые события "Окно загружено"
5. Указываем следующее условие срабатывания триггера - Page URL содержит demo.terratraf.com/container/gp/gtm_test и нажимаем кнопку “Сохранить”.

🚧

Обратите внимание

При добавлении условия срабатывания триггера, в данном случае - это условие Page URL содержит demo.terratraf.com/container/gp/gtm_test, нужно убедиться, что настроены соответствующие встроенные переменные, т.е для нашего условия в конфигурации встроенных переменных напротив Page URL должна стоять галочка.

Создание тега для функции а3 "Переход на страницу demo.terratraf.com/container/gp/gtm_test/"

1. Заходим в меню “Теги”, нажимаем кнопку “Создать”.
2. В поле Имя тега вводим название нового тега, например, “Переход на определенную страницу”.
3. В конфигурации тега выбираем Тип тега - Пользовательский HTML.
4. После этого появится поле HTML, где нужно разместить JS-код вызова функции.
5. В настройках Триггеры выбираем триггер “Переход на определенную страницу” и нажимаем кнопку “Сохранить”:

Создание триггера для функции а4 "Отправка формы с контактами"

Если на вашем сайте есть форма с тегом form и кнопкой, которая имеет синтаксис:

HTML

<form action="URL">
...
<input type="submit">
</form>

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

1. Заходим в меню "Переменные" и в конфигурации для форм поставим галочку на Form Id, можно выбрать и другие элементы, но у нас в примере будем истользовать именно ид формы.

2. После этого заходим в меню “Триггеры” и нажимаем кнопку “Создать”.
3. В поле Имя триггера вводим название нового триггера, например, “Отправка формы”.
4. В настройках триггера выбираем тип триггера “Отправка формы”.
5. В Условиях активации выбираем "Некоторые формы"
6. Указываем следующее условие срабатывания триггера - Form ID содержит contacts, где contacts - это id которое указано у нас для формы, и нажимаем кнопку “Сохранить”.

Создание тега для функции а4 "Отправка формы контактов"

1. Заходим в меню “Теги”, нажимаем кнопку “Создать”.
2. В поле Имя тега вводим название нового тега, например, “Отправка формы с контактами”.
3. В конфигурации тега выбираем Тип тега - Пользовательский HTML.
4. После этого появится поле HTML, где нужно разместить JS-код вызова функции.
5. В настройках Триггеры выбираем ранее созданный триггер “Отправка формы” и нажимаем кнопку “Сохранить”:

Такой способ отслеживания подойдет не всем сайтам, поскольку Google Tag Manager с помощью триггера "Отправка формы" определяет далеко не все отправки формы. Во многом это зависит от специфики проекта.

Иногда вы можете наблюдать следующее: в режиме предварительного просмотра GTM события Form Submit фиксируются, тег на отправку формы срабатывает, и данные в инструменты веб-аналитики передаются даже тогда, когда пользователь не заполнял форму. Или вы просто обновляете страницу и, когда страница загружается, видите событие gtm.formSubmit. Как правило, такие события возникают из-за установленного Facebook Pixel (пикселя Facebook).

Тестирование созданных тегов

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

Заходим в этом же браузере, в котором запущен GTM, на тестовую страницу http://demo.terratraf.com/container/gp/gtm_test/?s_trk=test и видим, что при загрузке страницы вызывается JS-контейнер, а также срабатывает функция "Переход на страницу demo.terratraf.com/container/gp/gtm_test/" generalPixel.postClick('a3') :

По нажатию на ссылку происходит вызов функции “Клик по ссылке gtm” generalPixel.postClick('a1'):

По нажатию на кнопку происходит вызов функции “Клик по кнопке gtm” generalPixel.postClick('a2'):

После того как заполнили поля First name и Last name и успешно отправили форму происходит вызов функции “Отправка формы с контактами” generalPixel.postClick('a4'):

После того, как убедились, что все работает правильно, можно нажимать “Опубликовать”.

3. Контейнеры для легких страниц

Технология Турбо‑страниц

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

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

Преимущества Турбо-страниц:

• Мгновенная загрузка и удобное чтение
  Высокая скорость позволяет уменьшить процент отказов. Поведение посетителей сайта напрямую связано со скоростью его загрузки: чем быстрее открываются страницы, тем выше шанс, что человек останется на них. Конверсия и ранжирование ресурса в поисковой выдаче тоже во многом зависят от скорости загрузки. Медленные сайты не нравятся аудитории и неизбежно теряют популярность. В итоге пользователи уходят к конкурентам.
• Снижение нагрузки на ваш сервер
  Использование собственной инфраструктуры доставки контента позволяет снизить количество обращений к вашему серверу.
• Адаптивный дизайн страницы под устройство пользователя
  Турбо-страницы решают проблему медленной загрузки страниц: когда посетитель открывает сайт на смартфоне, они автоматически включают адаптивный дизайн. Вам не придется разрабатывать отдельную версию ресурса для мобильных пользователей.
• Расширенные сниппеты в поиске
  Использование Турбо‑страниц является одним из факторов формирования расширенных сниппетов в поисковой выдаче.

❗️

JS-КОД, УКАЗАННЫЙ НИЖЕ - ЭТО ПРИМЕР.
УСТАНАВЛИВАТЬ ЕГО НА СТРАНИЦЫ ВАШЕГО САЙТА НЕ НУЖНО.
МЕНЕДЖЕР ВЫШЛЕТ ВАМ КОД, СГЕНЕРИРОВАННЫЙ ДЛЯ ВАШЕЙ РЕКЛАМНОЙ КАМПАНИИ

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

JavaScript

https://sync.bumlam.com/?src=gp3&cid=A2D4FF&cmp=pxleadvisitc8231211006&act=turbov8006&page={originalURL}&r={referrer}

Подробнее можно прочитать Яндекс.ТурбоСтраницы

Технология AMP

AMP — это технология ускоренных мобильных страниц, которая разрабатывается независимыми разработчиками и активно продвигается компанией Google в своем поисковике. Данная технология основана на том, что на сайте используются специальные теги, количество и функционал которых строго ограничены. Задача разработчика состоит в том, чтобы собрать солянку из доступных схем, которые решат проблему заказчика.

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

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

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

Для отслеживания загрузки через AMP страницы контейнер будет иметь вид:

JavaScript

<amp-pixel src="https://sync.bumlam.com/?src=gp3&cid=A2D4FF&cmp=pxleadvisitc8006&act=ampv800123123123126&page=SOURCE_URL&r=DOCUMENT_REFERRER" layout="nodisplay"></amp-pixel>

Подробнее можно прочитать AMP

Подключение веб-аналитики

Чтобы собирать статистику посещений Турбо‑страниц, подключите систему веб-аналитики одним из способов:

1. В интерфейсе вебмастера

❗️

Обратите внимание

Чтобы статистика собиралась корректно, счетчики нужно подключать только одним из способов.
Если вы уже подключили счетчик через RSS-канал, удалите элементы turbo:analytics из канала перед подключением в интерфейсе.

1. Перейдите на страницу Турбо‑страницы для контентных сайтов → Настройки → Веб‑аналитика.
2. Нажмите кнопку Добавить счётчик. Выберите нужную систему веб-аналитики и укажите идентификатор счетчика.
   Поддерживаемые системы веб-аналитики:

• Яндекс.Метрика
• LiveInternet
• Google Analytics
• Mail.Ru
• Rambler Топ-100
• Mediascope (TNS)
• Другое

3. Нажмите Сохранить.

2. Через RSS-канал

❗️

Обратите внимание

Внимание. Чтобы статистика собиралась корректно, счетчики нужно подключать только одним из способов.
Если вы уже подключили счетчик в интерфейсе Вебмастера, отключите веб-аналитику в интерфейсе перед подключением через RSS-канал.

Чтобы подключить систему веб-аналитики с помощью RSS-канала, передайте информацию о счетчике в элементе turbo:analytics:

HTML

...
    <channel>
        ...
        <turbo:analytics></turbo:analytics>
        ...
    </channel>
...

Чтобы трафик учитывался в разных системах веб-аналитики, подключите несколько счетчиков.

Поддерживаемые системы веб-аналитики:

• Яндекс.Метрика
• LiveInternet
• Google Analytics
• Mail.Ru
• Rambler Топ-100
• Mediascope (TNS)
• Другое

Подробнее читайте в статье.