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!

Tutorials

  • SSL Compliance

    HTML5 Studio allows you to upload any kind of 3rd party HTML5 ad (an HTML5 ad that you created using other authoring tool) and test various features that are supported by our Ad Server.

    Problem

    Most of the publishers and programmatic ad exchanges are now using SSL-only environments, which means that all the components that come together with an ad and the ad server itself have to be SSL-friendly. There are some instances when users are loading various 3rd party JavaScript libraries from popular CDNs or assets from various unknown servers.  All of the requests have to be done via secured SSL channels, which means that an ad will be rejected by the publisher or programmatic exchange if you are using SSL non-friendly URLs.

    Goal

    URLs, that link to external resources, have to be made SSL-friendly: https:// or // has to be used instead of http://. This process has to be time-efficient as it is hard to manually scan through the source of each ad.

    Workflow

    SSL compliance can be achieved as a part of general ad compliance. It can be done by Creative Agency or Media Agency. We highly recommend managing compliance as early in the Ad lifecycle as possible. Therefore, HTML5 Studio is publicly available to any Creative Agency and it does not require credentials to access most of the features. It is worth noting that HTML5 Studio accepts content that is not necessarily built with the HTML5 Studio and allows to amend it if needed:

    1. Upload .ZIP file, that contains the ad, to the Studio.

    upload banner 1

    2. If asked, indicate correct banner category and format.

    3. If system is not able to detect correct width and height, make sure to indicate them as well.

    file format

    4. After you are done with the previous step, you will be given an option to add a Global clickTag on top of the banner. It is worth noting that this feature only works when your ad does not contain any other features that require user interaction (such as close or navigation buttons). That is because Global clickTAG is applied on top of the whole ad, which means that any click on the ad will initiate the Global clickTag feature leaving other components inactive. 

    add clicktag

    5. Export the Ad. (If you have Media Agency credentials to the Adform Platform, you can use the Upload feature that is next to Export and then you will be able to push the Ad directly to the campaign).

     export nrmls

    6. If HTML5 Studio detects SSL non-friendly URLs, it will show the following dialog box (otherwise, it will proceed to export your ad):

     warning

    7. Click on Fix it and Studio will try to automatically fix all of the faulty URLs. If every URL is fixed, it will proceed to export your ad. Otherwise, it will populate a dialog box with a list of URLs that were not fixed (Studio does not fix URLs for servers that do not support SSL or it does not guarantee that those servers really support SSL).

    unable to fix

    8. If Studio was unable to fix some URLs, close the dialog box, open file browser from the left side panel and click on the file that contains faulty URLs. Consequently, Studio will open Code Editor of the file that needs to have its URLs fixed. When in the source code, seek for the faulty URLs (you might find Ctrl + F shortcut to be more convenient) and provide the correct one instead. After fixing URLs, click Save and repeat the Export action to download the compliant version of an Ad.

    html url

    Note: If the particular resource resides on the server that does not support SSL (https), it will not be possible to fix those URLs. Always try to open the specific 3rd party resource in your browser with https instead of http to ensure that server really supports SSL. Adform recommends hosting all assets and resources on Adform's servers as we both support SSL and ensure load-balanced and geographically distributed delivery of content.

  • Upload Studio Ads to the CAW

    If you want to use CAW (Creative Agency Workplace) together with HTML5 Studio, you have to be aware that CAW requires you to use and upload an asset zip file instead of the entire HTML5 Studio Ad zip. To learn how to download an asset zip file, refer to the following guidelines:

    1. Open File Browser panel.

    browser panel

    2. Download a single asset instead of exporting the entire HTML5 Studio Ad. After you are done, import the downloaded asset ZIP file into the CAW platform.

    download asset

  • Make Banners to Comply with Adform Specifications (Adformification)

    There are specific actions that you have to take if you want to have your externally created ad served via the Adform platform. Primarily, you need to be aware that you have to:

    • Create a manifest.json file with the banner properties in it.
    • Apply DHTML.js library to the banner's HTML page.
    • Apply JavaScript clickTag inside banner's html (or through external JavaScript file) in order to track banner clicks. 

    Find more information regarding required file structures here and adding clickTag variables here.

    If you, for example, have created this banner as a creative agency without being aware of the Adform's specifications, the following guidelines will give you a better perspective on what has to be completed.  

    1. Upload banner to Studio by navigating to the top-left corner of the Studio, clicking on the New button and selecting Upload banner from the drop-down menu. 

     upload banner 1

    2. As the banner that you are trying to upload to Studio does not have the manifest.json file, Studio cannot detect the format of the ad and, therefore, you will have to indicate the format, which, in this case, has to be set to standard as per the image below. 

    3. If your uploaded banner is not of the size of 300x250 (which is the default size in Studio for banners), you have to manually indicate your banner's dimensions.

    file format

    4. Studio will review the banner and after noticing that it does not comply with the Adform specifications, it will suggest to adformify the ad by  adding the Global clickTag.

     add clicktag

    5. Global clickTag can be easily added by indicating the URL link of the landing page and selecting Proceed after you are done. 

     remove clicktag

    6. If you check the .html file of your banner,  you will find a code similar to the following, which was added automatically:

    function adfOpenGlobalClickTAG() {
            var adfClickTAGName = 'clickTAG',
                adfClickTAGUrl = 'http://www.adform.com';
    
            window.open(dhtml.getVar(adfClickTAGName, adfClickTAGUrl), dhtml.getVar('landingPageTarget', '_blank'));
        }
        if(window.document.addEventListener) {
            window.document.addEventListener('click', function(e) {
                if(e.button !== 0) return;
                e.stopPropagation();
                e.preventDefault();
                adfOpenGlobalClickTAG();
            }, true);
        } else {
            document.attachEvent('onclick', function() {
                adfOpenGlobalClickTAG();
            });
        }

     

    This means that a global clickTag has been applied to your banner and it will be activated when pressed on the banner. Please note that this is not going to work when you need to apply several clickTags or a clickTag on some particular part of the banner.

    At this point, our banner has all of the necessary points (DHTML.js file added, clickTag code added, manifest.json created) acquired to comply with Adform HTML5 banner specifications. 

    Send us your feedback about Adform's HTML5 Toolkit by clicking the feedback icon Horn in the left-bottom corner. Thanks!

     

  • Upload 3rd Party Ads and Apply Adform Features

    HTML5 Studio enables any HTML5 Ad to be fully compatible with the requirements of Adform Ad Serving technology. To ensure that every externally-created ad complies with Adform's specifications, such as clickTag and tracking implementation, Adform provides a set of features that help you to test any HTML5 content and see if the ad meets the requirements. 

    Uploading your custom build HTML5 Ad to Studio

    To get begin with, ZIP your HTML5 content (Ad). The ad should consist of the main HTML file and other folders that contain images, javascript, css, and etc. It would be beneficial if the ZIP package had ADFProperties.xml or at least manifest.json. However, HTML5 Studio can process ZIPs that do not contain any Adform metadata.

    Adform will automatically detect as much metada as possible but if it is not possible to automatically determine banner category, format, or dimensions, you will be asked to indicate them manually. Below is an example of the process

    Step 1. ZIP files.

     zip_2015-09-07_1317

    Step 2. Upload that ZIP to Studio by selecting the Upload banner option.

     banner upload

    Step 3. If asked, provide correct banner category, format, and dimensions. 

    category and format

    Banner Adformification

     

    Adform has a feature that automatically detects your ad that has no Adform scripts and, alternatively, offers to inject reference to Adform dhtml.js library and offers to apply a Global clickTag for the entire banner. This can be found especially handy when you have multiple HTML5 Ads and you need to apply one clickTag to all of them. 

    Adformification dialog pops up automatically after system detects that the uploaded banner is lacking scripts:

    adformify

  • Quick Templates

    HTML5 Studio features a set of templates that can easily transform static images or video assets into real rich media.

    Find the right template for you

    To start with, navigate to Filter option and tick Quick templates from the drop-down menu. Afterward, you will be given a set of templates that you can put to use. 

    Quick Templates

    Producing the Ad

    After clicking on a specific template, you will be redirected to the banner's workspace. Each template has its short description that is visible on the left side of the screen. This documentation provides insights on how & what can be easily changed in the particular template.

    template information

    In most of the cases, you will want to replace the default images with the ones of yours. In order to do so, navigate to the File Browser (1) and proceed to Additional Sets (2).

     file browser realll

    After you reach additional assets panel, click on each image to replace it with a file from your local computer. Live Preview of an ad will automatically refresh after performing any changes. 

    changing files

    Testing the Ad

    Close Additional Assets panel and try to interact with your ad. If it is necessary, you can make a read-only preview link to share this ad with your stakeholders by clicking on Live Preview image as in the picture below. 

    live preview (1)

    Exporting the Ad for Ad Serving

    If you do not have direct access to the Adform Platform, export your ad as a zip file by selecting the Export option. 

    export

    Or, if you have a Media Agency Account, then you can click on the Upload icon next to Export one and that will allow you to directly push your Ad to a specific campaign.

  • Optimize (Reduce Weight) Banners by Using Studio

    If there is a need for a banner to be more lightweight than it originally is or it outweighs the weight limit of the Adform platform (which is usually set according to the contract), you can put Studio's banner optimization feature to use. It provides you with the option to decrease banner size while still preserving original banner's quality by:

    • Merging several files into one in order to minimize the number of file requests. 
    • Compressing html/css/javascript in order to minimize the file weight.
    • Optimizing images for them to be more lightweight.

    To utilize this feature:

    1. Navigate to the HTML5 Studio, click on the NEW button and select Upload banner option.

     upload banner optimization

     

     2. Press on the Upload Icon that can be found on the top-right corner of the Studio and select Optimize banner & Upload to Adform.

    optimize

     

    Afterward, you will be provided with a notification window indicating a successful banner optimization. It provides you with the properties of the Original banner (1) and its Optimized version (2). What is more, you can preview the optimized banner to ensure that banner's quality is the same as it was before optimization (3) and Upload the banner to Adform's platform (4).

     

    optimized banner

     

    Send us your feedback about Adform's HTML5 Toolkit by simply clicking the feedback icon Horn in the left bottom corner. Thanks!

     

  • Test Synchronized Banners with the Help of Adform Studio

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

    gihub login

    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.

     

    Sandbox

     

    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. 

    Read more about Local Connection Ads here

     

  • How to Load Expandable Banners in Studio

     

    If you have previously exported an expandable banner from the Studio platform and still have the .zip file of it, you can load it back to the Studio and your banner will be automatically loaded and ready to further editing or upload. On the other hand, if you need to compile an expandable banner from two different .zip files, one for the collapsing part and the other for the expanding one, follow the guidelines below. 

    1. Navigate to All Categories and select Expandable from the drop-down menu to have the expandable templates filtered. 

    2. Another option to find the required expandable template is by utilizing the Search option.

     

    expandable

     

    3. Select the File Browser option from the panel on the left side of the screen. Afterward, you will be redirected to the Assets menu from where you will be able to control the components of your assets.

    4. Click on the three dots icon from the Collapsed Asset.

    5. Select Delete Asset from the drop-down menu.

    6. Assets that are meant to be collapsed will be deleted so you could upload your own ones. 

     

    Delete asset

     

    7. Afterward, you will be given an option to upload an asset of your own or create a new one. The same can be done with expandable asset as well. Ultimately, this feature allows you to compile an expandable banner from two different .zip files. 

     

    collapsed asset

     

    Send us your feedback about Adform's HTML5 Toolkit by simply clicking the feedback icon Horn in the left bottom corner. Thanks!

     

  • How to Load Click to Float Banners in Studio

     

    This tutorial will showcase how you can load and preview a click to float banner in Studio. Please note that in order to perform the following actions, you have to be logged in. 

    We are going to use a premade CLICK TO FLOAT 300X250 _ 965X600 HTML5 template, which you can find by clicking here  (or any other click to float banner you have).

     

    FilesOnce you open the file, you will see two .zip files ready to be uploaded to the Studio. You can load your banner directly into the studio by dragging and dropping the file on the dashboard. It is important to note that if you have not created a project yet, you will be prompted to create one as per the image below. You can read more about projects by clicking here.

     Creating a projectcreating a project

     

    Dragging an dropping

    Drop to upload

     

    Please note that if you have never loaded this banner to the Studio and exported from it as well, you will be asked to select banner's type and format.  To do so, click on Select category and select Expandable from the drop-down menu, also, click on Select format and choose Expandable (Two files) from the drop-down menu. 

     Providing banner's Category and Format

    specify floating

     

    At this moment, we have two banners loaded in our Studio. Select both banners (1) by ticking them as per the image below. Afterward, Press on the Preview (2) and you will be redirected to Adform's preview website, where you will be able to see how your click to float works.

    Previewing the banners

    project adform

     

    Send us your feedback about Adform's HTML5 Toolkit by simply clicking the feedback icon Horn in the left bottom corner. Thanks!

     

  • Adding a ClickTAG with Studio

     

    Whenever you are adding a clickTag (1) through the general banner settings as per the image below, you should be aware that you are not adding an actual clickTag to the banner but only defining the number of clickTags your banner will have.

     Adding a clickTag through banner settings

    Screen -copy

     

    In order to apply an actual clickTag to your banner, you have to do it manually through the Code Editor. To do so, follow the indicated steps below:

    1. Select the file that will have the clickTag applied to it. 

    2. Add the clickTag via code editor. The following guidelines depict how the clickTag should look like while also seeking compliance with Adform specifications.

    Opening code editor 

    Screen -copy 3

     

    If you want HTML5 Studio to automatically apply a clickTag to your banner, you can use Studio's global clickTag feature (1). To do so, click on the three dots icon, that can be found on the top left corner, and select Global clickTag from the drop-down menu. You will be given a window where you will be able to apply a clickTag to your ad.

     Applying Global ClickTag

    Screen Copy 2

    Indicating Global ClickTag

    Click TAG

     

    Please note, that this feature only works when your ad does not contain any other features that require user interaction (such as close or navigation buttons). That is because Global ClickTag is applied on top of the whole ad, which means that any click on the ad will initiate the Global ClickTag feature leaving other components inactive. 

     

  • Sync Adform Platform Campaigns with Studio

     

    If you come across a problem when your campaigns seem to be out of synchronization with the Studio, an easy fix can be applied to have this issue resolved.  

    When you are uploading a banner to the Adform platform from the Studio platform, you need to hit Upload Banner to Adform, that can be found on top right corner of the Studio. Afterward, you need to select Upload to Adform (1) as per the image below. 

     Uploading banner to Adform's platform

    First Copy (2)

     

    After the latter action is completed, a window, identical to the one below, will populate and have your account's and campaign's information. While at this window, there are four different actions that you can take: 1) Select your client account; 2) Select your campaign; 3) Refresh the synchronization; 4) Upload your banner. The key role is being played by the 3rd option. By clicking on it, you are able to renew the synchronization with the Adform platform, which means that all of your recently created/customized client and campaign details will also be available in the Studio platform. 

     Refreshing the synchronization

    upload to adform

     

    Please note that the option to upload banners from Studio to Adform is only available to the users who have Adform platform login credentials. 

     

  • How to Work with Banner Projects

    Projects is a Studio feature where you can:

    1. Create a project;

    2. Add banners to your project;

    3. Delete banners from the project;

    4. Archive banners;

    5. Upload multiple banners to Adform platform from a project.

     

    Create a Project

     

    To utilize the Studio's Project feature, you must necessarily be logged in. You can do so in two following ways:

    • As a media agency, you can log in with you Adform platform login credentials;
    • As a creative agency, you can use your Github account to log into Studio. 

    After you have successfully logged in, you will see the following screen:

    1. Project's menu that is divided into the following sections: Active Projects, Sandbox, and Archived. 

    2. HTML5 Studio menu that allows you to Browse Templates, seek for Help, find out what's new in Studio, and etc.

     

    dashboard

     

    To begin with the creation of your project, click on the New (3) button and choose Project from the drop-down menu. Afterward, give your Project a Title (4), provide its Description (5) and hit Save (6) when you are done. 

    dashboard 2

    Add Banners

     

    You can add banners to the project in a few different ways:

    1. By using the New button in the left-upper corner;

    2. By Assigning banners while browsing through banner templates;

    3. By uploading banners directly to your project.

    From a Template

     

    To add a banner from the provided templates of the Studio platform, navigate to Active Projects (1) and select the project that you have created previously (2). 

    active projects

     

     Press on the New button and choose Banner from the drop-down menu. 

    my campaign

     

    The breadcrumb (4) indicates that you are still in your project. At this point, you can select any template that you want to add to the project.

    dashboard 3

    Assign Banners

     

    To assign a banner to your project, select the template, that you will be working on, from the dashboard (1).

    browse templates

     

    When you have everything set up, click on the three-dots icon and select Assign to project (2) option. 

     

    assign to project

     

     Select your project from the drop-down menu and your banner will be assigned to the project.

    assign it to my campaign (1)

    Upload Banners

     

    In order to upload a banner to an already existing Project, press on Active Projects (1) and select project that you have created (2).

    upload project

    After you do so, you will see a box as per the image below. At this point, you can upload the banner by clicking on it and navigating to you banner's location in your system or, alternatively, you can drag & drop the file on the box. 

    Upload project 2

    Delete a Project

     

    If you want to delete a Project from your Studio profile, hit on Active Projects (1) to see all of your projects and select Delete (2) on the project that you want to delete as per the image below. 

    deleting a project

    Afterward, you will be given two options to either Delete Project and Banners Inside (3) or Delete Only Project (4). The difference between the given options is that the third one deletes the project and its content while the fourth option deletes the project but preserves the banners inside and relocates them to the Sandbox.

    deleting a project 2 (1)

    Multi Upload to Adform

     

    There is an option to upload several banners from your project to the Adform platform at once. Although it is only available when you are logged in with your Adform credentials. To do so, you need to navigate to your Active Projects (1) and open your project that has more than one banner uploaded in it. The number of banners uploaded in the project is shown at the bottom (2) as per the image below.  

    multi uploading

    When you have the project open, make sure to tick the specific banners that you want to have uploaded (3). Afterward, select the option Send to Adform (4).

    multi uploading 2

     

    A dialog box will populate from where you will have to select your active client (5) and campaign (6) that you need your banners to be uploaded to, and, ultimately, hit the Upload (7) option. 

    multi uploading 4

     

    In the final stage, you will see a list of banners that indicates what has been uploaded to the platform (8). The status of uploaded banners will be set to Completed (8). 

    multi uploading 3

    Archive a Project

    There is an option to archive your projects for later use.  To do so, select your Active Projects (1) and hit the Archive project (2) option as per the image below. Afterwards, the project will be moved to the folder that is called Archived. 

    archive project

    When you feel like working on the archived project once again, navigate to the Archived (3) folder and select Unarchive project (4). The project will be moved back to your Active Projets folder. 

    unarchive project

  • Private Templates Using Projects

     

    If you need a place to store your own private templates which could be reused in the future, you can use Studio's Projects functionality.

    In order to do that, follow the guidelines below:

    Create a Project

     

    To utilize the Studio's Project feature, you must necessarily be logged in. You can do so in two following ways:

    • As a media agency, you can log in with you Adform platform login credentials.
    • As a creative agency, you can use your Github account to log into Studio. 

    After you have successfully logged in, you will see the following screen:

    1. Project's menu that is divided into the following sections: Active Projects, Sandbox, and Archived. 

    2. HTML5 Studio menu that allows you to Browse Templates, seek for Help, find out what's new in Studio, and etc.

     

    dashboard

     

    To begin with the creation of your project, click on the New (3) button and choose Project from the drop-down menu. Afterward, give your Project a Title (4), provide its Description (5), and hit Save (6) when you are done. 

    dashboard 2

    Add Banners to the Project

     

    You can add banners to the project in a few different ways:

    1. By using the New button in the left-upper corner;

    2. By Assigning banners while browsing through banner templates;

    3. By uploading banners directly to your project.

    From a Template

    To add a banner from the provided templates of the Studio platform, navigate to Active Projects (1) and select the project that you have created previously (2). 

    active projects

     

     Press on the New button and choose Banner from the drop-down menu. 

    my campaign

    The breadcrumb (4) indicates that you are still in your project

    dashboard 3

    Assign Banners

     To assign a banner to your project, select the template you need from the dashboard (1).

    browse templates

     

    When you have everything set up, click on the three-dots icon and select Assign to project (2) option. 

     

    assign to project

     

     Select your project from the drop-down menu and your banner will be assigned to the project.

    assign it to my campaign (1)

    Upload Banners

     

    In order to upload a banner to an already existing Project, press on Active Projects (1) and select project that you have created (2).

    upload project

    After you do so, you will see a box as per the image below. At this point, you can upload the banner by clicking on it and navigating to you banner's location in your system or, alternatively, you can drag & drop the file on the box. 

    Upload project 2

     

    Adform's Studio allows you to share your ads by using Studio's ad sharing functionality.

    In order to share a private version of your ad, find the required ad in the project and open it. Afterward, follow these guidelines:

    1. Click on the three dots icon and select Share option from the list.

     share banner

    3. To share the copy of the banner, copy the provided URL.

    share banners 2 

    Please note that this creates a copy of your ad so that your original private template will not be changed.