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 (1) 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 (2) in the top center of the window.
- Select an appropriate device from the four grouped lists of devices (Mobile, Tablet, Laptop, Desktop) (3).
- In case your banner is interstitial, or similar, additionally select Responsive Width & Height instead of the default Responsive Width (4).
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.
Studio's Code Editor can be accessed by navigating to the File Browser (1) and selecting the file that needs to have its code edited. Afterward, a window of Code Editor will be populated at the bottom of the screen.
Example of 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 (1) in the top right corner of the Banner Workspace and select menu item named as QR (2). 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 the 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 events, open the Event Logger, that can be enabled by clicking on the three dots icon in the top right corner of the Banner Workspace, and select Event Logger from the menu.
Event Logger is opened at the bottom of the screen.
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.