Adform Studio offers a few ways to preview and test the banners that you create.
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 center top 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).
 |
Caution
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):
Note
dhtml.external.resize && dhtml.external.resize('100%','250px');
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.
 |
 |
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.
 |
Caution
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 latest 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.
 |
If there is a need to quickly test several banners which have a local connection between them, you can do so with the help of Adform Studio. For the purpose of this tutorial, we are going to use banner provided in here as an example.
In order to test banners with local connection, we need to leverage Studio's Sanbox feature that can be found under Projects section. This feature enables you to view all of the banner that you have recently worked on. To have a history of your projects, you have to be logged in first. One way to do log in is by using the Github account, which is mostly free.
 |
-
Press on the "Sign In" option and you will get a pop-up window as in the screen above.
-
Press on the "Via Github" option and you will be redirected to the Github page.
If you were logged in via the Github page before, you will go through an instant login to studio. If you do not have a Github account - please create one here.
 |
After you have logged in, upload both of your banners to the Studio.
-
Press on the Sandbox option and you will see all of your banners listed on which you have previously worked on.
-
Select the first banner you want to preview.
-
Select the second banner.
-
Press on the Preview option with both banners being selected.
Get in touch