How to create banner and track click numbers in Opencart 2.0

For any online business model, banner is one of the most popular and also the best practice of Marketing. Banners can be displayed in many forms: a static image, a carousel, or a slideshow. Each banner normally includes one or more images and these images are assigned to different modules depending on the size and the function they work.

In this tutorial, we will provide the instruction to create banner in Opencart and scale the effective of the banner.


Create banner in Opencart.

1. Uploading Images for Banners

From your Opencart site back-end, go to System > Design > Banners. The panel includes all created banners, hit the “Add new” button to insert a new banner.

opencart banners management
Opencart management panel: System > Design > Banners

In the form, add banner name, and set status. Next, add new banner, each banner include title, link and image. If your site is multilingual, you have to create banner for each language. The supported image types: JPG, PND and GIF.

We can assign as many banner images as we want, but all the images should have the same size or at least the ratio, since these pictures will be switching or sliding inside a banner-holding module.

add new banners
Uploading images for banners in OpenCart

2. Assign banners to modules

Banners are displayed in your Opencart front-end through Module, in other words, we assign banners to Opencart modules. There are three most used modules for showing banners:

  • Banner module
  • Carousel
  • Slideshow

All the modules perform the same functionality, it displays the created banner image in same size and let user to interact with the images by click.

2.1 Create Banner Module

Banner module shows banners by fading banner images. To create the module, please go to Extensions > Modules > Banner > Edit. Add new module and assign the banner we created in step 1. You can configure the size of the banner (width and height) in pixel, save the setting and we’re done.

The size of the module should fit the position that it’s assigned to displayed in in your layout. The banner images are auto resized according to the predefined dimension.

add new banner module
Assign banner to a banner module

2.2 Create Slideshow Modules

The module displays banner images in slideshow. This module is generally displayed on the home page with bigger landscape pictures.

To create the module, go to Extensions > Modules > Slideshow > Edit, enable the module then add new module, assign created banner then configure the dimension for the banner to display in your Opencart front-end.

add new slideshow module
Create new slideshow module to display banners

The dimension setting should fit the position where you publish the module in.

2.3 Create Carousel Module

The carousel module displays a set of banner images in carousel. To create the module, go to: Extension > Module > Carousel > Edit, enable the module and add new banner for the module. Assign banner, set number of images to display, the scroll value and configure the image size displayed in the carousel.

add new slideshow module
Create new Carousel module to assign banners to

Display the banners in your Opencart front-end

In Opencart 2.0, the layout system and module assignment has been changed a little bit. In the module setting, there is no layout and position configuration anymore, all the layouts are managed in the System > Design > Layout, in the layout setting panel, you can assign the modules to publish in the layout.

Assign modules to layout
Assign modules to layout

How to scale the effective of the banner?

1. Track Banner Clicks

Banner is a core feature in Opencart core and it’s an advantage of Opencart in the comparison with other ecommerce platforms. However there is still limitation such as the report of how banner is performed (the most important statistics is click numbers). The limitation can be solved by Google Analytics.

Clicking on a banner which redirects to a page on the same site is an event in Google Analytics term. This is why we use the event tracking feature of Google Analytics to measure on-site banner clicks in OpenCart. Here’s a sample HTML for implementing event tracking:

<a href="/landing-page-url" onClick="_gaq.push(['_trackEvent', 'category', 'action', 'label, 'value']);"><img src="banner.png" alt="Banner title"></a>

2. Change module template file to enable banner click tracking

The banner, slideshow and carousel modules have their own templates. What we have to do is customizing the module template .tpl file.

onClick="_gaq.push(['_trackEvent', '{banner type}', 'Clicked', '']);"

Banner Module

For banners, open the your_theme_folder\template\module\banner.tpl file and find the following code:

<a href="<?php echo $banner['link']; ?>"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" title="<?php echo $banner['title']; ?>" /></a>

replace with:

<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>

Slideshow Module

Open the slideshow template tpl file located in your_theme_folder\template\module\slideshow.tpl, find the following code:

<a href="<?php echo $banner['link']; ?>"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" /></a>

replace it with:

<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>

Carousel Module

Open the carousel template tpl file located in your_theme_folder\template\module\carousel.tpl, find the following code:

<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>

replace it with:

<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>

The results of clicks can be seen if go to Google Analytics and go to the Behavior Section > Events overview. There we’ll see the category (in our case the type of banner), the number of clicks and the name of the banner.

Be careful when using banners:

Some notes about Banner in general and in Opencart that you should know about before creating banners for your shop.

  • We cannot set expire date, so site owner have to manage this manually, once it’s expired, you have to disable it.
  • Banner image size should be small to make sure it’s performed well
  • Only accept the following content types in banner: JPG, PNG or GIF.
  • Do not overuse banners

In conclusion, we have to upload the banner images, assign them to a module, such as banner, slideshow or carousel. Later we changed the module template files to track click events with Google Analytics.

We hope it’s helpful for you, If you have questions, please ask them in the discussion area below.

Other Tutorials In Opencart 2.0 Tutorial series

Share this: