====== Affiliate Program Integration ======

====== Clickaine Native Ads ======

Native advertising is a powerful way to monetize your content. Here’s the concept: suppose you have 100 thumbnails on a page. A sponsor or broker wants to insert ads that blend seamlessly with your content—so seamlessly that visitors see them as part of your site.

This is accomplished using [[new_rotation_templates#inline_thumbs]].

**How to set up Clickaine native ads in 5 minutes:**

1. In template editing, click **Add Monetization → Inline Ads → Clickane**. The script automatically inserts your JavaScript code, which looks something like:

  <script src=’//api.clickaine.com/v2/a/na/js/inline/ed3ad2086262f534b85eb0dba300aab0’> </script>

(Your code will have your unique ID.)

2. Create a sub-template to display sponsor native thumbnails.

For example, if you output thumbnails inline in your main template:

<code>
<thumb num=1-100 >

<div class="thumb">
<a href="/gallery/<!--GALLERY_SLUG-->/index.html" >

<img src="<!--THUMB_URL-->" style=’width: 240px; height: 180px’ />

<div class="thumb_name"><!--ALT--></div>

</div>
</thumb>

</code>

Or if you use a separate sub-template for thumbnails:

<code>
<thumb num=1-100 template=my_subtemplate_for_thumbs></thumb>

and the sub-template itself my_subtemplate_for_thumbs

<div class="thumb">
<a href="/gallery/<!--GALLERY_SLUG-->/index.html" >

<img src="<!--THUMB_URL-->" style=’width: 240px; height: 180px’ />

<div class="thumb_name"><!--ALT--></div>

</div>

</code>

Now create a sub-template called `sponsor_thumbs` (or similar) with Clickaine parameters:

  <div class="thumb">
  <a href="/gallery/<!--GALLERY_SLUG-->/index.html" clickaine-url >
  <img clickaine-img src="<!--THUMB_URL-->" style=’width: 240px; height: 180px’ />
  <div clickaine-title class="thumb_name"><!--ALT--></div>
  </div>

Note the Clickaine parameters. These tags tell the Clickaine JavaScript which parts of the HTML should be replaced with native ads.

For example, the `clickaine-img` attribute on the `<img>` tag tells the script to replace the thumbnail URL with a native ad thumbnail URL.

3. In your template, specify how many native thumbnails you want to display:

<code>

<thumb num=1-100 inline_thumbs=5 inline_thumbs_subtemplate=sponsor_thumbs>

</code>

The parameters **inline_thumbs=5 inline_thumbs_subtemplate=sponsor_thumbs** mean: display 5 out of 100 thumbnails using the `sponsor_thumbs` sub-template (the one we created in step 2).

That’s it—native ads are now live on your site.