Banner HTML5

Description

Banner HTML5 is a banner that displays arbitrary HTML content or an image. The HTML code can be a regular HTML page with styles and scripts. It's placed in an iframe and has limited access to the site content.

Using a Banner HTML5 [context] template, you can add a banner to a site in two ways:

  1. By preparing only the image. A click link in the banner parameters determines image clickability.
  2. By preparing an HTML creative in the Adobe Animate CC or Google Web Designer editor following the instructions.

If you add both HTML code and an image to the banner, the HTML code is displayed.

Parameters for adding a banner to Adfox:

  • Banner width and height.
  • Custom CSS styles for the banner container.

Sample banner

Sample ready-made project with one button in Adobe Animate CC, source file.

Sample ready-made project with multiple buttons in Adobe Animate CC, source file.

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

Develop an HTML creative

Study the HTML code requirements
  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 allowed size, reduce it by splitting JavaScript and CSS into separate files:

    1. Save the JS and CSS code in separate files with the .js or .css extension.
    2. File weight can't be more than 300 KB.
    3. Upload the files to the Files tab of the ad campaign and embed the resulting links to the files in the HTML code.
    • If absolute links (src="js/script.js", src="css/style.css") are included in the project, then when the project is uploaded, Adfox recognizes the file paths, automatically uploads them to the Files tab, and replaces all links to these files in the uploaded project.

    • If relative links (for example, src="../js/script.js") are included in the project, use one of the following methods:

      • Replace the links to the .js and .css files with absolute links: Adfox parsing will work and all of the links will be replaced automatically.
      • Manually upload the .js and .css files to the Files tab. Then get links to these files in Adfox and replace the relative links with them in the HTML code.

      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, FLV, MP4, OGV, OGG, WEBM, AVI, and SWF.

  6. The maximum size of each file (this applies to archived files as well): 300 KB, and 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 include an 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 that you reduce the image file size using a service like TinyPNG. This service works with both PNG and JPEG.
  • You can use SVG and vector images, which means they look better on both mobile and desktop devices. They have a small file size and can be animated.
  • Acceptable image formats: PNG, GIF, JPG, and SVG.
  • Maximum weight of a file: 300 KB.

Select the editor where you'll develop the HTML creative and click its link. Prepare an archive with an HTML creative following the instructions:

Adobe Animate CC editor: One-button banner
  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.

Adobe Animate CC editor: Multiple-button 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 add a click to the necessary buttons later. We recommend that you use the names 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(
      //Separate the buttons paths with a comma, adding this first
      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(
      //Separate the buttons paths with a comma, adding this first
      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.name.button1
     //End of button space
     );
    

    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(
      //Separate the buttons paths with a comma, adding “this” first
      this.button1,this.scene_instance_name.button2
      //End of button space
      ); 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 options, use the template from the first item, and publish the project by selecting the directory that you want.

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

Google Web Designer
  1. Download the banner template for Google Web Designer.

    You can use this banner code as a basis for making creatives in the editor. Put the contents of the archive 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 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.

    The Interactive area component is used for calling actions.

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

    On the Custom code tab, select the call of the click 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, use the following code:

      callEvent(n);

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

    How to use a stretching 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 button and event number correspondence. For each event, the manager adds its own click 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.

Other editors
  1. Click counting in the banner.

    For the Adfox banner to count clicks, edit the a tag for the href attribute in the HTML code: add a %banner.reference_mrc_user1% variable.

    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 from multiple links in 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 values with the %request.reference_mrc%&pf=%banner.eventN:urlenc% variables, where N should be replaced with 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).

Add a banner to Adfox

Note

You can add a Banner HTML5 as a separate banner or as part of a carousel.

To add a Banner HTML5 to a carousel:

  • Create a master campaign with the Carousel profile.
  • Select the Banner HTML5 Slide [context] template for the Banner HTML5.
  • Put the Banner HTML5 and the carousel on the same placement.

To add a banner to Adfox, select the necessary banner type and the Banner HTML5 [context] template.

Set the banner parameters:

  1. Archive with HTML5 creative: Upload a ZIP archive with the project. Leave the Creative HTML5 code box empty (it's filled with the contents of your project's HTML file after you add the banner).

  2. Creative HTML5 code: Upload a ZIP archive with the project prepared in HTML editors or paste the HTML code.

  3. Click URL: Enter the link to the advertiser's site. For the click to work correctly, make sure that the link includes the protocol (http:// or https://).

    Note

    If the banner contains several links, add them on the Events tab in the click URL fields. Check the correspondence between link numbers and events with the developers of the HTML creative.

  4. Link TARGET: Determines the window where the link opens:

    • _top: Current window.
    • _blank: New window or tab, depending on the browser settings.
  5. Tracking pixel link: By default, the Adfox //banners.adfox.ru/transparent.gif pixel is used. If you want to count impressions in a third-party system, delete the Adfox pixel and specify another link.

  6. Creative width (px or %): Specify the banner width.

  7. Creative height (px or %): Specify the banner height.

  8. Image: Upload an image.

    Conditions for displaying creatives:

    • If you added HTML code and an image, the HTML code will be displayed.
    • If you added an image, this image will be displayed.
    • If you added HTML code, this HTML code will be displayed.
  9. Name for the class attribute of the banner container: Enter a name (or multiple names separated by a space) for the class attribute of the banner container.

  10. Use SafeFrame (yes|no): SafeFrame is a technology that wraps ads in a special iframe that has a strict API. SafeFrame prevents the ads that are rendered in it from collecting data and interacting with the rest of the page outside of the SafeFrame.

    • yes: Enable SafeFrame and restrict access to the web page.
    • no: Disable SafeFrame.

    The banner code has access to the web page.

  11. Styles for banner block: Custom styles for the banner container in a single string. Except for the display style. For example, border: 1px solid red. Invalid values are ignored by the browser.

  12. Under Advertising label settings:

    • In the Ad label list, select Ad or Social ad, and the label will be added to the banner. If the creative's design already includes the label, you can keep “Disabled” in the drop-down list.

      Note

      Adding the “Social ad” label doesn't automatically define the creative content as social ad. To label creative content as a social advertisement in the state register, select Social ads contract for the corresponding contract with the end advertiser.

    • In the Domain field, specify the advertiser domain, and it will be added to the label: “Ad | example.com” or “Social ad | example.com” (only if you select Ad or Social ad in the drop-down list).

  13. To add a token to a non-clickable banner, enable the Show banner menu option in the banner settings. When the banner is served, the menu icon  will be displayed in the upper right corner of it. When a user clicks this icon, the advertiser information and the copy token button appear (if ad register is enabled for the banner and a third-party token is specified).

    The banner menu contains a link to the rules for using recommendation technologies. That is necessary to comply with paragraph 3, section 1, article 10.2-2 of Federal Law No. 149-FZ On information, information technologies, and information protection", dated July 27, 2006.

    Note

    If a banner is non-clickable (the Transition URL field is not filled in) and it is to be added to the ad register, be sure to show the banner menu. This is the only way to make the token available when serving the banner.

  14. Settings for Russian ad register: The section is only available if the Submit data to state register procedure is selected in the campaign settings. Fill in the fields in this section to register the creative in the Yandex advertising data operator. The creative is assigned a token automatically.

    Note

    If a specific banner doesn't need to be added to the ad register, select Do not submit data to state register.

Contact support

Send an email