Samsung DSP Help Center

Samsung DSP

Testing & Debugging HTML5

03 Oct 2023
5 Minutes to read

Share
Dark
Light

Testing & Debugging HTML5

Updated on 03 Oct 2023
5 Minutes to read

Share
Dark
Light

Article summary

Did you find this summary helpful?

Thank you for your feedback

In order to simplify the testing process of your HTML5, we provide you with this test loader: test_loader.html.zip.

The test loader enables you to check, develop, and iterate your HTML5 creative quickly without requiring to continuously re-uploading it into Samsung DSP.

To load and develop your creative locally using AdGear’s test loader, proceed as follows:

Download and unzip the test_loader.html.zip and add this page to the root level of the folder containing your creative's main HTML file. Assuming your creative is structured as follows (where index.html is the creative's main HTML file):

        ├── _your-html5-creative-folder
            └── index.html -> (your main html representing your creative)
            └── test_loader.html
            ├── _assets
                └── image1.png
                └── image2.png
                └── style.css

          Legend:
          ├── = Folder (parent).
          └── = File associated with the parent folder.

You can rename the test page test.html or any name as long as it differs from any other HTML file that already exists at the root level folder.
Open the test page with your editor.
In the <head> tag, leave the following line as is as it is necessary to load AdGear's basic loader:

        <script type="text/javascript" src="https://h5.adgear.com/v2/js/loaders/basic.min.js"></script>

In the <body> tag, this line defines an IFRAME container with the initial dimensions of the creative, to act as a virtual ad spot for the creative being tested:

        <iframe id="testad" src="about:blank;" width="300" height="250" frameborder="0" scrolling="no"></iframe>

Change the value of the width and height to fit with the dimensions of your creative. You can also change the iframe id called testad to another name. However, don’t forget to change this ID as well in the ADGEAR.html5.basicLoader method below.
Check if the changes you made so far are valid by opening the test page in your favorite browser. You should see the creative in index.html load and the AdGear HTML5 JavaScript API should function as specified.
Under the <iframe> tag, the page contains a <script> block calling the ADGEAR.html5.basicLoader method that loads the creative into the test page and provides it with click and event tracker URLs when applicable. The ADGEAR.html5.basicLoader API allows you to emulate the ad server from a test page environment. The method accepts three required arguments:
- ID of the target IFRAME in which the creative should be loaded (string)
- Relative path to the creative's main HTML file (string)
- The creative data object describing the creative to the ad server, allowing you to mock the values that Samsung DSP will provide when the ad is served in a tracked environment>

            <script type="text/javascript">
             ADGEAR.html5.basicLoader("testad", "index.html", {
               'width': 300,
               'height': 250,
               'click_urls': {
                 'clickTag': 'http://www.example.com/redirect/clickTag/'
               }
             });
            </script>

Optionally, modify your creative and refresh the test page at will.

The creative data object itself may contain multiple keys: width and height are mandatory while the other keys are optional.

All supported keys and values are described in the table below:

Key Name	Description
width	The initial width (in pixels) of the creative, specified as a number.
height	The initial height (in pixels) of the creative, specified as a number.
click_urls	Optionally, the list of click tracker URLs to redirect to when the `clickThrough(name)` API method is invoked within the creative. When specified, should be a JavaScript object of key/value pairs, with each key being a string uniquely identifying the tracked click by `name`, and each value being a URL (string) to redirect the user to. We recommend you to provide at least one click tracker named `clickTag`. This will be the default click tracker to be redirected to when you call the `clickThrough(name)` API method on an unspecified click, or when you refer to `window.clickTag` from the creative's main HTML file. For example, if your creative is expected to track clicks on two specific buttons, button1 and button2, as well as all other clicks via a default `clickTag` tracker, you might provide the following sample destination URLs for testing purposes: 'click_urls': { 'button1': 'https://www.example.com/redirect/button1', 'button2': 'https://www.example.com/redirect/button2', 'clickTag': 'http://www.example.com' }
event_urls	Optionally, the list of event or interaction tracker pixel URLs to call when the `countEvent(name)` API method is invoked within the creative. When specified, it should be a JavaScript object of key/value pairs. Each key should uniquely identify the tracked event by `name`, and each value being a URL (string) which shall be automatically loaded when you call the `countEvent(name)` API method. For example, if your creative is expected to track interaction events `buttonRollover` and `buttonExpanded`, you might specify some mock URLs so that you can verify that the URLs are being loaded when you interact with the creative: 'event_urls': { 'buttonRollover': 'https://www.example.com/pixel/rollover', 'buttonExpanded': 'https://www.example.com/pixel/expanded' } To verify that the corresponding URLs are properly invoked when calling `countEvent(name)` you can use your browser's debugging tools (for example Firebug, Chrome DevTools, Charles Proxy, etc.)
config_vars	Optionally, the list of ad server configuration variables to provide to the loaded creative. When specified, it should be a JavaScript object of key/value pairs. Each key should uniquely identify the configuration variable by `name`, and each value being a string providing the mocked value for the expected configuration variable. For example, if your creative is expecting Samsung DSP to provide variables `bgColor` and `textColor` via configuration, you might specify test values as follows: 'config_vars': { 'bgColor': '#ffffff', 'textColor': '#000000' }
impression_vars	Optionally, the list of impression variables to provide to the loaded creative. When specified, it should be a JavaScript object of key/value pairs. Each key should uniquely identify the impression variable by `name`, and each value being a string providing the mocked value for the expected impression variable. For example, if your creative is expecting a third-party vendor or publisher to provide a variable `placement_id` via Samsung DSP's ad server tags when serving your creative, you might specify a test value as follows: 'impression_vars': { 'placement_id': 'some_value' }
debug	Optionally, the boolean value true should be specified to turn on additional debug messages via console.log

Debugging

Using one or several tools such as Firebug, Chrome DevTools, Charles Proxy, or similar is highly recommended to facilitate the debugging task of HTML5 creatives across a variety of browsers and configurations.

Additionally, it is possible to turn on debug logging in either or both of the AdGear’s test loader and HTML5 JavaScript libraries if you desire more detailed logging via your browser's console.log.

To enable debug logging from your test page, simply set the debug key to true in the creative data object passed to ADGEAR.html5.basicLoader described above.

Finally, both the AdGear’s test loader and HTML5 JavaScript libraries are available non-minified if you wish to inspect or step through the internals with your favorite JavaScript debugger. To load the unoptimized versions of the libraries, simply substitute the .min.js suffix in each of the script file names with the shorter .js extension (sans .min).

For example, from within your creative, change:

    <script type="text/javascript" src="https://h5.adgear.com/v2/js/html5.min.js"></script>

to:

    <script type="text/javascript" src="https://h5.adgear.com/v2/js/html5.js"></script>

And from your test page, change:

    <script type="text/javascript" src="https://h5.adgear.com/v2/js/loaders/basic.min.js"></script>

to:

    <script type="text/javascript" src="https://h5.adgear.com/v2/js/loaders/basic.js"></script>

For best performance, it is recommended to revert these changes back to the minified and optimized versions of the library prior to packaging your creative.

Was this article helpful?

What's Next

HTML5 Javascript Library

Table of contents

Debugging