Preview and Test Banners

Vaida
Vaida
  • Updated

Adform Studio offers a few ways to preview and test the banners that you create.

Test Banners

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.

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

responsive_banners_1.png

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.

responsive_banner_2.png

Example of enabling responsiveness (responsive width + fixed 250px height):

Note

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.

responsive_3.png
responsive_4.png

Sharing a Banner Preview

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.

responsive_5.png

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.

Banner Events

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.

responsive_6.png

Event Logger is opened at the bottom of the screen.

responsive_11.PNG

ClickTags

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.

Test Synchronized Banners

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.

test_syn_1.png
  1. Press on the "Sign In" option and you will get a pop-up window as in the screen above.

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

test_syn_2.png

After you have logged in, upload both of your banners to the Studio.

  1. Press on the Sandbox option and you will see all of your banners listed on which you have previously worked on.

  2. Select the first banner you want to preview.

  3. Select the second banner.

  4. Press on the Preview option with both banners being selected.

Was this article helpful?

/
How we can make it better?

Thank you for your feedback!