Статьи

OpenCart банери як ефективний інструмент маркетингу

  1. Завантаження зображень для банерів
  2. Призначення банерів модулів
  3. Додавання модуля banner
  4. Додавання банерів в модулі slideshow
  5. Додавання банерів в модуль carousel
  6. Як відстежувати кліки по банеру
  7. Зміна шаблонних файлів модуля для відстеження кліків по банерах
  8. Загальні відомості про банерах
  9. висновок

Від автора: в магазині на OpenCart банери можна розмістити в різних формах

Від автора: в магазині на OpenCart банери можна розмістити в різних формах. Це можуть бути статичні зображення, каруселі або слайдшоу. Кожен банер може складатися з одного або більше зображень, а ці групи зображень можуть прив'язуватися до різних модулів в залежності від розміру і їх призначення.

Щоб розмістити банер, спершу необхідно завантажити зображення в нього, після чого призначити банер на модуль відображення.

Завантаження зображень для банерів

В панелі адміністратора OpenCart перейдіть в System> Design> Banners. Давайте вставимо наш перший банер, додамо назву і статус. Поки що ми лише створили групу для завантажуваних зображень.

Щоб додати зображення, клікніть на add banner. Ми можемо додати заголовок для магазину на будь-якій мові, скопіювати або ввести посилання, знайти або завантажити зображення (jpg, png або gif). Призначати зображень в банер можна скільки завгодно, але все зображення повинні бути одного розміру або, хоча б, співвідношення сторін. Ці зображення будуть перегоратися в модулі банера. (Іменування банерів може поставити вас в глухий кут, тому що система використовує термін банер як для набору зображень в банері, так і для самого зображення)

(Іменування банерів може поставити вас в глухий кут, тому що система використовує термін банер як для набору зображень в банері, так і для самого зображення)

Безкоштовний курс по PHP програмування

Освойте курс і дізнайтеся, як створити динамічний сайт на PHP і MySQL з повного нуля, використовуючи модель MVC

В курсі 39 уроків | 15 годин відео | исходники для кожного уроку

Отримати курс зараз!

Призначення банерів модулів

Вище ми вже згадали, що банери в OpenCart відображаються за допомогою модулів. Є 3 поширених модуля для показу банерів: Banner module, Carousel і Slideshow. У всіх схожі функції: вони анімуйте зображення одного розміру і дозволяють користувачам клацати по ним.

Додавання модуля banner

Модуль banner показує банери шляхом плавної заміни одного зображення іншим. Щоб призначити банер модулю, перейдіть в Extensions> Modules> Banner> Edit.

Натисніть add module, так ми вставимо банер в макет. Необхідно вибрати банер для відображення, задати розміри, вибрати місце на макеті для відображення, позицію, статус і порядок модуля.

Розмір модуля повинен вписуватися в розмір колонки, куди він буде поміщений.

Система змінює розмір зображень під цей дозвіл. Макети задані заздалегідь, у них є імена і описи. Position може приймати left, right, top і bottom. Order задає масив візуального появи інших модулів в рамках одного стовпчика.

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>

Подія відбувається, коли користувач клацає на щось. Подія відстежується методом _trackEvent (), який зберігає таку інформацію: category - група об'єктів спостереження за ним (наприклад, slideshow), action - тип користувальницького взаємодії (наприклад, клік по банеру), label - необов'язковий строковий параметр з додатковими даними, value - необов'язкові числові дані для action. Як бачите, проста рядок HTML модифікації допомагає відслідковувати кліки по нашим банерах.

Зміна шаблонних файлів модуля для відстеження кліків по банерах

Модулі banner, slideshow і carousel складаються з шаблонів, які зберігаються в папці з темою. Нам лише потрібно поміняти пару рядків в шаблонних файлах модуля. Наступний код необхідно вставити в теги <a> в файли шаблону:

onClick = "_gaq.push ([ '_ trackEvent', '{banner type}', 'Clicked', '<? php echo addslashes ($ banner [' title ']);?>']);" .

Для банерів: знайдіть цей або схожий код у файлі теми {your theme folder} \ template \ module \ banner.tpl:

tpl:

Безкоштовний курс по PHP програмування

Освойте курс і дізнайтеся, як створити динамічний сайт на PHP і MySQL з повного нуля, використовуючи модель MVC

В курсі 39 уроків | 15 годин відео | исходники для кожного уроку

Отримати курс зараз!

&lt;A href = "<? Php echo $ banner [ 'link'];?&gt;"> <Img src = "<? Php echo $ banner [ 'image'];?&gt;" Alt = "<? Php echo $ banner [ 'title'];?&gt; "title =" <? php echo $ banner [ 'title'];?> "/> </ a>

І замініть його на цей:

&lt;A href = "<? Php echo $ banner [ 'link'];?>" OnClick = "_gaq.push ([ '_ trackEvent', 'Banners', 'Clicked', '<? Php echo addslashes ($ banner [ 'title']);?> ']); " > <Img src = "<? Php echo $ banner [ 'image'];?&gt;" Alt = "<? Php echo $ banner [ 'title'];?>" Title = "<? Php echo $ banner [ ' title '];?> "/> </ a>

Ми додали banners як компонент категорії, екшен clicked, лейбл - заголовок банера без слешів. Значення вибирати не потрібно, так як за замовчуванням воно задано в 1, а нам це і потрібно.

Шаблон slideshow: можна знайти в {your theme folder} \ template \ module \ slideshow.tpl необхідно замінити:

&lt;A href = "<? Php echo $ banner [ 'link'];?&gt;"> <Img src = "<? Php echo $ banner [ 'image'];?&gt;" Alt = "<? Php echo $ banner [ 'title'];?> "/> </ a>

на:

&lt;A href = "<? Php echo $ banner [ 'link'];?>" OnClick = "_gaq.push ([ '_ trackEvent', 'Slideshow', 'Clicked', '<? Php echo addslashes ($ banner [ 'title']);?> ']); " > <Img src = "<? Php echo $ banner [ 'image'];?&gt;" Alt = "<? Php echo $ banner [ 'title'];?>" /> </ A>

Шаблон каруселі знаходиться в {your theme folder} \ template \ module \ carousel.tpl, в ньому необхідно замінити:

<Li> <a href = "<? Php echo $ banner [ 'link'];?&gt;"> <Img src = "<? Php echo $ banner [ 'image'];?&gt;" Alt = "<? Php echo $ banner [ 'title'];?&gt; "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'];?&gt;" 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.

Автор: Zsolt Gere

джерело: http://code.tutsplus.com/

Редакція: Команда webformyself.

Безкоштовний курс по PHP програмування

Освойте курс і дізнайтеся, як створити динамічний сайт на PHP і MySQL з повного нуля, використовуючи модель MVC

В курсі 39 уроків | 15 годин відео | исходники для кожного уроку

Отримати курс зараз! Отримати курс зараз

Подивіться відео і дізнайтеся покроковий план по створенню сайту з нуля!

Дивитися відео

Push ([ '_ trackEvent', '{banner type}', 'Clicked', '<? php echo addslashes ($ banner [' title ']);?
Lt;A href = "<?
Php echo $ banner [ 'link'];?
Gt;"> <Img src = "<?
Php echo $ banner [ 'image'];?
Gt;" Alt = "<?
Php echo $ banner [ 'title'];?
Gt; "title =" <?
Php echo $ banner [ 'title'];?
Php echo $ banner [ 'link'];?

Новости