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!).

If you don't feel comfortable with HTML and would like some assistance in creating a native ad template, please let us know and someone from our team will be able to assist you.

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:

In Chrome, right click on the element you'd like to copy and select " Inspect".
In the "Elements" tab of Developer Tools, mouse over HTML tags until the entire block you'd like to use is highlighted in your browser.
Right click on this HTML tag, select "Copy" > "Copy Element"
Paste into your preferred text or HTML editor (TextEdit, Notepad, Atom, etc.)

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

This is the trickiest part, and the step that requires some knowledge of HTML & CSS. If you get stuck, please let us know and we will do our best to help you out.

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.

For a full list of all available template variables, see: Native Template Variables.

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.

Before
After

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:


After template variables
With template variables.

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:

With inline styles & advertisement disclosure
With new inline styles & advertisement disclosure.

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.

NOTE: You may choose to activate the native ad for desktop browsers, mobile browsers, or both. Because each form factor may require a different HTML template, we allow you to upload distinct templates for each form factor. Cliques' smart native tags will automatically detect the browser type for each user and call the appropriate template
NOTE: Depending on how your site's HTML & CSS are written, the same template may or may not provide the desired results for both form factors. You may be able to use the same template for both desktop & mobile, but results may vary.

Click "Save", and you're done! Our staff will review your new template and activate the placement if it meets all requirements.

Still need help? Contact Us Contact Us