23 Nov 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 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.
In this article, 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 use different button to track specific values (“background click”, “cta click”). Play or stop a video. Navigate a carousel or expand a section of content.
And each element can also have different states of interaction with its own commands.
- Events and Clickthrough Tracking:
Some ads need to track different hotspots or have different destinations in the client’s website. It’s interesting to track what the user has explored on the ads, for instance, they might not click through, but can read through all the content, getting to know more about the client. - 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 a full exit button can be on top of others interactive elements. - 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 embedding Youtube or Vimeo player is recommended. - Carousels:
A carousel is essentially 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? It’s definitely a more complex interactivity object since you will need to think about transitions and how to have a scalable code for different numbers of slides.
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.
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.
- 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. Proper Banners has created several different types of interactive ads. Have a look at our Work Section and read the case studies.
No Comments