{"__v":25,"_id":"55e896ac4535442d00ccacf3","category":{"__v":14,"_id":"55e89569cdbb8a350096df9c","pages":["55e896ac4535442d00ccacf3","55e8b205f0f1850d00d24a59","55e8b243720fde1700659a0e","55e8b4258c0c601700f978e0","55e8b5537cdf7119002d2e3a","55e8b5737cdf7119002d2e3c","55e8b5863fef5017000dbd9f","55e8b59ef0f1850d00d24a63","563b50349e3f2225009fd296","5640d891d4b2e00d00bb3d48","564cfd4e2248461700bd4021","5660e89689e82f0d008f6832","5668d3428ff3da0d0079092f","56abb944f25f160d00e17f40"],"project":"5429beef1163360800ed31fa","version":"5429beef1163360800ed31fd","sync":{"url":"","isSync":false},"reference":true,"createdAt":"2015-09-03T18:46:01.692Z","from_sync":false,"order":1,"slug":"sdk-integrations","title":"Integrating for Web"},"parentDoc":null,"project":"5429beef1163360800ed31fa","user":"55e74aae73169617001f2e78","version":{"__v":21,"_id":"5429beef1163360800ed31fd","project":"5429beef1163360800ed31fa","createdAt":"2014-09-29T20:19:59.904Z","releaseDate":"2014-09-29T20:19:59.904Z","categories":["5429beef1163360800ed31fe","55e74e1f5d36b32b002563fa","55e7500a73169617001f2e86","55e76b8196131b2f00bf4b72","55e89569cdbb8a350096df9c","55f8935eb089b71700a8364e","55f8a67d3bb4bb0d0022d093","55f9dbefc7ef770d00d9bf6d","5601c21a22ecf60d002b27b3","5601c21ff12aee0d001bb06e","5601c2256c7b610d00280db5","5601c22c22ecf60d002b27b4","5603738d0c78b00d0039af47","5626f70bfcbbc621004ebf52","566f7a1ae144ab0d00e9732f","566f85ca7820960d00c3b93d","56708ce43a32d20d00c45cbf","56708d436995210d003aad8e","5736471abe10a9200030732c","57a82c7aff9bd30e00a6f1c1","591b8500e3992319007190f4"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-09-03T18:51:24.438Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":true,"order":3,"body":"In some advanced cases, you may not want AdsNative RenderJS to handle automatic ad rendering (such as infinite scrolling, or if you want to show the native ad on certain user actions, etc.). In this case, you may want to circumvent the RenderJS default behavior.\n\nInsert the following tag in the HEAD section of your webpage. By doing this, RenderJS will not fetch or render any native ads until explicitly called by given functions. Please also note that you need to include the below code before using any of the given function calls.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<!-- Begin ADSNATIVE Code -->\\n  <script type=\\\"text/javascript\\\">\\n    var _AdsNativeOpts = {\\n      blockAdLoad: true\\n    };\\n  </script>\\n  <script type=\\\"text/javascript\\\" src=\\\"//static.adsnative.com/static/js/render.v1.js\\\"></script>\\n<!-- End ADSNATIVE Code -->\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n**Prefetch Native Ad\n**\nYou can choose to prefetch the native ad from the AdsNative server for a given ad unit before the document is ready, as well as before you are ready to render the ad. This way there will not be any latency for network requests, and the ad will be for ready for rendering when it needs to be.\n\nAll the calls to the API are handled through ‘AdsNative’ object. So, first create an object instance of the ‘AdsNative’ class,\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var infeed_placement = new AdsNative('PLACEMENT-KEY', ['KEYWORD-1', 'KEYWORD-2']);\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n\n\nYou can optionally pass an array of keywords when you initialize the instance if you wish to do keyword targeting. In the next step you can pre-fetch the ads from AdsNative from the created instance. The ‘status’ variable will be ‘true’, if a valid campaign is returned.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"infeed_placement.fetchAd(function(status){\\n                    if(status) { // If returned a valid campaign to display.\\n    }\\n    \\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n**Display Native Ad\n**\nOnce the ad is prefetched you can choose to display that native ad at the desired event. For example in the case of infinite scroll, you may want to display it when the user scrolls down. Or you may want to show it when the second page shows up, etc. You can use the ‘displayAd’ function to show an ad for a placement. It returns the status as whether it displayed the ad or not.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var didDisplay = infeed_placement.displayAd('native-ad-element-id');\\nif(!didDisplay)\\n\\tconsole.log('Ad could not be displayed. Most likely due to invalid element ID or double rendering of ad.');\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nYou need to specify the element ID where ad is to be displated. This ‘native-ad-element-id’ element should be an empty div because when the displayAd in called, this element will be replaced by the native ad.\n\n**Complete Example\n**\nThe following is a complete example, which uses all of the above functions. It is a simple example, where ads get displayed immediately once the page is ready.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<html>\\n\\t<head>\\n\\t\\t<script src=\\\"//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\\\"></script>\\n\\t</head>\\n<body>\\n\\t<div id=\\\"an-infeed\\\"></div>\\n\\n\\t<!-- Begin ADSNATIVE Code -->\\n\\t<script type=\\\"text/javascript\\\">\\n\\tvar _AdsNativeOpts = {\\n\\t    blockAdLoad: true\\n\\t};\\n\\t</script>\\n\\t<script type=\\\"text/javascript\\\" src=\\\"//static.adsnative.com/static/js/render.v1.js\\\"></script>\\n\\t<!-- End ADSNATIVE Code -->\\n\\n\\t<script type=\\\"text/javascript\\\">\\n\\tvar infeed_placement = new AdsNative('PLACEMENT-KEY', ['sports', 'nba']);\\n\\tinfeed_placement.fetchAd(function(status){\\n\\t\\tif(status){ // If returned a valid campaign to display.\\n\\t\\t\\t$(document).ready(function(){\\n\\t\\t        \\tvar didDisplay = infeed_placement.displayAd('an-infeed');\\n\\t\\t\\t\\tif(!didDisplay)\\n\\t\\t\\t\\t\\tconsole.log('Ad could not be displayed. Most likely due to invalid element ID or double rendering of ad.');\\n\\t\\t        });\\n\\t\\t}\\n\\t});\\n\\t</script>\\n\\n</body>\\n</html>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"javascript-api-docs","type":"basic","title":"JavaScript API Guide"}

JavaScript API Guide


In some advanced cases, you may not want AdsNative RenderJS to handle automatic ad rendering (such as infinite scrolling, or if you want to show the native ad on certain user actions, etc.). In this case, you may want to circumvent the RenderJS default behavior. Insert the following tag in the HEAD section of your webpage. By doing this, RenderJS will not fetch or render any native ads until explicitly called by given functions. Please also note that you need to include the below code before using any of the given function calls. [block:code] { "codes": [ { "code": "<!-- Begin ADSNATIVE Code -->\n <script type=\"text/javascript\">\n var _AdsNativeOpts = {\n blockAdLoad: true\n };\n </script>\n <script type=\"text/javascript\" src=\"//static.adsnative.com/static/js/render.v1.js\"></script>\n<!-- End ADSNATIVE Code -->", "language": "javascript" } ] } [/block] **Prefetch Native Ad ** You can choose to prefetch the native ad from the AdsNative server for a given ad unit before the document is ready, as well as before you are ready to render the ad. This way there will not be any latency for network requests, and the ad will be for ready for rendering when it needs to be. All the calls to the API are handled through ‘AdsNative’ object. So, first create an object instance of the ‘AdsNative’ class, [block:code] { "codes": [ { "code": "var infeed_placement = new AdsNative('PLACEMENT-KEY', ['KEYWORD-1', 'KEYWORD-2']);", "language": "javascript" } ] } [/block] You can optionally pass an array of keywords when you initialize the instance if you wish to do keyword targeting. In the next step you can pre-fetch the ads from AdsNative from the created instance. The ‘status’ variable will be ‘true’, if a valid campaign is returned. [block:code] { "codes": [ { "code": "infeed_placement.fetchAd(function(status){\n if(status) { // If returned a valid campaign to display.\n }\n \n});", "language": "javascript" } ] } [/block] **Display Native Ad ** Once the ad is prefetched you can choose to display that native ad at the desired event. For example in the case of infinite scroll, you may want to display it when the user scrolls down. Or you may want to show it when the second page shows up, etc. You can use the ‘displayAd’ function to show an ad for a placement. It returns the status as whether it displayed the ad or not. [block:code] { "codes": [ { "code": "var didDisplay = infeed_placement.displayAd('native-ad-element-id');\nif(!didDisplay)\n\tconsole.log('Ad could not be displayed. Most likely due to invalid element ID or double rendering of ad.');", "language": "javascript" } ] } [/block] You need to specify the element ID where ad is to be displated. This ‘native-ad-element-id’ element should be an empty div because when the displayAd in called, this element will be replaced by the native ad. **Complete Example ** The following is a complete example, which uses all of the above functions. It is a simple example, where ads get displayed immediately once the page is ready. [block:code] { "codes": [ { "code": "<html>\n\t<head>\n\t\t<script src=\"//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\"></script>\n\t</head>\n<body>\n\t<div id=\"an-infeed\"></div>\n\n\t<!-- Begin ADSNATIVE Code -->\n\t<script type=\"text/javascript\">\n\tvar _AdsNativeOpts = {\n\t blockAdLoad: true\n\t};\n\t</script>\n\t<script type=\"text/javascript\" src=\"//static.adsnative.com/static/js/render.v1.js\"></script>\n\t<!-- End ADSNATIVE Code -->\n\n\t<script type=\"text/javascript\">\n\tvar infeed_placement = new AdsNative('PLACEMENT-KEY', ['sports', 'nba']);\n\tinfeed_placement.fetchAd(function(status){\n\t\tif(status){ // If returned a valid campaign to display.\n\t\t\t$(document).ready(function(){\n\t\t \tvar didDisplay = infeed_placement.displayAd('an-infeed');\n\t\t\t\tif(!didDisplay)\n\t\t\t\t\tconsole.log('Ad could not be displayed. Most likely due to invalid element ID or double rendering of ad.');\n\t\t });\n\t\t}\n\t});\n\t</script>\n\n</body>\n</html>", "language": "html" } ] } [/block]