полная инструкция — Маркетинг на vc.ru
Мы не нашли подробного технического материала по заливке HTML5-баннеров, поэтому решили написать его сами. В статье наш вариант модификации кода, с которой получилось пройти двухэтапную модерацию в Яндекс.Директ. Плюс раскрываем один нюанс, о котором умалчивает Яндекс.Справка.
799 просмотров
Сразу обозначим, что модификация кода — это монотонный процесс. В код каждого баннера (у нас получилось 30) важно вставить коды вызова метода Яндекс, иначе баннеры не пройдут модерацию. Массовый способ изменения кода, увы, не был найден, поэтому пришлось прорабатывать баннер один за другим.
Двухэтапная модерация: что это значит
При первой загрузке баннеров Яндекс.Директ сразу же выкатывает критические ошибки, с которыми нельзя создать РК. После того, как они устранены, дается добро на отправку кампании на модерацию. Однако это не гарантирует, что баннеры скоро начнут показываться. После модерации могут появиться новые ошибки.
Для выполнения задачи пригодилась бесплатная программа Google Web Designer. Сюда удобно подгружать файлы-html и модифицировать код. Вызов метода добавляется в начало и конец кода. Теперь по порядку.
Куда и как вставить yandexHTML5BannerApi.getClickURLNum(1)
Вызов метода необходим для правильного перехода по ссылке. Заострять внимание на теории мы сейчас не будем, ее и так достаточно в справке Яндекса.
Нас интересует первая часть кода, тег — varClickTAG, который идет после
Вывод: если вы добавляете в баннер кнопку, то ссылку, которая идет после var clickTag нужно заменить на вызов метода. Полный вид строки для добавления: var bsClickTAG = window.yandexHTML5BannerApi ? window.yandexHTML5BannerApi.getClickURLNum(1) : »;
Как это выглядит в коде:
Обратите внимание, что в var ClickTAG добавлено bs. Соответственно, ниже, где есть ссылка на ClickTag тоже необходимо добавить bs, чтобы не нарушалась логика кода.
Еще один момент — в строке window.goTOURLWithoutBSURL заменено false на true. Поскольку мы не нашли инструкции по модификации кода, то пробовали рандомно менять некоторые переменные. Трудно сказать, играет ли эта замена ключевую роль в прохождении модерации. Но поскольку у нас получилось добиться заветного статуса «Допущено к показам» с таким кодом — мы спешим им поделиться.
Куда вставить вторую часть кода вызова метода
Часть добавляется в тело кода с тегами .
Из-за особенностей генерируемого кода в Creatopy, у нас в теле получилась только одна строка кода, что упростило добавление части для Яндекса. Так выглядит исходный код:
А ниже уже пофиксенная часть кода. Здесь все просто: взяли его из справки Яндекса и добавили перед исходной строкой:
Несколько тонкостей, из-за которых Яндекс может не пропустить html-5 баннеры
- Названия Папок и архивов прописываются строго на английском, без пробелов. Если даже одна буква будет на русском — Яндекс выкинет ошибку и не пропустит файлы при первичной заливке в РК.
- В коде баннера должен быть прописан размер баннера в блоке <head>. Например, для баннера размером 160х600 код будет выглядеть так: <meta name=»ad.size» content=»width=160,height=600″>
Аналогично размер баннера в коде должен дублироваться во всех баннерах. В Creatopy эта строка автоматически проставляется, поэтому мы избежали дополнительных хлопот с размерами.
О чем не пишет Яндекс.Справка
Странно, что в справке нет упоминаний о том, что код не заработает, если не вставить скрипт с библиотекой шрифтов Яндекса после метатега размера. Это знание было бы очень полезно тем, кто впервые создает баннеры.
Получается, что шрифт для креатива может быть выбран любой, но в коде ссылка на Google Fonts должна быть только с указанием дополнительной части кода. Без нее Яндекс будет выкидывать ошибку о неправильном оформлении внешних ссылок и не пропустит креативы на первом кругу модерации.
Вот часть, которая должна быть добавлена: <script type=»text/javascript» src=»https://awaps.
На заметку специалистам, которые занимаются продвижением медицинской тематики:
В HTML-5 баннеры обязательно добавлять дисклеймер вручную, Яндекс его не подставит автоматически. Советуем помнить об этом и сделать на этапе создания визуала, чтобы избежать лишней траты времени на повторную модификацию кода.
Финальный совет
Система модерации медийной кампании часто халтурит. Когда все изменения в код были внесены, ошибки не исчезали. Мы обратились в поддержку за подробным разъяснением отклонения, потому что идей, что конкретно нарушено, больше не было. И оказалось, что с баннерами все нормально, ошибки прописывались случайно. Модератор вручную их сняла и, о чудо, РК наконец-то была полноценно принята к показам. Поэтому если вам кажется, что вы все сделали правильно, обратитесь в поддержку за подсказкой. Возможно, проблема на их стороне.
код баннера для вставки на сайт
Обновлено: Автор: Максим Ляшенко
Всем привет! Сегодня мы поговорим о том, как добавить баннер на сайт WordPress (в сайдбар). Разберем html-код баннера для вставки на сайт, чтобы у вас не осталось вопросом о том, что и как работает. Готовы? Тогда поехали.
Содержание
- Код баннера для вставки на сайт
- Как поставить баннер на сайт
- Заключение
Итак, допустим, у вас есть готовый баннер, который вы заказали у профессионалов на биржах фриланса или создали самостоятельно. Ну, или вам его предоставил рекламодатель, но он представляет собой обычную картинку (jpeg, png) и совершенно не понятно, что делать дальше и как правильно установить ее на сайт.
Чтобы превратить обычное изображение в полноценную рекламу, вам понадобится следующий html-код баннера для вставки на сайт (можете скопировать себе):
<a target="_blank" rel="nofollow" href="ссылка"> <img alt="атрибут альт" src="адрес изображения" />
Не пугайтесь, сейчас разложу по полочкам, что каждый кусочек кода означает:
- target=”_blank” – открывает сайт рекламодателя в другом окне и таким образом не ухудшает поведенческие факторы;
- rel=”nofollow” – запрет на индексацию ссылки. Оставляем, чтобы не навредить продвижению сайта;
- href=”ссылка” – меняем слово ссылка на партнерскую ссылку или ту, что дал рекламодатель;
- alt=”атрибут альт” – вместо слов атрибут альт указываем, собственно, атрибут альт. Другими словами, это то же самое описание, которое мы составляем для всех картинок в наших статьях;
- src=”адрес изображения” – вместо слов адрес изображения указываем адрес нашего баннера, загруженного на хостинг. Если не понимаете о чем я, подробная инструкция будет чуть ниже;
- width=”300” height=”600” – указываем габариты изображения(ширина и высота соответственно) в пикселях. Ускоряет загрузку нашей рекламы.
Запомните, заменяя слова в кавычках, сами кавычки не трогаем! Они являются частью кода! Без них ничего работать не будет!
Так-с, теперь чуть подробнее касательно адреса изображения и того, откуда его брать. Заходим в админку сайта и щелкаем «Медиафайлы» — «Добавить новый»:
Подгружаем картинку для баннера:
Остается перейти в «Медиафайлы» — «Библиотека», выбрать наш баннер и скопировать его адрес:
С этим мы разобрались, теперь я расскажу о том, как добавить баннер на сайт WordPress (с другими CMS не дружу).
Переходим в панели администратора «Внешний вид» — «Виджеты»:
Перетаскиваем «Текст» в «Сайдбар», переходим с вкладки «Визуально» на «Текст» и копируем туда наш код.
Нажимаем «Сохранить» и проверяем наличие рекламы, а так же работоспособность, щелкнув по нему. Если перенаправит на новую вкладку с открывшимся сайтом рекламодателя – все сделано правильно и можно выдохнуть. Размещение баннера прошло успешно.
Если вам сказали разместить баннер на сайте и дали специальный скрипт, установка будет происходить по тому же принципу, вот только используется уже виджет «html-код»:
Все. Других вариантов размещения я не знаю. Во всех остальных случаях они у меня попросту отказываются отображаться. Да и другие вебмастера используют аналогичные методы, так что все должно быть хорошо.
Ну что же, на этом все. Надеюсь, информация была для вас полезной и вы сможете добавить рекламу на свой веб-ресурс, а html-код баннера для вставки на сайт больше не вызовет вопросов.
Как добавить рекламные баннеры HTML5 в WordPress
Наиболее распространенной рекламой, используемой на веб-сайтах WordPress, является реклама со статическими изображениями, которая имеет ограниченную привлекательность для посетителей сети. Это связано с тем, что пользователи сети привыкли встречать такую рекламу практически на всех веб-сайтах, которые они посещают каждый день, будь то блог, страница в социальной сети или любой другой онлайн-актив.
Здесь динамическая реклама работает лучше, чем статическая графическая реклама, поскольку она дает свежий взгляд на рекламируемый продукт. Динамические объявления, также известные как объявления HTML5 или объявления с динамическим содержанием, предоставляют пользователям более интерактивный контент в объявлениях, что приводит к повышению CTR объявления.
Что такое объявление HTML5?
Медийные баннеры HTML5 или широко известные как «Rich Media», определяются Google как
«Rich Media — это цифровой рекламный термин для рекламы, которая включает расширенные функции, такие как видео, аудио или другие элементы, которые побуждают зрителей взаимодействовать и взаимодействовать с контентом».
Как правило, это рекламные баннеры, которые помогают вашей рекламе выделиться из толпы за счет привлекательного и интерактивного контента, помимо статической графики, которая редко конвертируется. Согласно недавнему опросу, проведенному Markinblog, « 54% потребителей хотят видеть больше видеоконтента от бренда или компании, которую они поддерживают ».
Баннерная реклама HTML5 похожа на веб-страницы, встроенные в веб-страницу, поскольку мы можем использовать языки сценариев, такие как JavaScript и CSS, для создания динамического контента. Все это можно сделать без необходимости использования какого-либо стороннего программного обеспечения, такого как Adobe Flash Player.
Структура HTML-объявления
HTML-баннеры представляют собой небольшие автономные веб-страницы. Следовательно, они содержат пару файлов HTML.
Эти файлы содержат файл .html и другие файлы, которые можно использовать для реализации интерактивных баннеров на вашем веб-сайте WordPress.
Базовая структура файла .html состоит из тега « head » и тега « body » и имеет следующую форму.
Это основной заголовок
Это абзац.
Мы можем использовать этот файл в качестве шаблона и скопировать рекламные коды в области кода заголовка и тела. Или же мы можем реализовать файл .html в новом iframe.
Хотя реализация этих различных методов с помощью плагина WP AdCenter является простым процессом, давайте рассмотрим включение этих файлов.
Это метод, при котором вам нужно будет найти теги head и body в предоставленном файле .html и использовать их для создания рекламы в плагине WP AdCenter. Этот метод лучше всего реализовать, если вы имеете опыт работы с HTML и общей логикой шаблонов.
- Загрузите и получите доступ к файлу . html, который вы создали/получили для рекламного баннера.
- Откройте файл .html в текстовом редакторе, например в блокноте, и найдите код и. Вы можете игнорировать
и любое предоставленное описание. - Войдите в свою панель управления WordPress и нажмите WP AdCenter>>Настройки>>Script Adder
- Вставьте код из файла HTML соответствующим образом. Сохраните его после завершения.
- Теперь создайте объявление в интерфейсе WP AdCenter и вставьте остальную часть рекламного кода, указывающего на ранее вставленный тег.
- Загрузите все файлы из рекламного пакета HTML5 в каталог вашего сайта и настройте пути для заголовка и основного объявления.
- Опубликуйте объявление и разместите его на любой из своих веб-страниц.
Если ваш тег
включает вызов функции, такой как init() , вам придется вызывать эту функцию вручную.Метод 2. Работа с iframe для рекламы HTML5 с помощью WP AdCenter
Это относительно простой метод; вам нужен только доступ к корневому каталогу вашего веб-сайта, который использует программное обеспечение FTP-клиента.
- Загрузите папку с файлами баннерной рекламы HTM5 на свой веб-сайт с помощью программного обеспечения FTP.
- Вы можете использовать тот же путь к каталогу, указанный в FTP, или создать новый каталог для своих баннеров HTML5. После этого вы можете поместить каталог в wp-content/uploads , чтобы они загружались по пути wp-content/uploads/html5/my-ad/.
- Создайте новое объявление типа «Обычный текст и код» и включите следующий код:
. Такая реклама предлагает правильную технологию, а также гибкость, необходимую вашему бренду для повышения узнаваемости и повышения коэффициента конверсии. Кроме того, они также обладают высокой совместимостью, гарантируя, что они будут выглядеть ориентированными на всех устройствах. В этой статье вы узнаете, что такое баннерная реклама HTML5, как создавать баннерную рекламу HTML5 и преимущества ее использования для вашего бренда, продуктов или услуг.
Понимание концепции баннеров HTML5Объявления в формате HTML5 представляют собой рекламные веб-баннеры, созданные с помощью файлов HTML5. Эти файлы могут быть разработаны с помощью кодов HTML и CSS с нуля или с использованием специальных инструментов. Основная цель их использования — предложить аудитории привлекающий внимание, интерактивный и интересный опыт просмотра рекламы. Одним из самых больших преимуществ объявлений HTML5 является то, что они очень отзывчивы, что позволяет им отлично выглядеть на разных экранах и в веб-браузерах.
Вот основные сведения, которые вам необходимо знать, прежде чем вы научитесь создавать баннеры HTML5.
HTML5 — это последнее обновление языка разметки гипертекста (HTML), который является стандартным языком, описывающим дизайн и содержимое всех веб-страниц. Он предлагает простой и оптимальный способ создания рекламных баннеров и оказывается очень полезным для онлайн-рекламы благодаря своей гибкости для отображения хорошо ориентированных баннеров на всех устройствах. Вы также можете создавать мультимедийный рекламный контент с помощью технологии HTML.
Объявления HTML5 позволяют как издателю, так и рекламодателю разрабатывать рекламные кампании, которые легко адаптируются с помощью баннеров и подходят для всех платформ. Знание того, как создавать рекламу в формате HTML5, также поможет вам сэкономить время на клонировании сотен версий одной и той же рекламы, тем самым снизив вероятность ошибок при улучшении производства баннеров на вашем веб-сайте. В дополнение к этому Баннерная реклама HTML5 также предлагает вам гибкость настройки текста, изображений, видео, а также JavaScript, делая их редактируемыми в соответствии с требованиями. Объявления HTML5 также могут динамически оптимизировать себя, что делает объявление ориентированным и точным без потери какой-либо функциональности.
Как создать баннерную рекламу HTML5?После окончания эры Flash ответственность за создание высококачественной интерактивной рекламы была передана HTML5. Вот как использовать HTML5 для создания рекламных баннеров , отличающиеся высокой производительностью.
Существует несколько веб-приложений, которые могут помочь вам в разработке и создании качественной рекламы HTML5 благодаря интегрированному визуальному интерфейсу и кодовому интерфейсу. В этом процессе вам придется либо писать эти коды с нуля, либо воспользоваться помощью разработчика, имеющего практический опыт создания кодов HTML и CSS. Кроме того, вы также можете использовать различные шаблоны, доступные в веб-приложении, для поддержки дизайна рекламных баннеров, а затем соответствующим образом написать коды. Хотя этот процесс создания баннеров HTML5 для продвижения в цифровом формате кажется интересным, он может занять немного времени. В связи с этим многие маркетологи и рекламодатели выбирают платформы управления креативами, такие как Airtory, которые имеют функцию создания рекламы, что позволяет им создавать высокоэффективные баннеры HTML5 за гораздо меньшее время. Эти платформы управления креативами позаботятся обо всем, начиная с кодирования и заканчивая интерактивными и адаптивными баннерами с помощью различных инструментов и мультимедийных элементов.
Преимущества создания баннеров HTML5Теперь, когда вы знаете , как создавать баннеры HTML5; Вот некоторые из преимуществ, о которых вы должны знать:
1.
Быстрое привлечение аудиторииБаннерная реклама HTML5 позволяет рекламодателям включать в свою рекламу различные привлекательные элементы, которые способствуют вовлечению аудитории. Например, раскрытие опыта, викторины, карусели и многое другое. Кроме того, они дают рекламодателям возможность исследовать творческие идеи в рамках одного и того же ограниченного рекламного пространства. Это, в свою очередь, помогает им быстро привлечь внимание, что приводит к лучшему запоминанию бренда и эффективности рекламы с точки зрения вовлеченности пользователей, времени, затрачиваемого на рекламу, и, наконец, CTR.
2.
Раскройте творческий потенциалГоворят, креативность и HTML5-реклама идут рука об руку. Это верно, поскольку они позволяют рекламодателям и маркетологам более творчески подходить к графике, тексту и изображениям. Кроме того, реклама HTML5 также позволяет им добавлять в баннер расширенную анимацию, взаимодействие с пользователем и видеоэлементы, тем самым повышая креативность и обеспечивая качественное рекламное взаимодействие.