портал технической поддержки

#ОБРАЗОВАНИЕ22

Хостинг сайтов

в домене edu22.info

Размещения баннера с формой подписки для жителей Алтайского края с пикселем на клик и пикселем на показ

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

Для установки баннера, ведущего на лендинги с формой подписки для системы персонализированных коммуникаций СПК - https://russia.information-region.ru/, загрузите на сайт подходящее по размеру изображение баннера.
Как рекомендуется, чтобы баннер смотрелся более красиво на мобильных устройствах, нужно, например, для баннера размером 240x400 загрузить картинку 480x800, при этом в настройках баннера надо установить ширину 240x400.

480x800

Скачать
Использовать для баннера размером примерно 240x400 (но не более 480x800). Настройках изображения устанавливается нужная ширина баннера в 240x400 .

600x500

Скачать
Использовать для баннера размером примерно 300x250 (но не более 600x500). Настройках изображения устанавливается нужная ширина баннера в 300x250 .

600x600

Скачать
Использовать для баннера размером примерно 300x300 (но не более 600x600). Настройках изображения устанавливается нужная ширина баннера в 300x300 .

600x1200

Скачать
Использовать для баннера размером примерно 300x600 (но не более 600x1200). Настройках изображения устанавливается нужная ширина баннера в 300x600 .

1456x180

Скачать
Использовать для баннера размером примерно 728x90 (но не более 1456x180). Настройках изображения устанавливается нужная ширина баннера в 728x90 .
Создайте специальный текстовый модуль/виджет, определите его позицию на сайте, внесите все необходимые настройки по его отображению на сайте.
Установите в модуль/виджет загруженное изображение баннера и наложите на него ссылку клика - https://synctosync.ru/sync/lpregclicks/pixel.gif?utm_source=ru-alt&utm_medium=banner_view&utm_campaign=emailing . Так клик по баннеру будет вести по ссылке на страницу лендинга подписки - "Пиксель на клик".
Для подсчета показа баннеров рядом с картинкой самого баннера необходимо грузит картинку (черный квадрат размером 1Х1 пиксель) по ссылке - https://synctosync.ru/sync/lpregviews/pixel.gif?utm_source=ru-alt&utm_medium=banner_view&utm_campaign=emailing.
Загружать изображение чёрного пикселя на сайт не нужно! Необходимо в процессе вставки изображения в модуль/виджет вписать в адресе изображения указанную ссылку на чёрный пиксель - это и будет "Пиксель на показ".
Чтобы чёрный пиксель не был виден на сайте и не портил общий вид дизайна, можно скрыть видимость этого изображения с помощью свойства display: none стилей css , т.е. добавить параметр style="display: none;" к тегу картинки.
Реализация описанной инструкции на популярных CMS


CMS Joomla

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

Откроем "Расширения"->"Модули" и создадим новый модуль типа "HTML-код".



В данном примере рассмотрена установка баннера на сайте с использованием редактора статей JCE (применяется на всех стартовых пакетов от АИЦТиОКО).
Установим сам баннер, при нажатии на который будем перемещаться на лендинг подписки. Вставим изображение баннера в поле редактора (загрузить, если изображение баннера ещё не загружали, или выбрать из загруженных), в параметрах настройки изображения укажите подходящие размеры баннера с включённой галочкой сохранения пропорций.



Выделим вставленное изображение и наложим на неё ссылку, нажав на функциональную кнопку встраивания ссылок (так же как и для текста, но сейчас на изображение), здесь в открывшемся окне настройки ссылки впишем в поле "URL" адрес клика -
https://synctosync.ru/sync/lpregclicks/pixel.gif?utm_source=ru-alt&utm_medium=banner_view&utm_campaign=emailing


 Внимание ниже слайдер с несколькими скриншотами.



В поле цели открытия ссылки "target" можно указать открытие в новом окне. И подтверждаем вставку.
Это и будет "Пиксель клика".
Таким образом устанавливаются все обычные баннеры по типу - картинка с ссылкой.


Для подсчета показа баннеров рядом с(лучше под) изображением самого баннера вставляем картинку "чёрный пиксель" с адресом изображения -
https://synctosync.ru/sync/lpregviews/pixel.gif?utm_source=ru-alt&utm_medium=banner_view&utm_campaign=emailing


То есть, здесь не нужно загружать и/или выбирать из загруженных изображение. Сразу в поле "URL" адреса картинки вписываем вышеуказанный адрес.



Это и есть "Пиксель показа".
Но он пока виден на сайте как чёрная точка... не слишком заметно, но всё же. Чтобы скрыть его визуально, в окне настройки изображения перейдём на вкладку "Расширенные" и в поле "Стиль" впишем значение display: none .



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


При просмотре в режиме кода редактора модуля получаем следующий код:
<p>
<a href="https://synctosync.ru/sync/lpregclicks/pixel.gif?utm_source=ru-alt&utm_medium=banner_view&utm_campaign=emailing" target="_blank" rel="noopener">
<img src="images/banners/600x500.gif" alt="Лендинги с формой подписки для системы персонализированных коммуникаций СПК" width="250" height="208" />
</a>
<img src="https://synctosync.ru/sync/lpregviews/pixel.gif?utm_source=ru-alt&utm_medium=banner_view&utm_campaign=emailing" alt="" style="display: none;" />
</p>


здесь <a ...></a> - это ссылка клика, которая наложена на картинку баннера <img ...>; а вторая картинка <img...> - это пиксель показа, который имеет параметр style="display: none;" (скрытие из вида).
Если вторая картинка <img...> входит вместе с первой <img...> в ссылку <a ...></a>, то это неверно, её необходимо вынести за закрывающий символ "</a>".
Если у Вас в редакторе нет поля для вставки стиля, то Вы можете самостоятельно прописать style="display: none;"  напрямую в код тега картинки.

Публикуем модуль в желаемое место на сайте. В данном примере мы установили модуль в правую колонку, поэтому в настройках позиции указали значение "right".


 Внимание ниже слайдер с несколькими скриншотами.





CMS WordPress

Загрузите изображение баннера привычным способом в каталог Медиафайлов.

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

Откроем "Внешний вид"->"Виджеты" и создадим новый виджет типа "Текст" в желаемую область позиций.
В редактировании этого виджета вставим загруженное изображение баннера из медиафайлов. Выделим вставленное изображение и произведём его редактирование... Здесь укажем нужный размер изображения, чтобы баннер корректно встраивался в область виджета. Если из перечисленных размеров нет подходящего, то укажем параметр "Произвольный" в поле "Размер" и зададим нужные параметры.
В поле "Ссылка" выбираем параметр "Произвольный URL" и в поле "URL" вписываем адрес ссылки (Либо наложите ссылку на изображение напрямую, через функциональную кнопку вставки ссылки), куда баннер должен перенести пользователя при клике - это "Пиксель на клик":
https://synctosync.ru/sync/lpregclicks/pixel.gif?utm_source=ru-alt&utm_medium=banner_view&utm_campaign=emailing


Так же в расширенных настройках можно указать параметр "Открывать в новой вкладке". Нажимаем кнопку "Обновить".


 Внимание ниже слайдер с несколькими скриншотами.



Для подсчета показа баннеров рядом с изображением самого баннера вставляем картинку чёрный пиксель с адресом изображения -
https://synctosync.ru/sync/lpregviews/pixel.gif?utm_source=ru-alt&utm_medium=banner_view&utm_campaign=emailing


Для этого в редакторе виджета снова нажимаем кнопку вставки медиафайла и в открывшемся окне переходим на вкладку "Вставить с сайта", здесь в поле с "http://" и прописываем вышеуказанный адрес пикселя.
Вставляем изображение в запись.



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

Вариант 1 (создание класса): создать дополнительный класс в редакторе вставки "Дополнительных стилей" ("Внешний вид"->"Настроить"->"Дополнительные стили" ), например .nodisplay{display: none ;} и этот класс прописать у картинки чёрного пикселя. В этом случае чёрный пиксель скроется на сайте, но его будет видно в редакторе.
Таким образом этот стиль в дальнейшем можно будет применять и к другим объектам сайта.


 Внимание ниже слайдер с несколькими скриншотами.



Вариант 2 (вставка стиля напрямую): перейдём в редакторе виджета на вкладку "Текст", где отобразится содержимое виджета в виде кода:
<a href="https://synctosync.ru/sync/lpregclicks/pixel.gif?utm_source=ru-alt&utm_medium=banner_view&utm_campaign=emailing" target="_blank" rel="noopener">
<img class="alignnone wp-image-380" src="http://template.edu22.info/WordPress/SuperSchool-v21/wp-content/uploads/2022/01/600x500-300x250.gif" alt="" width="200" height="167" />
</a>
<img class="alignnone" src="https://synctosync.ru/sync/lpregviews/pixel.gif?utm_source=ru-alt&utm_medium=banner_view&utm_campaign=emailing" alt="" width="1" height="1" />


здесь <a ...></a> - это ссылка клика, которая наложена на картинку баннера <img ...>; а вторая картинка <img...> - это пиксель показа (см. на скриншоте под #3). Если вторая картинка <img...> входит вместе с первой <img...> в ссылку <a ...></a>, то это неверно, её необходимо вынести за закрывающий символ "</a>".
В тег второй картинки <img...> под #3 нужно вписать код стиля style="display: none;" (скрытие из вида). Вставим его в конец тега перед закрывающим символом "/>", чтобы не нарушить правильное написание кода.
После переключения редактора на вкладку "Визуально", изображение чёрного пикселя уже исчезнет из виду, но останется прописано в виде кода.
Обязательно обновляем изменения в виджете, чтобы они применялись на сайте.


 Внимание ниже слайдер с несколькими скриншотами.