JavaScript SDK Integration


 

1. Register your app/website and ad unit


  • Register your website under "My Apps"


     
  • Register each ad space you wish to integrate in your website under "My Ad Units"


     

NOTE: If you do not register individual ad units, you should pass unitId = 0. We strongly recommend registering all ad units to get better control over ad display.

 

2. Ad Views:


There are three ad views you can use in your app or website. Each requires the same steps to display (read "Placing an Ad View" below).

320X50, 320X240, WidthX90, Full Screen Ad, 320x250





 

3. Placing an Ad View: Overlay Ad


After registering ad unit (ad space), click on "Code Snippet" next to your registered ad unit to get the JS tag to be integrated in your webpage.



320 x 250 ad space tag would be - You need to change values in bold with your website's appId, ad unit Id, tags and ad unit's overlay position on screen


<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
// Here "addEventListener" is for standards-compliant web browsers and "attachEvent" is for IE Browsers.
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

//Listen to message from tqiFrame
eventer(messageEvent, function (e) {
	if (e.origin == 'http://adserver.tapcliq.com') {			
		if(e.data == "change") {
			window.document.getElementById('tqframe').parentNode.focus();
		}
		else 
		{
			closeMe(e.data);
		}
	}
}, false);  
</script>
<script type="text/javascript">						
var tq_appid = "c6048b1b78c549509c43596492409884"; // replace this with your registered appId for the website
var tq_tags = "lifestyle,news";  // You can add multiple comma separated content based tags - this is important as ad campaigns are delivered based on these tags
var tq_adunitid;
var tq_adheight;   
var tq_adleft;  // (optional) distance from left of the screen for the frame
var tq_adbottom;  // (optional) distance from bottom of the screen for the frame 
var userId;
</script>
<script type="text/javascript" src="http://adserver.tapcliq.com/adserver/rest/resources/js/showtqad.js"></script>

Now you can request for an ad from tapcliq on any page by calling getTqAd function with parameters ("ad_height", "coordinate_from_left", "coordinate_from_bottom", "your_registered_ad_unit_id_for_this_ad_size")


Example
For example if you have registered 3 ad units namely 320 x 50
You can request for them in your page as below :
getTqAd("50","0","0","186") -> This will request for 320 x 50 ad which would be displayed at the bottom of the screen, 20 pixels from the left

NOTE:
Overlay ad will go away after being displayed

 

4. Interstitial full screen ads :


For full screen ads - Put below mentioned scripts at the beginning of the <head> tag of the webpage in which you wish to display full screen ad

<script type="text/javascript">

var tq_appId = "82dcg335700043cc85b39c71c8e545c6"; //replace this with your appId, received on your website registration
var tq_tags="full"; //replace this with tags for which you would like to receive ads
var tq_unitId = "13"; //replace this with ad unit id received from ad unit registration 

</script>
<script src="http://adserver.tapcliq.com/adserver/rest/resources/js/createAd_tq.js"></script>

NOTE:

  • Multiple tags can be passed as comma separated values e.g., "sports,entertainment"
  • Website and ad units have to be registered on www.tapcliq.com

 

5. In-content ad


Placing an Ad View within the webpage: In-Content Ad

As mentioned before, placing an ad view in your mobile website is as simple as placing a snippet of iframe and including couple of javascript files in your webpage. (AdView320X50)

 

Here is an example:


<iframe id="tqframe" src="http:// adserver.tapcliq.com/adserver/rest/webUIRMA?appId=YOUR_APP_ID&origin=0&adType=R&test=1&tags=tags_separated_with_comma&unitId=YOUR_ADUNIT_ID" scrolling="no" width="320px" height="50px" align="bottom" frameborder="1">
</iframe>

Depending on the different kind of ad view that needs to be displayed, you would need to place the corresponding code snippet. The example above would work for a 320X50 ad view (AdView320X50). If you would like to place an ad view for a larger mobile device like a tablet, the adType would need to be changed along with the height fields as shown below in an example. This would display an 768X90 ad. This ad will span across the width of your mobile device.


<iframe id="tqframe" src="http:// adserver.tapcliq.com/adserver/rest/webUIRMA?appId=YOUR_APP_ID&origin=0&adType=L&test=1&tags=tags_separated_with_comma&unitId=YOUR_ADUNIT_ID" scrolling="no" width="768px" height="90px" align="bottom" frameborder="1">
</iframe>

Similarly if you would like to place a square ad (AdView320X240), you could use the following snippet. Also, note that the adType would need to be changed to S.

	
<iframe id="tqframe" src="http://adserver.tapcliq.com/adserver/rest/webUIRMA?appId=YOUR_APP_ID&origin=0&adType=S&test=1&tags=tags_separated_with_comma&unitId=YOUR_ADUNIT_ID" scrolling="no" width="320px" height="240px" align="bottom" frameborder="1">
</iframe>

NOTE:
unitId is a unique Id given to a specific ad view once you register it under adunits

Back to Top