Инструменты маркетинга в OpenCart: баннеры
29 Мая 2022г. в 05:07Чтобы разместить баннер, сперва необходимо загрузить изображения в него, после чего назначить баннер на модуль отображения.
Загрузка изображений для баннеров
В панели администратора OpenCart перейдите в System > Design > Banners. Давайте вставим наш первый баннер, добавим название и статус. Пока что мы лишь создали группу для загружаемых изображений.
Чтобы добавить изображения, кликните на add banner. Мы можем добавить заголовок для магазина на любом языке, скопировать или ввести ссылку, найти или загрузить изображение (jpg, png или gif). Назначать изображений в баннер можно сколько угодно, но все изображения должны быть одного размера или, хотя бы, соотношения сторон. Эти изображения будут перелистываться в модуле баннера. (именование баннеров может поставить вас в тупик, так как система использует термин баннер как для набора изображений в баннере, так и для самого изображения)
Назначение баннеров модулям
Выше мы уже упомянули, что баннеры в OpenCart отображаются с помощью модулей. Есть 3 распространенных модуля для показа баннеров: Banner module, Carousel и Slideshow. У всех схожие функции: они анимируют изображения одного размера и позволяют пользователям кликать по ним.
Добавление модуля banner
Модуль banner показывает баннеры путем плавной замены одного изображения другим. Чтобы назначить баннер модулю, перейдите в Extensions > Modules > Banner > Edit.
Кликните add module, так мы вставим баннер в макет. Необходимо выбрать баннер для отображения, задать размеры, выбрать место на макете для отображения, позицию, статус и порядок модуля.
Размер модуля должен вписываться в размер колонки, куда он будет помещен.
Система изменяет размер изображений под это разрешение. Макеты заданы заранее, у них есть имена и описания. Position может принимать left, right, top и bottom. Order задает массив визуального появления других модулей в рамках одного столбца.
Добавление баннеров в модули slideshow
Модуль slideshow отображает изображения баннеров в виде движущегося слайдшоу с анимацией. Этот модуль чаще всего отображается на домашней странице с большими изображениями. Основные параметры модуля (тип анимации, скорость и внешний вид) задаются в файле темы, который нам менять не нужно, так как мы используем заготовленный модуль.
Назначить уже заданный и загруженный баннер slideshow можно, перейдя Extensions > Modules > Slideshow > Edit. При добавлении модуля необходимо задать те же настройки, что для первого модуля. Выберите баннер для показа, размер, макет и положение, задайте статус и порядок. Смотрите скриншот ниже.
Добавление баннеров в модуль carousel
Модуль carousel позволяет отображать набор маленьких баннерных изображений рядом и анимировать их, показывая и скрывая их пошагово по горизонтали. Настроить этот модуль можно точно так же, как со slideshow. Модуль карусели принимает еще 2 параметра:
Значение limit говорит карусели, сколько изображений показывать за один раз
Scroll задает количество перепрыгиваемых изображений между двумя шагами
Как отслеживать клики по баннеру
Эти баннерные модули очень полезны, мало какие E-Commerce решения включают их в ядро. Тем не менее, их возможности ограничены. Вы не можете видеть количество кликов по баннерам. Если вы хотите измерять клики, для этого можно использовать google analytics (вы сами должны установить трек-код).
Клик по баннеру, который ведет на страницу того же сайта в google analytics называется событием. Поэтому для измерения внутренних кликов по баннерам в OpenCart мы будем использовать инструмент отслеживания событий в google analytics. Пример HTML отслеживания события:
<a href="/landing-page-url" onClick="_gaq.push(['_trackEvent', 'category', 'action', 'label, 'value']);"><img src="banner.png" alt="Banner title"></a>
<a href="/landing-page-url" onClick="_gaq.push(['_trackEvent', 'category', 'action', 'label, 'value']);"><img src="banner.png" alt="Banner title"></a>
Событие происходит, когда пользователь кликает на что-то. Событие отслеживается методом _trackEvent(), который хранит следующую информацию: category – группа объектов отслеживания (например, slideshow), action – тип пользовательского взаимодействия (например, клик по баннеру), label – необязательный строковый параметр с дополнительными данными, value – необязательные числовые данные для action. Как видите, простая строка HTML модификации помогает отслеживать клики по нашим баннерам.
Изменение шаблонных файлов модуля для отслеживания кликов по баннерам
Модули banner, slideshow и carousel состоят из шаблонов, которые хранятся в папке с темой. Нам лишь нужно поменять пару строк в шаблонных файлах модуля. Следующий код необходимо вставить в теги <a> в файлы шаблона:
onClick="_gaq.push(['_trackEvent', '{banner type}', 'Clicked', '<?php echo addslashes($banner['title']); ?>']);".
onClick="_gaq.push(['_trackEvent', '{banner type}', 'Clicked', '<?php echo addslashes($banner['title']); ?>']);".
Для баннеров: найдите этот или похожий код в файле темы {your theme folder}\template\module\banner.tpl:
<a href="<?php echo $banner['link']; ?>"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" title="<?php echo $banner['title']; ?>" /></a>
<a href="<?php echo $banner['link']; ?>"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" title="<?php echo $banner['title']; ?>" /></a>
И замените его на этот:
<a href="<?php echo $banner['link']; ?>" onClick="_gaq.push(['_trackEvent', 'Banners', 'Clicked', '<?php echo addslashes($banner['title']); ?>']);"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" title="<?php echo $banner['title']; ?>" /></a>
<a href="<?php echo $banner['link']; ?>" onClick="_gaq.push(['_trackEvent', 'Banners', 'Clicked', '<?php echo addslashes($banner['title']); ?>']);"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" title="<?php echo $banner['title']; ?>" /></a>
Мы добавили banners в качестве компонента категории, экшен clicked, лейбл – заголовок баннера без слешей. Значение выбирать не нужно, так как по умолчанию оно задано в 1, а нам это и нужно.
Шаблон slideshow: можно найти в {your theme folder}\template\module\slideshow.tpl необходимо заменить:
<a href="<?php echo $banner['link']; ?>"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" /></a>
<a href="<?php echo $banner['link']; ?>"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" /></a>
На:
<a href="<?php echo $banner['link']; ?>" onClick="_gaq.push(['_trackEvent', 'Slideshow', 'Clicked', '<?php echo addslashes($banner['title']); ?>']);"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" /></a>
<a href="<?php echo $banner['link']; ?>" onClick="_gaq.push(['_trackEvent', 'Slideshow', 'Clicked', '<?php echo addslashes($banner['title']); ?>']);"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" /></a>
Шаблон карусели находится в {your theme folder}\template\module\carousel.tpl, в нем необходимо заменить:
<li><a href="<?php echo $banner['link']; ?>"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" title="<?php echo $banner['title']; ?>" /></a></li>
<li><a href="<?php echo $banner['link']; ?>"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" title="<?php echo $banner['title']; ?>" /></a></li>
На:
<li><a href="<?php echo $banner['link']; ?>" onClick="_gaq.push(['_trackEvent', 'Carousel', 'Clicked', '<?php echo addslashes($banner['title']); ?>']);"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" title="<?php echo $banner['title']; ?>" /></a></li>
<li><a href="<?php echo $banner['link']; ?>" onClick="_gaq.push(['_trackEvent', 'Carousel', 'Clicked', '<?php echo addslashes($banner['title']); ?>']);"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" title="<?php echo $banner['title']; ?>" /></a></li>
Результат можно посмотреть в Google Analytics Behavior section > Events overview. Там будет категория (в нашем случае тип баннера), количество кликов и название баннера.
Общие сведения о баннерах
Один из минусов banner и slideshow модулей – нельзя задать дату устаревания, управляющему сайтом или маркетинг менеджеру необходимо знать это
Размер файла баннера должен быть маленький. Файл баннера шириной 900px не должен быть тяжелее 100-150Кб
Флэш файлы (SWF), JS или другие HTML файлы использовать нельзя, только статичные изображения JPG, PNG или GIF
Злоупотребление баннерами может нанести вред сайту. Людям не хочется смотреть на сайт, целиком состоящий из баннеров
Попробуйте использовать графические элементы, как в веб-дизайне
Заключение
Мы узнали, что сначала необходимо загрузить изображения баннера в группу, чтобы потом их можно было присвоить модулю отображения banner, slideshow или carousel. Потом мы изменили шаблонные файлы модуля, чтобы отслеживать события кликов через Google Analytics.
