HMTL5 Studio features many functions that allow testing banners and ensuring that they work correctly.
Use the predefined mobile device presets to test the responsiveness of a banner.
- Click on the Banner settings icon on the top left side of the Banner Workspace to hide banner settings and to save the screen space.
- Click on the Multiple device icon in the top center of the window.
- Select an apropriate device from the four grouped lists of devices (Mobile, Tablet, Laptop, Desktop).
- In case your banner is intersitial, or similar, additionally select "Responsive Width & Height" instead of the default "Responsive Width".
Responsive Ad will not work correctly if it does not contain Adform component for responsiveness. In such case, you can insert the code snippet using the Studio's Code Editor.
Example for enabling responsiveness (responsive width + fixed 250px height):
dhtml.external.resize && dhtml.external.resize('100%','250px');
Mobile Preview / QR Code
If you want to test an HTML5 Ad on a mobile or tablet device, the easiest way is to generate a QR code that you could scan with your portable device and test how the banner is rendered on that device.
To do that, click on the three dots icon in the top right corner of the Banner Workspace and select menu item named as QR. You can scan the generated image with a QR Code reader or click on the image and open the preview in a new browser tab.
Creative process usually requires agreeing on the final result with stakeholders. This is achieved easier when one can share the Live Preview of a banner.
In order to do that, upload a banner to the HTML5 Studio and click on the eye icon in the top left corner of the Banner Workspace.
The Live Preview automatically updates if content of a banner is changed after the link for Banner Live Preview is generated. This means that stakeholders will always see the lastest version of a banner, which you are seeing in the Banner Workspace.
To test banner events, such as video player events, mouse over events or other custom event, open the Event Logger that can be enabled by clicking on the three dot icon in the top right corner of the Banner Workspace and selecting Event Logger from the menu.
Event Logger is opened at the bottom of the screen.
Simply click on a banner to test how a clickTag is working and to check whether the correct Landing Page URL is being used.
Banner is always rendered in the Live Mode unless selected otherwise using Banner Workspace controls.