GuidesNewsDiscussions

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

Описание установки js-контейнера на страницы сайта

Suggest Edits

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

  1. Размещение JS-контейнера напрямую на страницы сайта
  2. Размещение JS-контейнера через Google Tag Manager (GTM)

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

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

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

  1. добавляем ссылку на JS-контейнер Adsniper внутри HTML-тега ...
  2. добавляем вызов функции CPA_slite.postClick() через событие onClick

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

832

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

652

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

790

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

833

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

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

❗️

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

Установить этот код на все страницы в теге <head>
<script type="text/javascript" src="//pix.sniperlog.ru/js/pix_o_7d71ad400fae521b5f018a33daa03340.js?3"></script>
Клик по ссылке gtm
CPA_slite.postClick('a3', [произвольные данные в формате number или string])
Клик по кнопке gtm
CPA_slite.postClick('a4', [произвольные данные в формате number или string])
Переход на страницу trafsync.com/gtm_test/index.php
CPA_slite.postClick('a5', [произвольные данные в формате number или string])

📘

Дополнительная информация о 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: http://konygin.net/ru/gtm-ru/gtm-variables-built-in/

Основные понятия, которые нужно знать при работе с Google Tag Manager

  • Триггеры – это условия активации тега. Они работают на базе переменных, которые определяют, когда сработает тот или иной тег. Например, с их помощью можно сделать так, чтобы счетчик срабатывал на тех страницах, которые содержат в URL определенную строку и не срабатывал на всех остальных или только при нажатии определенной кнопки на сайте, например, при отправке заполненной контактной формы.
  • Тег – это фрагмент кода JavaScript, который будет размещен на страницах сайта
  • Переменные – содержат информацию о событии, например клик по кнопке или отправка формы заявки

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

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

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

1035

Создание триггера по событию "Клик по ссылке"

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

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

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

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

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

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

991

Создание тега для события "Клик по определенной ссылке"

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

Создание триггера для события "Клик по кнопке"

Приступим к созданию триггера для события “Клик по кнопке” - этот триггер будет определять условие срабатывание тега при нажатии на кнопку с id = testGtmButton.

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

Создание тега для события "Клик по кнопке"

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

Создание триггера для события "Переход на определенную страницу"

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

🚧

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

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

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

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

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

  1. В Условиях активации выбираем "Некоторые события "Окно загружено"
  2. Указываем следующее условие срабатывания триггера - Page URL содержит trafsync.com/gtm_test/index.php и нажимаем кнопку “Сохранить”.

🚧

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

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

1154

Создание тега для функции "Переход на определенную страницу"

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

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

395

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

1366

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

1339

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

1366

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

📘

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

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

  • vclick (validate click) - срабатывает автоматически, при загрузке контейнера

  • aclick (active click) - срабатывает автоматически при наступлении одного из следующих условий:

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

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

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

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

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

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

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

Updated about 6 years ago