Create a Layout

This article will guide you through the steps for creating the HTML structure (layout) for an ad unit. This step requires basic knowledge of HTML.

 Fill in the required fields as follows:

               Insert PathUsing jQuery/CSS selectors you can target the placement of the ad unit in the HTML page structure. You can use multiple selectors, separated by commas, to target ad units.

    e.g. div.connatix - this will target the div element which has the class connatix 

We also provide a feature that allows to establish the correct insert path by defining a self invoking JavaScript function. 

    e.g. (function(){ if(jq_connatix('#connatix').length > 0){var path = jq_connatix('#connatix');} return path.selector;})() 

                Position: Once selected the parent container in which you want your ad unit to be displayed, you can select on which position to be placed, before of after the container. Note that this field is a numerical one:

                                • - 1 = before the container

                                • - 2 = after the container

                                • - 3 = replace

                                • - 4 = before + hide

                • Autoplay Mode: you can choose one of these three options:

                      # No Autoplay - the video creatives served on the page will not have Autoplay enabled
                      # Accept Autoplay - the video creatives can have the Autoplay enabled
                      # Only Autoplay - only Autoplay video creatives will be served

               • Mute: choose whether to mute the video creative that has Autoplay enabled.

               • Video display mode: every ad unit is associated with a Video Display Mode. This setup applies when the creative running on the ad unit is video. The available options are:

                     # Lightbox - the video creative opens in a Lightbox
                     # Instead Of Ad - the Ad will be replaced by the video creative
                     # Instead of Ad Image - the Ad image will be replaced by the video creative
                     # Below Ad - the video creative will be displayed below the Ad
                     # Ad in Place - the Ad will be replaced by the video creative

For more details on the Video Ad Units, read the article Video Display Modes.

                HTML: Here, the HTML structure for the ad unit is built. Note that the ad unit should be wrapped in one (and only one) valid HTML element only. The steps are discussed further on this article.

               Layout optionsThis feature gives the possibility to create multiple versions of the same ad unit. You can create different layouts with different Insert Path, Position, or HTML structure. Use the Clone button to clone the current layout and if you want to create an entirely new layout use the Add button. Our algorithm will decide which of your Layouts performs best and will deliver most of the impressions to it.

HTML Structure

The first step is to decide whether you will work on an existing HTML structure or if you will create a new one.

Because we want to create native content that best fits in the page and ideally inherits the styles and behavior of the rest of the articles in the page, we recommend to work on an existing HTML. You can copy the HTML code of one article in the page and start with that. 

General HTML and Video HTML

There are two HTML sections: General HTML and Video HTML.

General HTML is used when the creative is a non-video and the creative can have smaller dimensions (e.g. 200X100).

The Video HTML applies to video creatives that have to follow the size requirements of minimum 301X251 or 351X201px. In order to render video creatives, the HTML code for a video creative must include the following syntax, with the required adjustments:

<img src="{{image}}&width=400&height=250" style="width: 100%;" class="abcd thisisleft connatix-video-image" cnx-video-ratio="351:201"/>

How to copy HTML structure

In order to be able to copy the desired article's HTML structure, use the right click on the page and choose "Inspect". 


This will pull up Developer Tools on your screen.


Next step is to find the top level element that best fits your needs. Right click on the HTML code and Copy-Paste it into the Connatix Console.

It's best to keep as many attributes as possible from the original article, because this way the new ad unit will inherit the style, format and design of the original article. The part that has to be changed will be the Title, Description, Date, Sponsor Name, Image and of course the hyperlink - once the Ad Unit is clicked, you want to open the data you are interested in, not the previous data from the article. In order to do this, use the placeholders.


Start replacing the content of the article: title, description, image, etc., with the data you want so that the Ad Unit will render different Creatives. In order to do this, we will use the Connatix Markup Language. The following placeholders are available:

                    • description - {{description}}
                    • image - {{image}}
                    • link - {{link}}
                    • pubDate - {{pubDate}}
                    • sponsor - {{sponsor}}
                    • logo - {{logo}}
                    • title - {{title}}                   

How they work

The description and title placeholders will render text. They can be placed in without being wrapped in quotes. You can limit the number of characters that will be displayed in title and description. The syntax is the following: 

                     • description - 100 characters
                     • title - 50 characters

If the set character limit is reached, the text will stop being displayed and three dots will appear. For users that don't want those dots displayed, the following syntax can be used:

                     • {{title - 50 - nd}} - where ''nd'' means 'no dots'

The image placeholder will return the URL of the image. This must be placed between quotes in the src or url attribute of an HTML element. We typically do this in <img /> elements. We recommend setting the image size, width and height. The syntax in this case is the following:

                     • image&width=150&height=100, you will have an image of 150 pixels width and 100 pixels height.

The link placeholder will return the URL to the article you will have on your Ad Unit. This is used in <a> html elements, placed between quotes in href attribute <a href="link" ></a>. 

The date placeholder will display the date in the format selected from General Settings.

The sponsor placeholder will display the sponsor name.

The logo will display the sponsor's logo.

Replacing the text

We can proceed with replacing the text with the placeholders in our article.

We recommend to keep the Classes and IDs from the original article, this way the style from your site will be applied on the ad unit also.


Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request


Please sign in to leave a comment.

Powered by Zendesk