How to Create a Native Ad Template
Creating a new native ad template is a simple three-step process that involves some basic familiarity with HTML (for now -- we're working on this!).
Jump to steps
First, you'll need to write the base HTML snippet that you'd like to base your native ad on. Conveniently, this HTML already exists in your site, so in most cases this won't take more than a bit of copying, pasting & editing. Note: you're free to write the HTML from scratch as well, but that won't be the focus of this section.
Once you've identified an article panel, widget or post thumbnail within your site that could contain a native ad meeting the requirements above, 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:
If the HTML that you've copied looks long & unruly like the example above, don't worry! We're going to trim it down and replace a lot of the unnecessary code in this next step.
Step 2: Insert Template Variables
Now we need to remove any unnecessary styles, attributes & elements from the HTML snippet boilerplate we've retrieved and add in Cliques-specific template variables. When an impression is purchased by an advertiser, these template variables will be replaced with their advertiser-specific values.
Starting from the HTML boilerplate above, we can first trim out all unnecessary HTML, which may include post-specific CSS classes, superfluous
data-* attributes, or other elements that we do not want to include in our native ad.
In this particular example, we know we will want to use the existing
<img> tag to hold our primary native ad image, but this
<img> tag as-is includes many unnecessary
data-* attributes, as well as a lengthy
srcset generated by the site's CMS system. Cliques smart native ad tags determine the size that the image needs to be in real-time, so we do not need to use the
srcset attribute for images in our templates.
After removing some unnecessary CSS classes from various elements, we can then begin to insert template variables where we'd like advertiser-specific data to be injected. The following is an example configuration, but you can place template variables wherever you see fit so long as the unit complies with template requirements:
Finally, we'll want to add in some custom styles to call this unit out as an ad, and distinguish it subtly from the rest of the article panels. The simplest way to do this is to use (gasp) inline
style attributes. Also, in order to meet the native ad requirements, we'll add a small advertisement disclosure label in the upper left of the main image:
This may take some trial & error, but that's why all placements initially display test ads (shown below) when inactive. Use the test ad assets to finalize the styling of your native ad template.
Step 3: Upload Template to Placement
Finally, we're ready to upload our native ad template to our placement in the Cliques Console. First, we'll need to create a new Native placement under one of our Site's Pages. In the Page Manager section, select New Placement:
Next, fill out the New Placement form, making sure to select Native as "Type", and click Save:
You should now see your new placement in your Placement Manager panel. Click on the Native Specs panel (where it says "No templates uploaded yet") to pull up the Native Specs editor:
In the subsequent dialog, activate the native placement for the desired form factors (desktop, mobile/tablet, or both). When you activate the placement for a form factor, copy & paste the template you've just created into the resulting text area. For this particular example, we will just paste the same template in for both form factors.
Click "Save", and you're done! Our staff will review your new template and activate the placement if it meets all requirements.