Как сделать код для баннера
Как добавить рекламный баннер на сайт WordPress: html-код баннера для вставки на сайт
Всем привет! Сегодня мы поговорим о том, как добавить баннер на сайт WordPress (в сайдбар). Разберем html-код баннера для вставки на сайт, чтобы у вас не осталось вопросом о том, что и как работает. Готовы? Тогда поехали.
Код баннера для вставки на сайт
Итак, допустим, у вас есть готовый баннер, который вы заказали у профессионалов на биржах фриланса или создали самостоятельно. Ну, или вам его предоставил рекламодатель, но он представляет собой обычную картинку (jpeg, png) и совершенно не понятно, что делать дальше и как правильно установить ее на сайт.
Чтобы превратить обычное изображение в полноценную рекламу, вам понадобится следующий html-код баннера для вставки на сайт (можете скопировать себе):
Не пугайтесь, сейчас разложу по полочкам, что каждый кусочек кода означает:
Запомните, заменяя слова в кавычках, сами кавычки не трогаем! Они являются частью кода! Без них ничего работать не будет!
Так-с, теперь чуть подробнее касательно адреса изображения и того, откуда его брать. Заходим в админку сайта и щелкаем «Медиафайлы» — «Добавить новый»:
Подгружаем картинку для баннера:
Остается перейти в «Медиафайлы» — «Библиотека», выбрать наш баннер и скопировать его адрес:
С этим мы разобрались, теперь я расскажу о том, как добавить баннер на сайт WordPress (с другими CMS не дружу).
Как поставить баннер на сайт
Переходим в панели администратора «Внешний вид» — «Виджеты»:
Перетаскиваем «Текст» в «Сайдбар», переходим с вкладки «Визуально» на «Текст» и копируем туда наш код.
Нажимаем «Сохранить» и проверяем наличие рекламы, а так же работоспособность, щелкнув по нему. Если перенаправит на новую вкладку с открывшимся сайтом рекламодателя – все сделано правильно и можно выдохнуть. Размещение баннера прошло успешно.
Если вам сказали разместить баннер на сайте и дали специальный скрипт, установка будет происходить по тому же принципу, вот только используется уже виджет «html-код»:
Все. Других вариантов размещения я не знаю. Во всех остальных случаях они у меня попросту отказываются отображаться. Да и другие вебмастера используют аналогичные методы, так что все должно быть хорошо.
Заключение
Ну что же, на этом все. Надеюсь, информация была для вас полезной и вы сможете добавить рекламу на свой веб-ресурс, а html-код баннера для вставки на сайт больше не вызовет вопросов. Если так, буду благодарен за репост или подписку. До новых встреч!
HTML5 баннер: что такое и как создать
У нас случились HTML5-баннеры. Клиентам резко их захотелось. Мы обычно делаем в gif, так быстрее. Но если уж сильно хочется, то можно. С ними мы разобрались, заодно и вам поможем понять, что за зверь такой — этот html5 баннер и как его приручить.
Что такое HTML5 баннер?
Если кратко, html5-баннер — это динамическое рекламное изображение на сайте, которое видит пользователь. Но если привычные всем баннеры делаются на основе растровой и векторной графики, то в этом случае используются html-элементы.
В чем главный плюс баннеров в html5?
Где создавать html5 баннер?
Баннеры можно собирать на разных сервисах с шаблонами, типа Canva или Bannersnack. Есть специальные конструкторы, такие как Adobe Animate, но за подобные сервисы надо платить.
А можно сделать как ТРУ-дизайнер в Google Web Designer. И вот почему:
Нюансы при создании html5 баннеров
Собрать сам баннер html5 не так уж и сложно, если есть обывательские навыки в Photoshop (:
А вот правильно «собрать» код уже сложнее:
Лайфхаки от дизайнера
Зацикленная анимация
Если вы создали крутую анимацию, где все картинки летают, а ваша душа радуется — помните, что необходимо её зациклить, чтобы другие смогли любоваться вашей работой бесконечно.
Сделать это можно в несколько простых шагов:
Добавляем событие в завершающей части вашей анимации, кликая на рабочую зону правой кнопкой мыши:
Теперь переходим к началу временной шкалы, добавляем ярлык подобным образом и присваиваем ему имя, например, «start»:
Затем нам снова предстоит путешествие в конец шкалы времени, чтобы добавить событие к только что созданному ярлыку:
В выпадающем окне выбираем «Временная шкала» — «gotoAndPlay» — получатель: page1 — ярлык «start» и нажимаем «ОК»
Поздравляем, теперь вашими трудами можно любоваться бесконечно!
Работа с кодом для правильной выгрузки в Яндекс.Директ
Пожалуй, самый щепетильный момент в создании html баннеров — работа с кодом. Для облегчения вашей жизни мы подготовили простую инструкцию:
В интерфейсе Google Web Designer заходим в режим кода;
Нам нужно добавить мета-тег, указав размеры вашего баннера в соответствующих полях:
Далее нам нужно «завернуть» рабочую область в ссылку с определенным идентификатором и вызвать метод «getClickURLNum» как показано в следующих действиях:
Находим тело баннера в коде и «заворачиваем» его в ссылку, добавляя строчку сразу после
Ниже вызываем указанный на фото метод, его можно скопировать из справочной информации Яндекс.Директа в разделе «Медийная кампания» —«Требования к HTML5-баннерам»
Проделав данные методы с кодом, html5 баннер без проблем загрузится на рекламную площадку. Желаем успехов!
Желаем вам приятного погружения в мир чудо-баннеров html5, где каждый может почувствовать себя классным дизайнером.
Автор: Ксения Лазарева — специалист по интернет-рекламе
Как создать HTML5 баннер для контекстной рекламы с помощью Google Web Designer
Как часто вам приходилось ставить техническое задание веб-дизайнеру на разработку графических объявлений для контекстной рекламы в Яндекс.Директ и Google Ads? Нечасто?
Тогда, скорее всего, вы пользуетесь встроенным конструктором Яндекса, который позволяет автоматически создавать графические объявления в различных размерах (1000×120, 728×90, 480×320, 336×280 и т.д.), или не используете графические объявления в принципе.
В Google для этих целей также есть инструмент, который позволяет создавать адаптивные медийные объявления на основе медиафайлов, полученных с вашего сайта. Введя ссылку, Google просканирует его на предмет изображений. Вы можете использовать их для изображений в рекламе или как логотип.
Бывает так, что изображения на сайте не находятся. Тогда их можно загрузить с компьютера или из фотобанка. Но можно поступить хитрее – создать графические объявления в Яндекс через конструктор, а далее выгрузить полученные изображения и загрузить баннеры в Google Ads.
Однако есть различия в размерах графических объявлений. Те, которые подходят для Яндекса, не всегда подходят для Google, и наоборот.
Лучший вариант – один раз заказать у специалиста креатив в различных размерах, отдельно для Google Рекламы, отдельно для Яндекс.Директ, и на время забыть об этом.
Все это верно, когда речь идет о статических объявлениях. Но самые «продвинутые» компании и рекламодатели используют в продвижении своих продуктов не только изображения, но и динамические форматы – видео, gif-ки, флеш, HTML5.
О последнем формате контента и будем говорить подробнее.
HTML5 баннер — совокупность HTML-элементов с использованием анимации и приятного визуального оформления, адаптированных под различные устройства и браузеры.
Отличительной особенностью HTML от остальных видов баннеров является то, что:
— они показываются схожим образом на всех типах устройств;
— они меньше весят и быстрее загружаются, чем тот же flash;
— HTML5 предоставляет больше возможностей для добавления в баннер различных интерактивных элементов — форм, кнопок, полей и т.д.;
— HTML5 – тренд у специалистов по трафику последних 2-3 лет. Те, кто разбирался в HTML, CSS и JavaScript, имел существенное преимущество по сравнению с другими.
Ключевое слово – ИМЕЛ. С появлением на рынке продукта Google Web Designer ситуация существенно поменялась. Теперь каждый из нас способен быстро и просто проектировать интерактивные объявления для контекстной рекламы без дополнительных знаний в HTML, CSS и JavaScript.
Что такое Google Web Designer
Бесплатная программа (выпущена в 2013 году), позволяет генерировать объявления в HTML5. Мы будем использовать ее для производства стильных анимированных объявлений в Яндекс.Директ и Google Ads под все типы устройств.
В GWD есть и редактор кода, и визуальный редактор. В последнем можно строить картинки с использованием инструментов рисования, написания и добавления 3Д объектов, а также производить анимацию элементов и событий на временной шкале. В редакторе кода можно создавать файлы CSS, JavaScript, и XML.
Переходим к скачиванию программы. Зайдите на сайт google.ru/webdesigner и тапните по кнопке «Скачать Google Web Designer».
Поддерживаются Mac OS 10.10 (и более поздних версий), Windows 7 (и более поздних версий), 64-разрядная версия Linux (Debian/Ubuntu/Fedora/openSUSE). Подробнее о системных требованиях здесь.
На следующем шаге примите пользовательское соглашение. Начнется автоматическая загрузка, после которой вам нужно будет установить программу на свой компьютер. После установки Google Web Designer поприветствует диалоговым окном, в котором можно:
— создать новый файл;
— использовать готовый шаблон объявления;
— открыть существующий файл;
Нажав на «Использовать шаблон», вы попадаете в галерею шаблонов. На момент написания статьи (ноябрь 2018) их доступно 13 видов:
При выборе одного из них слева открывается дополнительная информация по шаблону – на каких устройствах и платформе поддерживается, какие имеет размеры. Можно выбрать «Использовать макет» или сделать «Предварительный просмотр».
Любой макет содержит достаточное количество элементов. Например, для Banner for Google Ads and AdMob размера 300×250 – это:
— заголовок и подзаголовок;
— место под изображения;
— призыв к действию (кнопка CTA).
Вам останется только наполнить его своим контентом. В рамках текущей статьи мы создадим пользовательский (не шаблонный) HTML5 баннер для контекстной рекламы Google Ads и Яндекс.Директ формата 300×250.
Вот так будет выглядеть баннер на выходе:
Как я уже писал выше, лучше заказать один раз графические баннеры у специалиста (за 2 000-3 000 руб.), чем сидеть и самому заниматься разработкой дизайна.
Вот как это выглядит в Photoshop для нашего примера:
Переходим в Google Web Designer, нажимаем «Файл – Создать». В появившемся окне мы будем использовать объявления типа «Баннер». Задаем следующие настройки:
— Место (куда следует сохранить работу).
— Контекст – Google Ads (платформа, для которой создается документ).
Каждая рекламная система поддерживает свой тип документов. Это надо иметь ввиду при создании креативов.
— Размеры – 300×250 (но можно задать произвольный, например, нестандартный под свой сайт).
— Галочка «Адаптивный макет» позволяет начать работу с адаптивным документом, то есть если она стоит, то наш размер созданного документа будет не 300×250, а ширине и высоте присвоится значение в 100%. Поэтому для текущей работы не ставим ее.
— Режим анимации – Расширенный (задает тип произвольной шкалы).
Нажимаем «ОК». Наш файл создан. Перед вами интерфейс программы, который очень похож на привычный Adobe Photoshop:
Теперь разберем панели инструментов Google Web Designer. Я разбил ее на 11 частей:
Файл – создание, сохранение, публикация объектов и шаблонов.
Правка – копирование, вставка, вырезание, удаление, повторение команд, а также «Настройки».
Настройки GWD содержат четыре вкладки:
Основные (настройки программы при первичном открытии, путь до шаблонов, тип объявления и контекст при создании файла);
Режим просмотра макета (то, как выглядит исходный экран, на скриншоте выше 11 элемент);
Режим просмотра кода (выбор цветовой темы и настройки редактора – отступы, автоматическое закрытие тегов, использование пробелов вместо табуляции и т.д.);
Расширенные (предварительный просмотр, ведение журналов и масштаб приложения).
2. В правом верхнем углу находится панель просмотра, которая содержит:
Справка (классический вариант помощи Google);
Режим просмотра (режим, в котором мы по умолчанию находимся в процессе работы);
Просмотр кода (режим HTML-разметки документа, в котором вся информация по файлу, в том числе и по CSS и JavaScript);
Предварительный просмотр (выбор просмотра в определенном браузере – Chrome, Internet Explorer, Opera);
Опубликовать (публикация готового файла – локально на компьютер, в Google Диск или в DoubleClick Studio).
После работы мы сохраним свой файл локально, а потом загрузим его в Google Ads и Яндекс.Директ.
3. Панель инструментов
По аналогии с Photoshop, здесь расположены все необходимые для работы с программой инструменты:
— Инструмент «Путь перемещения»
— Инструмент работы с элементами
— Инструмент 3D-вращения рабочей области
— Инструмент изменения размера области просмотра
4. Настройка инструментов
Отображаются все функции, доступные для выбранного инструмента.
5. Инспектор объявлений
Показывает основные настройки и свойства файлов (контекст, общий размер), а также валидацию (проверку на соответствие всем требованиям).
В ней есть вкладки:
События (можно настраивать действия в объявлении или HTML-документе для определенных жестов пользователя, ключевых кадров на временной шкале и других изменений);
CSS (можно посмотреть стиль оформления любого выбранного элемента);
Динамическая (можно создавать динамические свойства – изменение цвета границы, кнопки и т.д.);
Адаптивные (можно создавать адаптивное содержимое и управлять им).
Если на панели «Адаптивные» выбраны Главные правила, любые трансформации используются ко всему документу. В режиме главных правил следует осуществлять все действия, которые не переопределяют стиль CSS: вставлять или исключать объекты, компоненты или события и т. п.
В ней есть вкладки:
Цвет (можно изменять цвет заливки и контура элементов HTML);
Текст (позволяет добавлять в объявление или на HTML-страницу текстовые элементы).
Структурный редактор показывает схему всех элементов документа в виде дерева.
Состоит из следующих вкладок:
Библиотека объектов (изображения, аудио- и видеофайлы, которые используются в документе. Импортированные объекты хранятся в библиотеке, их можно просматривать и использовать повторно);
Свойства (набор свойств объекта — размер, положение и стиль);
Компоненты (встроенные модули, которые позволяют добавлять определенные функции в объявления или HTML-документы).
Подробнее о компонентах читайте здесь.
10. Временная шкала
Позволяет анимировать объекты с помощью ключевых кадров. В ускоренном режиме анимированная картинка создается покадрово, в расширенном анимируется каждый элемент отдельно.
11. Рабочая область
Центральная часть интерфейса Google Web Designer, на которой происходит вся визуализация. По бокам расположены линейки, справа снизу возможность изменить масштаб.
Создание HTML5 баннера
Чтобы открыть.psd макет в Google Web Designer, нам необходимо сохранить отдельные элементы макета в обычных png файлах. Это нужно для того, чтобы сделать потом красивую анимацию и переходы (отдельное появление логотипа, фона, кнопки и т.д.)
Для того, чтобы добавить наши файлы в GWD, нажмите «Файл – Импортировать объекты». Выберите все файлы сразу и нажмите «Открыть». Теперь они доступны в библиотеке объектов и готовы к анимированию баннера.
Я целенаправленно опускаю процесс создания баннера, поскольку он в каждом проекте индивидуален. Вы захотите покрутить анимацию в одну сторону, я в другую. Вам будет нужно сделать облет кнопки сверху вниз, мне по кругу и т.д.
В качестве дополнительного материала рекомендую посмотреть базовый курс Базовый курс Google Web Designer в Academy for Ads. Есть много роликов на YouTube по работе с GWD. Я же здесь прикрепляю готовый вариант HTML5 баннера, который мы загрузим в рекламные кабинеты Яндекс.Директ и Google Ads.
После создания файла можно перейти в режим просмотра в правом верхнем углу, выбрать нужный браузер (например, Chrome), и увидеть HTML5 в действии:
Данный баннер был сделан за 2 минуты с помощью нескольких ключевых кадров и одного свойства – положение и размер. Вы можете создавать свои произведения искусства без каких-либо знания в HTML/CSS/JavaScript.
Последний шаг – это сохранение баннера и его загрузка в Google Рекламу и Яндекс.Директ. Для этого нажмем в правом верхнем углу кнопку «Опубликовать».
Нам GWD выдал сообщение о том, что проверка HTML5 баннера не удалась. Размер файла превышает допустимый для Google Ads в 150 кб.
Это связано с тем, что мы использовали анимацию. Хотя до ее применения у нас 3 файла имели вес меньше 150 кб. Самый тяжелый (фон) – 130 кб, остальные менее 15 кб.
Решение этой проблемы достаточно простое – пересохранить исходной слой (картинку) в фотошопе с меньшим размером.
Загрузка HTML5 баннера в Google Ads
Заходим в Google Ads и добавляем наше медийное объявление. Путь «Объявления и расширения» — «Загрузить медийное объявления – Выберите на компьютере».
Ключевую роль играет конечный URL, так как при клике в любую область баннера (не только по нашей кнопке «Подробнее»), пользователь перейдет к нам на сайт по заданной ссылке. Нажимаем «Сохранить» и ждем рассмотрения объявления.
Загрузка HTML5 баннера в Яндекс.Директ
Если для медийных объявлений (HTML5) Google Ads есть Google Web Designer, то с Яндекс.Директ не все так просто. Попробовав загрузить готовые креативы в медийную кампанию, нам с большей долей вероятности вылезет ошибка, а точнее ряд:
Яндекс требует обозначать размер баннера в :
А по клику на объявление открывается страница, размещенная в области «Ссылка на сайт» на странице создания или редактирования группы объявлений. Перенаправление на эту страницу генерируется в баннере вызовом метода yandexHTML5BannerApi.getClickNum(1).
Переходим обратно в GWD и создаем новый файл, только в качестве контекста выбираем не Google Ads, а «Внешнее объявление».
Из предыдущего баннера для Google Ads перенести все слои с временной шкалы путем выделения и копирования/вставки с помощью Ctrl+C и Ctrl+V (для Windows). Проблема с внешними ссылками решена.
Теперь добавляем мета-тег Яндекса. Для этого переходим в режим кода и вставляем в шапку:
У нас – ширина 300 и высота 250. У вас может быть другая, все зависит от исходного размера баннера.
Теперь копируем код из справки с методом yandexHTML5BannerApi.getClickNum(1) и вставляем его в как показано ниже.
Закрывающий тег после, скрипт с document.getElementById ниже. Публикуем на своем компьютере новый файл, а затем повторно загружаем его в медийную кампанию.
Ошибок быть не должно. Далее для объявления указываете ссылку на сайт, добавляете пиксель и счетчик показов (при необходимости) и сохраняете.
Вы только что научились создавать свои первые HTML5 баннеры для контекстной рекламы без каких-либо знаний в HTML/CSS/JavaScript. И все это благодаря Google Web Designer.