Native Only - Javascript API (Advanced)

For ultimate flexibility, advanced users who wish to write custom native ad implementations may use our Javascript tags as a client-side API.

If you run a site with a more complex Javascript front-end architecture, or wish to simply have more control over the way our ads are loaded onto your page and customize certain loading behaviors in Javascript, you may want to utilize the public API exposed through our Javascript ad tags.

Quick start

<!-- First, load the script file -->
<script src="https://storage.googleapis.com/cliquesads-js/cloader.min.js"></script>

<!-- Now write our custom Javascript, using objects & methods exposed by the CLoader script -->
<script>
   var placementId = "{{ your Cliques placementId }}";

   // Instantiate a Cliques loader
   var cliquesLoader = CLoader.init({
       pid: placementId,
       secure: true,
       type: "native",
       // These next options allow you to set the aspect ratio & layout
       aspectHeight: 2, // 3:2 aspect ratio
       aspectWidth: 3, // 3:2 aspect ratio
       // each dimension of the aspect ratio is multiplied by this factor
       // so if scaleFactor === 300 & aspectWidth === 2, width will be 600px.
       scaleFactor: 300,
       aspectLayout: "landscape", //
       lazy: true
   });
  
   // Call main function & pass callback for when template is rendered.
   cliquesLoader.main(function(err, template, context){
      // `template` is the raw, unrendered HTML as a string of the native ad template.
      // `context` is the object with the winning bidder's ad metadata, i.e. image, 
      // click_url, etc.
      // `err` will only be non-null if a JS error is thrown in rendering process.
      //
      // If ad-response is empty, i.e. no one bought the impression, then `renderedTemplate` will 
      // be null,
      // as will `err`.
      if (err){
         console.warn(err);
         return;
      }
      // push ad markup to json array if
      if (template && context){
         console.log(template);
         console.log(context);
	 var templateHtml = cliquesLoader.renderNativeTemplate(template, context);
	 // now you can load templateHTML into your page however you like (e.g. using JQuery, vanilla Javascript, Angular, etc.)
      }
   });
</script>

Still need help? Contact Us Contact Us