Create the Look & Feel

This article will guide you through the steps for creating the HTML structure (layout) for a Placement. This step requires basic knowledge of HTML. Click on "show advanced" to see the different fields that control how the placement will appear on the page.

  • Floating Video Mode: this activates the floating video based on three options that control when the floating unit will appear: Off, Always on, or After our embedded player comes into view. You can choose what this devise it will appear on, the width of the floating player, the gutter, and whether you would like a close button enabled. Note - The minimum width for floating player should always be 400px wide

  • Video Carousel: When this toggle is turned on, this enables a video carousel to appear under our player as such -

 

  • Container Selector -Using 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  
    • Insert Position - determines the location of the placement relative to the container with the following options: Within Container; Before container; After container; Replace container; Hide container.
    • Position - a dependent field based on selection of the “within container” option in the insert position. It will determine the location of the element within the container.

 

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;})() 

  • Video display mode: every a placement is associated with a Video Display Mode. The available options are:

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

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

 

  • Date Format  - this field format will determine how the date will be presented if used in the unit.
  • General HTML - The custom HTML for our placement  - this field must have a value. 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.
  • Video HTML - The custom HTML for the video placement  - this field must have a value

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 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 of your article pages and start with that. 

General HTML and Video HTML

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

General HTML is the default HTML to edit, Video HTML applies only if you are running display campaigns and will become the default HTML if Video Monetization or Branded Content are enabled. 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=600&height=340" class="connatix-video-image" cnx-video-ratio="16:9" />

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.

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

Comments

Please sign in to leave a comment.