Banner HTML5

1. The maximum allowed size of an HTML file is 65,000 bytes.

2. It's best to place JavaScript and CSS inside the HTML code of the banner. If the final HTML code exceeds the maximum acceptable size, reduce it by splitting JavaScript and CSS code into separate files:

   1. Save the JS and CSS code in separate files with the .js or .css extension.
   2. File size can't exceed 10 MB.
   3. Upload the files to the ad campaign's Files tab and add the resulting file links to the HTML code:

   • If the project includes absolute links (src="js/script.js", src="css/style.css"), Adfox will recognize the paths to the files and automatically add them to the Files tab, replacing all links to these files in the project during the upload.

   • If the project includes relative links (src="../js/script.js"), use one of the following methods:

     • Replace .js and .css file links with absolute paths: Adfox parsing will trigger, and all links will be replaced automatically.
     • Manually upload .js and .css files to the Files tab and replace relative links in your HTML code with the ones you'll get from Adfox.

     Example of connecting JS and CSS files:

     <script type="text/javascript" src="LINK_TO_FILE"></script><link rel="stylesheet" type="text/css" href="LINK_TO_FILE" />
     

3. The project can contain only one file with the .html extension.

4. The maximum allowed number of files in a project is 50.

5. File types allowed in the project: CSS, JS, HTML, GIF, PNG, JPG, JPEG, SVG, JSON, MP4, OGV, OGG, WEBM, AVI, and SWF.

6. Maximum size of each file (this applies to archived files as well): 10 MB; 1 MB for video files.

7. If the banner is clickable, make sure there are no functions or methods in the HTML code that block clicks or taps. For example, the createjs.Touch.enable(stage) method enables multi-touch mode in CreateJS, blocking taps on the banner.

8. File names must only contain numbers or Latin letters and an underscore character. You can't use spaces, quotation marks, and special characters in the file name.

9. Scripts must contain the additional parameter: <script nonce="%request.eid1%">.

10. The completed project is a ZIP archive.

Image requirements

• Use high-resolution images. This substantially improves banner quality on mobile devices, though it reduces banner loading speed.
• We recommend reducing the size of image files using services like TinyPng. This service works with both PNG and JPEG.
• You can use SVG images. These are vector images, which means they will look better on both mobile and desktop devices. They also have a small file size and can be animated.
• Allowed image formats: PNG, GIF, JPG, and SVG.
• Maximum file size: 10 MB.

1. Download a banner template with a single clickable area (a button).

   Adobe Animate CC version 16.0 and higher

   Adobe Animate CC version 15.2 and higher

   Adobe Animate CC version 15.1 and lower

2. Create an HTML5 Canvas project in Adobe Animate (or open an existing one).

   

3. Open the publication settings in File → Publish Settings and use the template from step 1.

   

4. Select the directory and publish the project.

   

5. The entire banner area is clickable: it's a button that leads to the advertiser's site. The click link is pulled into the creative from the banner settings in Adfox.

6. After publishing the project, archive it with the .zip extension. Your creative is ready to be uploaded to the Adfox banner.

1. Download a banner template with multiple buttons.

   Adobe Animate CC version 16.0 and higher

   Adobe Animate CC version 15.2 and higher

   Adobe Animate CC version 15.1 and lower

2. Create an HTML5 Canvas project in Adobe Animate (or open an existing one).

   

3. When you add buttons or movie clips, it's important to set an instance name for them so that you can make the desired buttons clickable later. We recommend using names like “button1 − button9”.

   

   See also:

   Instructions for adding a button and assigning an instance name

   Button on the main scene

   1. Create an object on the scene, for example, using Rectangle Tool. Then select the object and select Convert to Symbol... in the context menu.

      

   2. In the window that appears, select Type: Button. You can leave Name unchanged. Then click Ok.

      

   3. For the click to work, assign an Instance Name to this button.

      

   4. Write the code for this button in Actions:

      window.buttons.push(
      //List button paths separated by commas and add “this” at the beginning
      this.button1
      //End of button space
      );
      

      

   Nested button

   1. Let's say that the button is inside another symbol, for example, Movie Clip. In this example, this Movie Clip has the Instance Name “name”.

      

   2. Double-click to go inside name. The nested button is there.

      

   3. When you specify the path to this button in Actions, you need to add the object's Instance Name after this where it's nested:

      window.buttons.push(
      //List button paths separated by commas and add “this” at the beginning
      **this**.name.button1
      //End of button space
      );
      
   Instructions for creating transparent buttons

   1. Select the necessary element and convert it to a symbol.

      

   2. Enter a name and select Type: Button.

      

   3. Double-click the symbol to open it:

      

   4. Insert keyframe in the hit frame.

      

   5. Delete the contents of the up, over, and down frames:

      

   6. The transparent button is ready:

      

4. Add an Actions layer to the project (this is where you add the code for the buttons).

   

5. Open the window for writing code.

   

6. Modify the code and write it in the Actions layer.

   window.buttons.push( 
    //Separate the buttons paths with a comma, adding this first
    this.button1,this.scene_instance_name.button2
    //End of button space
    ); setAdfox();
   

   If the button is in the main scene, enter its instance name right after this, for example:

   this.button1

   If the button is inside a nested scene, after this, write the instance name of the scene and the instance name of the button:

   this.scene_instance_name.button2

   Sample ready-made code in the Actions layer:

   window.buttons.push(
     ///List button paths separated by commas and add this at the beginning
     this.button1, this.scene_instance_name.button2
     . //End of space for buttons
     ); setAdfox();
   

   

7. The first button in the code line calls the first link from Adfox, the second button calls the second link, and so on.

   Note

   Together with the HTML creative, pass the information about the button and link number correspondence to the manager who adds the banner to Adfox.

8. Open the publication settings and use the template from step 1. Select the directory and publish the project.

   

9. After publishing the project, archive it with the .zip extension. Your creative is ready to be uploaded to the Adfox banner.

1. Download the banner template for Google Web Designer.

   You can use this banner code as a basis for making creatives in the editor. Place the archive contents into the folder with the program templates, for example:

   /Users/[USER_NAME]/Documents/Google Web Designer/templates
   

   

   The template contains an adfox_HTML5.js script and a set of parameters for click-throughs and event counters to work correctly:

   %request.reference_mrc%, %user1%, %eventN%, where N is the event number from 1 to 30.

2. Click processing.

   All events are assigned to animation elements on the Events tab.

   Actions are called using the Interactive area component.

   Add it and select the Tap Area → Touch/Click event.

   On the Custom code tab, select the click call function.

   • If a single button is used:

     callClick();

   • If multiple buttons are used:

     callClick(n);

     where n is the number of the event to be called.

   • If you need to call an event from an animation without a click-through, use the following code:

     callEvent(n);

     where n is the number of the event to be called.

   How to use a stretching (adaptive) banner

   To make the banner stretch across the width of the container on the site, specify percentages instead of pixels for the banner location and dimensions on the Properties panel.

   Use the Align by container and Adaptive layout options on the top toolbar.

   If you enable Adaptive layout before using any alignment tools, when you change the parent container size, all elements are aligned relative to each other and relative to the container size.

   You can use the relative element sizes in percentages and absolute sizes in pixels at the same time.

   Sample ready-made project in Google Web Designer, source file.

3. Publish the project.

   The project has to be published with the following settings:

   • Collect files enabled.
   • Create ZIP archive enabled.
   • Groups unpacking enabled.
   • CSS prefix enabled for WebKit and Mozilla.

   Note

   When adding a banner to Adfox, the manager needs to know the correspondence between the button and event number. For each event, the manager adds its own click-through link, which is then passed to the banner code using a variable.

   After publishing the project, archive it with the .zip extension. Your creative is ready to be uploaded to the Adfox banner.

1. Counting clicks on banners

   To count click statistics for a banner in Adfox, you need to include the following variable in the а tag for the href attribute in the HTML code: %banner.reference_mrc_user1%.

   For links, use the target attribute with the %banner.target% variable as an attribute. If the attribute is missing, the link will open inside the iframe: that is, the advertised site will open in the location of the banner.

   Example of HTML code that counts banner clicks:

   <a href="%banner.reference_mrc_user1%" target="%banner.target%">Advertiser's site</a>
   

2. Counting clicks for multiple links on the banner

   Let's say the banner has several links leading to different pages of the advertised site, and you need to count the number of clicks for each of them.

   <a href="http://site.ru" target="_blank">First link</a>
   <a href="http://site.ru/about/" target="_blank">Second link</a>
   

   Replace the href attribute value with the %request.reference_mrc%&pf=%banner.eventN:urlenc% variables, where N is the event number from 1 to 28.

   For example:

   <a href="%request.reference_mrc%&pf=%banner.event1:urlenc%" target="%banner.target%">First link</a>
   <a href="%request.reference_mrc%&pf=%banner.event2:urlenc%" target="%banner.target%">Second link</a>
   

   You need to inform the manager who adds the banner to Adfox about which links correspond to which variables. When adding a banner, you'll need to specify the first link for Event 1, and the second link for Event 2 on the Events tab.

   The first link: http://site.ru — %banner.event1:urlenc% (Event 1).

   The second link: http://site.ru/about/ — %banner.event2:urlenc% (Event 2).