Display & Native Tags - Direct Integration
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
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.
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:
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
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.
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!