Follow

Before you upload your ad to the Sizmek MDX platform, you can debug your ad to make sure that everything is working and that all of your functions are called correctly.

Preview HTML5 Ads

With the Preview function, you can preview HTML5 ads, test the interactions that were defined in the ad, and view all calls that are made to the Sizmek API (this is to help ad developers QA their ads).

The ad preview only supports HTML5-capable browsers. For more information about HTML5 supported browsers, see Supported Platforms and Browsers (expand HTML5).

Notes:
- Viewing HTML5 ads on IE9 is limited. It is recommended that you use Chrome or FireFox browsers to see full functionality.
- It is recommended to view your ad on relevant browsers. To do this, create a share preview link and then paste this link in the relevant browser. For more information about share previews, see Sharing a Preview.

Previewing HTML5 ads is similar to other ad previews with some minor differences:

  • You must use a browser that supports HTML5 ads. If you use a browser that does not support HTML5, an error message will be displayed instead of the ad.
  • You can navigate from the root of the Workspace to all the sub-folders.
  • The Workspace is saved in the Assets Library in the Workspaces folder. Here you can view the name and size of each Workspace asset. You can also preview the asset by clicking on the blue link next to the asset.
  • The Interactions Monitor will show all API calls.

Debug Your HTML5 Ad

Debugging your HTML5 ad ensures:

  • All Sizmek commands are called correctly.
  • Assets are defined with the correct path.
  • Video interactions are defined correctly. For example, start is called before stop.

To help you better understand the debugging process, we have provided an example of the most common errors that occur with HTML5 ads and some quick solutions.

Note: All browsers have their own debugging tools, and instructions on accessing the tool may differ. If you are using another browser, see its help for more information.

The following process uses Chrome's debugging tool.

Procedure

  1. Open your index.html file in the browser.
  2. Press F12 to open the debugging tool. For more information for other browsers, refer to their documentation.
  3. Click the Console button.
    The debugging tool:
    • Detects Errors
    • Shows Warnings
    • Logs activity
  4. Choose whether to view one at a time or All at once by clicking their respective buttons.
    If there is an error during run-time, you will see these errors marked in red.
  5. Check to see that the click-through button works by clicking on it.
  6. If it works correctly, you will see:

    screen_HTML5_click_works

  7. If the clickthrough button is not defined correctly, you will see:

    screen_html5_click_error

    The EB is not defined error means that the EBLoad.js is not included correctly. If the inclusion is not defined in your ad, none of your images or clicks will work, and you will not be able to create a Workspace with it in the platform.

    screen_HTML5_include_error

    Make sure that the file inclusion is in the header. For more information, see Initializing the API.

Here are some other common errors:

  • creative called EB.stopVideoTimer before calling EB.startVideoTimer.
  • creative called EB startVideoTimer with invalid asset relative path.
  • creative called EB.videoInteraction with invalid video command (valid command: ebVideoStarted)
Was this article helpful?
0 out of 3 found this helpful
Have more questions? Submit a request

Comments