How to add interactivity to HTML5 Ads

Any banner must have at least one basic interaction which is the clickthrough. This has a requirement since the first banner was made and its purpose is to direct the user into a landing page. This is more or less automatic. If you want to add more interactivity, you’ll need to understand how it works.

The first ever banner had 75% click per impression

In this article you’ll learn:

  • Basic Interactivity
  • How to add event listeners to elements
  • What are the challenges of interactive ads

There are many ways to use interactivity.

You can have more than one button, tracking different values (“background click”, “cta click”), play or stop a video, navigate a carousel or expand a section of content. And each element can have different states of interaction with its own commands.

Clickthrough Tracking

Some ads might have different hotspots, and the advertiser can choose what to track. It can also have two cta’s that will take the user to a different part of the client’s website.

Layer Order or Z-Index

The order of your divs on the .html file matter a lot. If you have more than one interaction, you’ll need to shuffle the layers, otherwise the main exit will be on top of others interactive elements.

Video and basic logic

Creating a custom Html5 video player can be quite challenging, but it has a few advantages - especially if the video itself is from a dynamic source. You can also style the buttons as you wish.

It comes with an interesting puzzle, which is one of the first logic issues you might encounter. Creating commands for playing, pausing, muting and stopping a video will require buttons to be enabled and disabled, shown or hidden.

Luckily Html5 has a embedded video player in its <video> tag, otherwise a Youtube or Vimeo player is recommended.

Carousels

A carousel is essentially a more complex interactivity object. Usually you have a sequence of images and a linear functionality - back and forward. Every time you click on a direction button, it shows you another part of the content. Checking what happens once the list ends is also something to think about. Will it loop?


Event Listeners

In order to get a result out of an interaction you need basically three things: the instance name of the object, the type of event and the callback function - which will trigger the desired command. So a button might have three event listeners - click, mouseover and mouseout.

Adding an Event Listener and a Callback Function

Complexity

The more you have buttons, the more organised you need to be. It’s very common to have animation bugs, or overlapping commands. The best way to approach this is incremental testing. Think about what happens to all assets once a button is clicked.

You can also be clever in adding and removing event listeners as you may need them. Sometimes an interaction will only be needed in the end frame, so better waiting for that than causing conflicts with an unexpected interaction.

The more complex it gets the more logic and javascript knowledge will be needed. Using functions like: Arrays, For Loops, Intervals and Timeouts are key allies for a clear code - enabling the code to be adapted to other banner formats or campaigns.


Basic Issues

It is extremely normal to have issues with buttons and interactions.

- Animation not finished.

You should wait any major animation or transition to end before enabling buttons. If the next interaction triggers another animation, disable the button until the transition finishes again.

- Clear your logic

When creating events that have ON and OFF states, it’s common to make mix up with names.

Make sure you use boolean variables as these can be more easily read and you can check the states easier.

- Clicking out of the banner

Make sure all animations, videos and audio stops if the user clicks the ad. And it’s recommended to transition the ad to the end frame in case the user returns to the publisher’s site - leaving the message clear.

Using interactivity with animation is a powerful combination to have engaging and eye-popping ads that will grasp your audience’s attention.


If you have any questions,
please email: article@properbanners.com