From September, Flash will no longer be supported by Chrome. Prepare for the shift towards HTML5 by visiting our Flash to HTML5 help page

Check it out!

Banner Testing

HMTL5 Studio features many functions that allow testing banners and ensuring that they work correctly.

  • Responsive Ads

    Use the predefined mobile device presets to test the responsiveness of a banner. 

    1. 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.
    2. Click on the Multiple device icon in the top center of the window.
    3. Select an apropriate device from the four grouped lists of devices (Mobile, Tablet, Laptop, Desktop).
    4. In case your banner is intersitial, or similar, additionally select "Responsive Width & Height" instead of the default "Responsive Width".

    Html 5toolkit _responsive _tools _2014-11-10 (2)

    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.

    Html 5toolkit _bw _additional _menu _2014-11-10

    Html 5toolkit _qrcode _2014-11-10

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

    Html 5toolkit _bw _livepreview _2014-11-10

    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.

    Html 5toolkit _bw _additional _menu _2014-11-10

    Event Logger is opened at the bottom of the screen.

    Html 5toolkit _bw _eventlogger _2014-11-10

  • ClickTags

    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.