Display & Native Tags - Direct Integration

If you do not use a 3rd party ad-server such as Doubleclick for Publishers and instead intend to place Cliques' ad tags directly on your webpage, read more below for different ad-tag configuration options.

Introduction

Cliques provides two ways to integrate ad tags directly into your webpage. Which option you choose depends on how much control you have over the primary contents of your webpage's HTML (specifically the <body> section of your page). 

Jump to steps

Direct Placement

If you are easily able to modify HTML within the  <body> section of your web page, direct placement will be your best bet. Copy & paste the complete ad tags (with secure / tag type options set) into the desired location anywhere between the beginning <body> and end </body> HTML tags.

Dynamic Insertion

Many CMS systems such as Wordpress make it cumbersome or complicated to directly modify the HTML contents of the <body> section of a page. That's why we built our tags with a feature called dynamic insertion: an option that lets you place tags anywhere in your page's header (<head>) section, where they will automatically insert your ad placement into a pre-determined location when the page is loaded.

To specify where each placement is inserted, we will need to provide two additional pieces of information: the HTML id attribute of the element in which we want to nest the placement (Target ID), and an integer specifying the order in which we want to insert it (Target Child Index). If you already know these off the top of your head, good for you (and why do you know that?)! You can skip the next two sections.

Getting the Target ID

Once you've identified the location where you'd like your placement to go, either view the HTML source of the page or use an HTML inspection tool built into your browser (e.g. Developer Tools in Google Chrome) to view the HTML for this element.

Below is a series of screenshots documenting how this can be accomplished in Chrome for Mac OSX:

We want the ad to get inserted into our page's sidebar, so we right-click anywhere in the sidebar and select "Inspect".
In the "Elements" tab of Developer Tools, mouse over HTML tags until the section you'd like to use as your target is highlighted in your browser

In our example, we see the element <aside id="cb-sidebar-b" class="cb-sidebar cb-sidebar-hp"...> contains all of the primary child elements of this sidebar, so this looks like the element in which we want our tags to insert the placement on page load. Thus, our Target ID is cb-sidebar-b.

NOTE: You must use the value of the id attribute (not the value of class, style or any other attribute), as each id value must be unique within a webpage. I.e. there cannot be two elements with the same id; this uniqueness is what allows our tags to identify the precise target element you select.

If the target element you find does not have an id value, you will need to give it one in order for dynamic insertion to work properly.

Target Child Index

The value of the Target Child Index determines the position in which the placement is inserted into the Target element's children. For example, if we specify a Target Child Index of 0, this means the placement will be inserted before all other children of the target; a value of 1 means it is inserted after the first element as the 2nd child, etc.

The Target Child Index uses zero-indexing, which means that if you want the element to be the n-th item in a list, you must specify a Target Child Index value of n - 1.

Finishing Up - Configuring & Exporting Dynamic Insertion Tags

Back in the Cliques Console, enabling Dynamic Insertion by simply checking the "Dynamic Insertion" option in your ad tag dialog window:


This will expose two new field: Target ID and Target Child Index. You MUST provide both of these values in order to enable dynamic insertion. Input the values determined through the steps above for each respective field, and then click Copy to Clipboard.

Now you are free to place this tag in your page's header, and you should begin to see ads get injected automatically into the location you've specified above!

Still need help? Contact Us Contact Us