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 enables to upload any kind of 3rd party HTML5 content (HTML5 Ad that you created using other authoring tools) and to test various features that are supported by our Ad Server.

    Problem

    Recently most publishers and programmatic ad exchanges started moving to SSL only environments. This change means that not only the Ad Server itself has to be SSL friendly, but also an Ad and all resources that it loads. It is not uncommon to load various 3rd party JavaScript libraries from popular CDNs or sometimes (even though we don't recommend it due to unstable delivery, lack of guarantee) to even load some other assets from various unknown servers. All these requests have to be done through secure SSL channels and that also means that an Ad will be rejected by the publisher or programmatic exchange if 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 would be hard to manually scan through source of each ad.

    Workflow

    SSL compliance can be done as a part of general ad compliance. It can be done both by Creative Agency or Media Agency. We recommend to do compliance as early in the Ad lifecycle as possible and this is one of the reasons why HTML5 Studio is publicly available to any Creative Agency and it doesn't even require credentials to access most functionality. This is also why HTML5 Studio accepts any HTML5 content instead of only the one that was build with Studio itself.

    Step 1. ZIP files:

     zip_2015-09-07_1317

    Step 2. Upload that ZIP to Studio:

    upload_2015-09-07_1320

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

    Html 5toolkit _select _cat _n _format _2014-11-10

    Step 4. If system is not able to detect correct width and height, make sure that it is set correctly:

    banner_settings_dimensions_2015 09 07 1324

    Step 5. This is an intermediary step that is not necessary. Studio can offer to insert Adform scripts, Global ClickTag and other features necessary for the Ad, you can generate LivePreview link and share it with stakeholders or open event logger and test whether custom rich media engagements are set correctly. 

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

     export_2015-09-07_1302

    Step 7. If HTML5 Studio will detect SSL non-friendly URLs it will show this dialog (otherwise it will proceed to export your ad):

     2015 09 08 1904

    Step 8. Click on Fix it and Studio will try to automatically fix all URLs. If all URLs will be fixed then it will proceed to export your ad, otherwise it will show a dialog with a list of URLs that were not fixed (we don't fix URLs for servers that don't support SSL or we are not able to guarantee that those servers really support SSL):

    Ssl Compliance Bad File List 2015 09 08 1907

    Step 9. If Studio was unable to fix some URLs, then close the dialog informing about that (Step 8) and proceed to fix those URLs manually. Open file browser from the left sidepanel and click on the file that contained bad URLs (Dialog in Step 8 show both URLs and files were those URLs are). Code editor will open after you click on a specific file, proceed to search through the source code (you can use search capabilities provided by the editor, use keyboard shortcut Ctrl + F). After fixing URLs click Save and repeat Export action to download a compliant version of an Ad.

    Ssl Compliance Fixing Manualy 2015 09 08 1907

    Note: If the particular resource resides on the server that doesn't support SSL (https) then 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. We recommend to host all assets and resources on Adform 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) with HTML5 Studio then you should follow this recommended workflow. 

    To upload HTML5 Ads into the CAW you have use asset zip files instead of entire HTML5 Studio Ad zip. Use asset download instead of export.

    Step 1. Open file browser panel:

    Select Filebrowser 2015 09 09 1451

    Step 2. Export single asset instead of entire HTML5 Studio Ad:

    Asset Download 2015 09 09 1452

    Step 3. Import this ZIP into the CAW.

  • Make banners to comply with Adform specifications (adformification)

     

    There are a couple of additional steps which needs to be done when the banner has to be served via Adform platform. The information on those steps can be found in here:

    /support/documentation/build-html5-banners/html5-banner-specifications/required-files-structure/

    /support/documentation/build-html5-banners/html5-banner-specifications/adding-clicktag-variables/

    To be short these are the steps that's needs to be done in order to compy Adform specifications:

     

    1. Create a manifest.json file with the banner properties in it;

    2. Apply DHTML.js library to the banner's HTML page;

    3. Apply javascript clickTAG inside banner html (or through external javascript file) in order to track click's on the banner.

     

    But by using Studio all of this can be done automatically.

    Let's pretend that as a creative agency we just created this banner without knowing about any of the Adform specifications. 

     

    First Copy (4)

     

    1. Upload banner to Studio by dragging and dropping your banner on the "upload" banner.

    2. As our banner does not have manifest.json file - Studio can not determine the format of the ad so we will have to select the format and in our case the format is standard.

     

    Second Copy (3)

     

    1. If your loaded banner would not be of the size of 300x250 (which is a default size in Studio for banners) you have to explicitly determine your banner dimensions;

    2. Studio will check the banner and after seeing that it does not comply with Adform specifications it will suggest to "adformify" the ad and the first step would be to add a "Global clicktag"

     

    Third Copy (2)

     

    1. Global clicktag is easily added by applying a link for the landing page.

    2. After proceeding the banner should be adformified at this point. 

    If you would check html file of your banner you should find similar code which was added automatically:

     

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

     

    This means that one global clicktag was applied on top of your banner and it should fire when pressed on the banner. Please note that this is not going to work when you need to apply several clicktag's or a clicktag on some particular part of the banner.

    At this point our banner should have all of the necessary points (DHTML.js file added, clicktag code added, manifest.json created) acquired so the banner should comply Adform HTML5 banner specifications now. Congratulations!

     

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

     

  • Upload 3rd Party Ads and apply Adform features

    HTML5 Studio helps to do compliance for any HTML5 Ad that is supposed to run on Adform Ad Serving technology. To ensure that every ad complies with certain rules and implements Adform clicktags, tracking and other necessary features, we created a set of features built specifically for testing any HTML5 content.

    Uploading your custom build HTML5 Ad to Studio

    First, ZIP your HTML5 content (Ad). Usually it is a main HTML file + some folders with images, javascript, css. If this ZIP package will have ADFProperties.xml or at least manifest.json then it is great. However, HTML5 Studio can handle ZIPs that do not contain any Adform metadata!

    We will try to automatically detect as much metada as possible, but if it is not possible to automatically determine banner category, format or dimensions, then we will ask about those or we will apply default values. Below are some detailed steps on content upload and settings.

    Step 1. ZIP files:

     zip_2015-09-07_1317

    Step 2. Upload that ZIP to Studio:

    upload_2015-09-07_1320

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

    Html 5toolkit _select _cat _n _format _2014-11-10

    Step 4. If system is not able to detect correct widht and height, make sure that it is set correctly:

    banner_settings_dimensions_2015 09 07 1324

    Banner Adformification

    This is an automatic mechanism that detects if your ad has no Adform scripts and offers to inject reference to Adform dhtml.js library (which is necessary for every Rich Media HTML5 Ad) and also offers to apply a Global ClickTag for the entire banner. This is handy when you have multiple HTML5 Ads where you only need to add one clicktag that works with Adform.

    Adformification dialog pops up automatically after you open banner workspace and system detects that banner is lacking scripts:

    Adformification Step1 2015 09 07 1329

  • 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

    First open Create Banner section and tick the Quick templates checkbox. You will be presented with a list of quick templates:

    quick_templates_2015-09-07_1244

    Producing the Ad

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

    template_manual_2015-09-07_1247

    In most cases you simply want to replace default images with your own. In order to do that, select File Browser (which is accessible through left panel  navigation) (Step 1) and go to Additional Assets (Step 2).

    Step 1:

     filebrowser_2015-09-07_1253

    Step 2:

    additional_assets_2015-09-07_1254

    Step 3:

    additional_assets_replace_2015-09-07_1255

    After you reach additional assets panel, click on each image to replace it with a file from you local computer (Step 3). Live Preview of an ad will automatically refresh after you change something in the banner.

    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:

    preview_icon_2015-09-07_1259

    Exporting the Ad for Ad Serving

    If you do not have a direct access to Adform Platform, export your ad as a zip file:

    export_2015-09-07_1302

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

  • Optimize (reduce weight) banners by using Studio

     

    Sometimes media agencies need the banner's to be more lightweight, especially when initial banner weight is heavier than the banner asset upload limit in Adform platform (which is usually set by the contract). In this case one of the solutions might be to decrease banner size by using Studio's banner optimization feature. This feature does a few things:

     

    1. Can append several files into one in order to save on the number of file requests;

    2. Compress and minify html/css/javascript in order to save on the file weight;

    3. Optimize images so that they would be more lightweight. This optimization is done without losing image quality.

     

    In order to use this feature you have to go to Studio.

     

    Third Copy (1)

     

    1. Upload your banner first by dragging and dropping on the "Upload" button.

     

    First Copy (3)

     

    1. Press on the upload icon in the right upper corner and select "Optimize banner & Upload to Adform".

    Afterwards you should get a success prompt like this:

     

    Second Copy (2)

     

    1. This shows the properties of the original banner;

    2. Your banner's optimized properties;

    3. Press on this button in order to double check if your banner still looks fine;

    4. Press on the "Upload" button in order to load your optimized banner to the Adform platform.

     

    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

     

    Sometimes there is a need to quickly test several banner's which has a local connection between them. In this case Studio can also help us a lot which simplifies the process of testing banner ad's. For the purpose of this tutorial we are going to use banner's provided in here as an example. 

    In order to test banner's with local connection we need to leverage Studio's "history" feature. This feature enables you to view all of the banner's on which you have recently worked on, but to have a history of your project's you have to be logged in first.  The easiest way to do that is by using Github account which is mostly free.

     

    First Copy (5)

     

    1. Press on the "Sign In" link and you should get a popup window as in the screen above;

    2. Press on the "Github Sign In" link and you should be redirected to the Github page. 

    If you were logged in on the Github page before you should see an instant login to studio. If you do not have a Github account - please create one.

     

    Second Copy (4)

     

    After logging upload your both banner's to studio.

    1. Press on the "Banner history" link and in here you should see all of your banner's listed on which you have worked previously;

    2. Select the first banner you want to preview;

    3. Select the second banner;

    4. Press on the "Preview selected" for your preview with two banner's in it.

    Here is our test preview from the Studio: 

     

    Please note that Studio is constantly evolving so at the time you are using this tutorial "history" feature might have more functionality and a different user interface

     

  • How to load expanding banners in studio

     

    If you have previously exported expanding banner from Studio and have a project zip of it - you can simply load it to Studio and your banner should be automatically loaded, but if you have never uploaded an expanding banner before and you have two sepearate zip files for collapased part and one for expanding part, here is a few steps on how to upload such banner to Studio:

     

    First (2)

     

    1) Firstly we need to find out an expanding banner template by using categories menu;

    2) Or by using "search" and entering "expandable" into the search;

     

    Let's select Expandable 650x170 650x340 template.

     

    Second

     

    In the upper left vertical menu (icons) select the bottom icon which stands for "file browser". Afterwards, you should see assets for both collapsed and expanding parts of the banner.

    1) After hovering on the assets "three dots icon" should appear. By pressing on the "three dots icon" of the expanging part's assets you should get a drop down menu with several action options;

    2) Select "Delete asset";

    3) Templates expanding assets will be deleted so that we could load our own assets.

     

    Third

     

    1) You should get a two buttons suggestion where you can "create new" or "upload" your assets from your computer.

     

    Fourth

     

    1) Let's repeat everything with the collpased assets.

     

    Expand5

     

    Your expanding banner from two files should be loaded by now and ready for use.

     

    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

     

    In this tutorial we are going to load and test (preview) a click to float solution in Studio. We will be previewing two banners at once. Please note that in order to do this you have to be logged in. Users who are not logged in does not have this (previewing several banners at once) functionality. 

    For this tutorial we are going to use a CLICK TO FLOAT 300X250 _ 800X500 HTML5 template which you can find in here  (or whatever click to float banner solution you have).

     

    FilesYou should have two zip's ready for loading in studio. You can load your banner's straight in banner projects by creating a project, but we are going to do this tutorial in the projects sandbox. To read more on projects click here.

    Simply drag and drop your banner zip on top of the sandbox and your banner should open up in Studio.

    Drag

     

    Please note that if your banner's are not Adform project files (has never been loaded to Studio and exported from it) - Studio will ask to select banner type:

     

    Drag 2 Copy

     

    1) From the banner type selection dropdown menu select Display->Standard. Select Floating->Floating Ad (or other type depending on the files you are loading) when loading your floating ad.

     

    Both Copy

     

    By now we should have two banner's loaded in our sandbox.

    1) simply select both banners by checking the options box at the upper left corner of your banner's thumbnail;

    2) Press on the "preview" at the top as displayed in the screenshot. 

    Afterwards you should get a preview of your both banner's where you could see how your click to float works.

     

    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 add a clicktag through banner settings like displayd in a below screenshot:

    Step 1. Adding a clicktag through banner settings:

     

    Screen -copy

     

    Please note that by doing this you are not actually adding a clicktag inside of the banner, but only defining a number of clicktags your banner will have. In order to apply an actual clicktag inside of the banner you still have to do it manually through the banner code (technical skills required):

    Step 1. Selecting the file in which you want to add the clicktag.

    Step 2. Adding a clicktag through code editor. Here is the guidelines on how the clicktag should look like in order to comply with adform specifications.

     

    Screen -copy 3

     

    If you would like that studio automatically would apply a clicktag on top of the banner you can use Studio's global clictag feature.

    Step 1. Press on the "three dots icon" on the top left corner. Select "global clicktag" from the dropdown.

     

    Screen Copy 2

     

    Please note that this works only when your ad does not have any more interactions (like close or navigation buttons, or any complex user interactions inside) as global clicktag is applied on top of the whole ad which means that by pressing anywhere on the ad - clicktag will be initiated.

     

     

  • Sync Adform platform campaigns with Studio

     

    Sometimes you can face with the problem when you can not find your campaigns in the Studio. This usually is easily fixed by using the refresh button in the Studio. Let's try and go through the workflow.

    When uploading banner's to Adform platform from Studioyou need to press on the upload button:

     

    First Copy (2)

     

    1. Afterwards just press on the "Upload to Adform".

    You should see a similar popup, but in your case only your campaign details should be visible.

     

    Second Copy (1)

     

    1. Client accounts dropdown select;

    2. Campaign dropdown select;

    3. Refresh button to renew synchronization with Adform platform;

    4. Upload button to upload the banner.

     

    The trick in here is point number 3. With this button we can renew the synchronization with Adform platform at which point all of your newly created client and campaign details should be also available in the Studio.

     

    Please note that capability to upload banner's from Studio to Adform is only available to users who has Adform platform logins

     

  • How to work with banner projects

    Projects is a new 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. Multi upload banners to Adform platform from a project.

     

    Create a project

    To fully leverage Studio Projects functionality you have to be logged in into  Studio. At this point there are two ways to do that:

    1) As a media agency you can use an Adform platform login credentials;

    2) As a creative agency you can use your Github account to login to Studio.

    After logging in to Studio you should see something like this:

     

    Screenshot _2 Copy

     

    1. All possible banner templates are visible on the screen. 

    2. Your projects menu where you can find a sandbox, also active and archived banners;

     

    Let's start by pressing on the "new" button at the upper left corner and selecting "Project". You should get a similar dialog box:

    Screenshot _3 Copy

    1. A button where you can create a new project;

    2. Name your project title;

    3. Create a description for your project;

    4. Save your project.

    Afterwards, you should be redirected to your project overview screen where you can start adding banner's to specific project.

    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 while browsing through banner templates;

    3. By uploading banners directly to your project.

    From a template

    Screenshot _6 Copy

    1. Press on the "Active projects" in the projects menu;

    2. Select your active project which you have created previously.

     

    Screenshot _7 Copy

    1. Press on the new button and select "Banner" from the menu.

    Screenshot _8 Copy

    1. From the breadcrumb text we can see that we are still in our project;

    2. Now we can select any template which will be added to the project.

    Assign banners

     

    Screenshot _9 Copy

     

    1. Press on the banner templates and select the template you need;

     

    Screenshot _10 Copy

     

    1. Press on the three dots icon in the upper right corner and select "Assign to project".

     

    Screenshot _11 Copy

     

    1. Select your projected from the dropdown menu and your banner will be assigned to the project.

    Upload banners

     

    Screenshot _12 Copy

    1. Press on the "Active projects";

    2. Select your project to which you want to apply banners.

    Screenshot _13 Copy

    1. You should see a box with the dotted corners on which you can drag and drop or load the banner by pressing on it;

    Delete a project

    You can easily delete projects from your account.

    Screenshot _19 Copy

     

    1. Press on the "Active projects" link in order to see your active projects while in Studio.

    2. Find the project you want to delete and press on the "Delete" icon.

     

    Screenshot _20 Copy

    1. Afterwards you should see a similar dialog box. By selecting "Delete only project" your banner's wont be deleted and you should be able to find them in the "sandbox" later on.

    2. By selecting "Delete project and banners inside" your project and the banner's in it would be deleted permanently.

    Multi upload to Adform

    Now there is a possibility to multi upload banners to Adform platform. This feature is possible for users who has Adform platform credentials. First what you have to do is to login to Studio with your Adform platform credentials. Create a project and apply several banners to the project.

     

    Screenshot _3 Copy (1)

     

    1. By pressing on "Active Projects" you can see all of your active projects;

    2. We can see that in this case there is one active project with the name of "My campaign" and it has three banner's in it.

     

    Screenshot _4 Copy

     

     1. All of the banners and their information together with their respective thumbnails are dsiplayed.

    2. To upload all of these banner's to Adform platfrom press on the button "Send to Adform".

     

    Screenshot _5 Copy

     

     1. Select your active client;

    2. Select campaign there your banners will be uploaded;

    3. Press on the "Upload" button.

     

    Screenshot _6 Copy (1)

     

    1. You should see a list of banner's which will be uploaded to the platform. The status for uploaded banner's should change to "Completed" after the banner will be actually loaded to the platform;

    2. Press on the "close" after all banner's will be loaded.

    Archive a project

    You can archive your projects for later use or if you are not sure if deleting permanently is a good idea.

    Screenshot _16 Copy (1)

    1. In the menu press on the "Active projects" link;

    2. Find the project you want to archive and press on the "Archive project" icon.

    Screenshot _17 Copy

    1. From the menu press on the "Archived" section;

    2. Your archived project should be visible. You can also "unarchive" your project by pressing on the "unarchive project" icon.

  • 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:

     

    To take the full advantage of Studio Projects functionality you have to be logged in to Studio

    • For Media Agency: use Adform's platform login cedentials.
    • For Creative Agency: use your Github's account to log in.

    When you are logged in to the Studio, you should be able to see the following (image below):

    1. All possible banner templates.
    2. Projects menu where you can find a sandbox, also active and archived banners.

     

    studio-private-templates

     

    Create a Project

    To create a new project, follow these steps: 

    1. Click on New button.
    2. Select Project from the drop-down list. 


      2-create-new




    3. Name the project.
    4. Provide a description.
    5. Click to Save

      3-name

     

    Afterwards you are redirected to your project overview screen where you can start adding banners to specific project.

    Add Ads to Project

    You can add banners to the project in 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 Template

    1. Click on Active Projects in the menu.

    2. Select the project.

    7-active-projects

     

    2. Click on New button and select Banner (1) from the drop-down menu.

    Check the breadcrumbs (2) to see if you are still in your project.

     

    8-active-projects

     

    4. Select a template to be added to the project. 

    Assign Ads

    1. Click on the Browse Templates in the side menu.

    2. Select a template and click on it.

    3. Click on 9 More Icon icon in the right-upper corner and select Assign to project.

    10-assign-to-project

     

    4. Select the project from the list to assign the banner to. 

    11-assign-to-project

     

    Upload Ads

    1. Click on Active projects

    2. Select a project by clicking on it. 

    3. Drag & drop the banner to the box, or click on it in order to upload the banner.

    10-upload-ads

     

    You can easily share your private ads by using Studio's ad sharing functionality.

    Keep in mind that this creates a copy of your ad so that your original private template will not be changed.

     

    In order to share your ad from the project, follow these steps:

    1. Find your ad in the project and click on it.

    2. Click on the 9 More Iconicon and select Share option from the list.

    11-share-the-ad

     

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

    12-url