{"_id":"589e3a8e9303db2d00026158","__v":0,"version":{"_id":"5429beef1163360800ed31fd","__v":21,"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"},"parentDoc":null,"project":"5429beef1163360800ed31fa","category":{"_id":"55e89569cdbb8a350096df9c","__v":14,"project":"5429beef1163360800ed31fa","pages":["55e896ac4535442d00ccacf3","55e8b205f0f1850d00d24a59","55e8b243720fde1700659a0e","55e8b4258c0c601700f978e0","55e8b5537cdf7119002d2e3a","55e8b5737cdf7119002d2e3c","55e8b5863fef5017000dbd9f","55e8b59ef0f1850d00d24a63","563b50349e3f2225009fd296","5640d891d4b2e00d00bb3d48","564cfd4e2248461700bd4021","5660e89689e82f0d008f6832","5668d3428ff3da0d0079092f","56abb944f25f160d00e17f40"],"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"},"user":"5625457f23053b2300f596c9","updates":[],"next":{"pages":[],"description":""},"createdAt":"2017-02-10T22:11:26.916Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":true,"order":15,"body":"There are various upgrades we did on RenderJS v2 to better support different use cases and also to make it a lot easier, cleaner and faster for publishers to implement our tags on the webpages. v2 also renders ads much faster than v1.\n\n v1 still offers advantages especially for publisher networks where they can control the positioning of different placements from admin backend, instead of having to ask publishers to change the code on the page. For all other use cases v2 is a far better option. Going forward to allow us to better support v2, we have chosen to make it backward incompatible. v2 also includes the support for Header Bidding.\n[block:api-header]\n{\n  \"title\": \"Initialization\"\n}\n[/block]\nTo start the integration you have to include renderJS script in the header of the page. It should be marked as `async` to allow the JavaScript to load asynchronously and not block your page load.\n\nYou also need to initialize `adsnativetag` and `adsnativetag.cmdQ` to be able to configure various options and execute placement rendering. RenderJS follows command queue design where you have to push commands into the `cmdQ` to execute it.\n\nYou can use `adsnativetag.updateConfig` to update global page level configurations. For example, setting key-value pairs.\n\nFollowing is an example initial configuration,\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<!DOCTYPE html>\\n<html>\\n  <head>\\n    <script> \\n        var adsnativetag = adsnativetag || {};\\n        adsnativetag.cmdQ = adsnativetag.cmdQ || [];\\n      \\tadsnativetag.cmdQ.push(function(){\\n          adsnativetag.updateConfig({\\n            keyValues: {\\n              pageTags: ['sports']\\n            }\\n          });\\n        });\\n    </script>\\n  </head>\\n  <script async='async' type='text/javascript' src='//static.adsnative.com/static/js/render.v2.js'></script>\\n  <body>\\n  </body>\\n</html>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nFollowing options you can set it up globally for the page through `updateConfig` function,\n\n```\n{\n    keyValues: {}, // dict of key value pairs\n    keywords: [\"\"], // array of keywords\n    headerbidTimeout: 700 // timeout in miliseconds\n}\n```\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Initialize Ad Units / Placements\"\n}\n[/block]\nRight after including the tags in header, publishers can configure the ad units and also initiate the ad requests asynchronously so when they can be ready to be rendered when available. `adsnativetag.defineAdUnit` can be used to configure the ad units with their options and upon `adsnativetag.requestAds` ads are requested from AdsNative ad-servers. You can configure multiple placements. Its important to retain each ad unit into an object so can be used later on for display, refresh or any other actions.\n\nFollowing is an example considering ad unit configuration one with \n\n**Approach 1 :** using `apiKey` (Placement ID) only. Can be fetched from AdsNative dashboard as shown here : https://dev.adsnative.com/docs/publisher-faqs#4-how-to-get-placement-id-\n**Approach 2 :** `networkKey` and `widgetId` combination (Used by publisher networks, to dynamically create a placement with an existing template)\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<!DOCTYPE html>\\n<html>\\n  <head>\\n    <script> \\n        var adsnativetag = adsnativetag || {};\\n        adsnativetag.cmdQ = adsnativetag.cmdQ || [];\\n      \\tadsnativetag.cmdQ.push(function(){\\n          adsnativetag.updateConfig({\\n            keyValues: {\\n              pageTags: ['sports']\\n            }\\n          });\\n        });\\n    </script>\\n  \\t<script async='async' type='text/javascript' src='//static.adsnative.com/static/js/render.v2.js'></script>\\n    <script>\\n      adsnativetag.cmdQ.push(function(){\\n        // Approach 1\\n\\t\\t\\t\\twindow.demoAdUnit1 = adsnativetag.defineAdUnit({\\n\\t\\t    \\tapiKey: '[REPLACE_WITH_YOUR_API_KEY]'\\n\\t\\t    });\\n\\n        // Approach 2\\n\\t\\t    window.demoAdUnit2 = adsnativetag.defineAdUnit({\\n\\t\\t    \\t\\tnetworkKey: '[REPLACE_WITH_YOUR_NETWORK_KEY]',\\n\\t          widgetId: '[REPLACE_WITH_YOUR_WIDGET_ID]',\\n          \\tcategories: ['IAB1', 'IAB2']\\n\\t\\t    });\\n    \\t\\t\\n    \\t\\tadsnativetag.requestAds();\\n    \\t});\\n    </script>\\n  </head>\\n  <body>\\n  </body>\\n</html>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nFollowing options you can set it up at placement level through `defineAdUnit` function,\n\n```\n{\n    apiKey: \"\", // Placement API Key provided by Polymorph\n    networkKey: \"\", // Account Network Key provided by Polymorph\n    widgetId: \"\", // A Unique key generated by the publisher for the placement\n    categories: \"\", // IAB based category code\n    numAds: 1, // Number of ads to be shown together. Default 1\n    keywords: [\"\"], // Array of keywords\n    keyValues: {}, // Dict of key-value pairs\n    templateKey: \"\", // Template key to be forced for the placement\n}\n```\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Display Ad Units\"\n}\n[/block]\nOnce all the configurations are in place, you can call `adsnativetag.displayAdUnit` with the ID of the element to display the ad. Following shows the complete example code,\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<!DOCTYPE html>\\n<html>\\n  <head>\\n    <script> \\n        var adsnativetag = adsnativetag || {};\\n        adsnativetag.cmdQ = adsnativetag.cmdQ || [];\\n      \\tadsnativetag.cmdQ.push(function(){\\n          adsnativetag.updateConfig({\\n            keyValues: {\\n              pageTags: ['sports']\\n            }\\n          });\\n        });\\n    </script>\\n  \\t<script async='async' type='text/javascript' src='//static.adsnative.com/static/js/render.v2.js'></script>\\n    <script>\\n      adsnativetag.cmdQ.push(function(){\\n\\t\\t\\t\\twindow.demoAdUnit1 = adsnativetag.defineAdUnit({\\n\\t\\t    \\tapiKey: '[REPLACE_WITH_YOUR_API_KEY]'\\n\\t\\t    });\\n\\n\\t\\t    window.demoAdUnit2 = adsnativetag.defineAdUnit({\\n\\t\\t    \\t\\tnetworkKey: '[REPLACE_WITH_YOUR_NETWORK_KEY]',\\n\\t          widgetId: '[REPLACE_WITH_YOUR_WIDGET_ID]',\\n          \\tcategories: ['IAB1', 'IAB2']\\n\\t\\t    });\\n    \\t\\t\\n    \\t\\tadsnativetag.requestAds();\\n    \\t});\\n    </script>\\n  </head>\\n  <body>\\n    \\n    <!-- ANY CONTENT -->\\n    \\n    <h2>AdsNative Demo Ad 1</h2>\\n    <div id='div-an-ad-1'>\\n        <script type='text/javascript'>\\n            adsnativetag.cmdQ.push(function() { var display_status = adsnativetag.displayAdUnit(demoAdUnit1, 'div-an-ad-1'); });\\n        </script>\\n    </div>\\n\\t\\t\\n    <!-- ANY CONTENT -->\\n    \\n    <h2>AdsNative Demo Ad 2</h2>\\n    <div id='div-an-ad-2'>\\n        <script type='text/javascript'>\\n            adsnativetag.cmdQ.push(function() { var display_status = adsnativetag.displayAdUnit(demoAdUnit2, 'div-an-ad-2'); });\\n        </script>\\n    </div>\\n    \\n    <!-- ANY CONTENT -->\\n    \\n  </body>\\n</html>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"renderjs-v2-api","type":"basic","title":"RenderJS v2 API"}
There are various upgrades we did on RenderJS v2 to better support different use cases and also to make it a lot easier, cleaner and faster for publishers to implement our tags on the webpages. v2 also renders ads much faster than v1. v1 still offers advantages especially for publisher networks where they can control the positioning of different placements from admin backend, instead of having to ask publishers to change the code on the page. For all other use cases v2 is a far better option. Going forward to allow us to better support v2, we have chosen to make it backward incompatible. v2 also includes the support for Header Bidding. [block:api-header] { "title": "Initialization" } [/block] To start the integration you have to include renderJS script in the header of the page. It should be marked as `async` to allow the JavaScript to load asynchronously and not block your page load. You also need to initialize `adsnativetag` and `adsnativetag.cmdQ` to be able to configure various options and execute placement rendering. RenderJS follows command queue design where you have to push commands into the `cmdQ` to execute it. You can use `adsnativetag.updateConfig` to update global page level configurations. For example, setting key-value pairs. Following is an example initial configuration, [block:code] { "codes": [ { "code": "<!DOCTYPE html>\n<html>\n <head>\n <script> \n var adsnativetag = adsnativetag || {};\n adsnativetag.cmdQ = adsnativetag.cmdQ || [];\n \tadsnativetag.cmdQ.push(function(){\n adsnativetag.updateConfig({\n keyValues: {\n pageTags: ['sports']\n }\n });\n });\n </script>\n </head>\n <script async='async' type='text/javascript' src='//static.adsnative.com/static/js/render.v2.js'></script>\n <body>\n </body>\n</html>", "language": "html" } ] } [/block] Following options you can set it up globally for the page through `updateConfig` function, ``` { keyValues: {}, // dict of key value pairs keywords: [""], // array of keywords headerbidTimeout: 700 // timeout in miliseconds } ``` [block:api-header] { "type": "basic", "title": "Initialize Ad Units / Placements" } [/block] Right after including the tags in header, publishers can configure the ad units and also initiate the ad requests asynchronously so when they can be ready to be rendered when available. `adsnativetag.defineAdUnit` can be used to configure the ad units with their options and upon `adsnativetag.requestAds` ads are requested from AdsNative ad-servers. You can configure multiple placements. Its important to retain each ad unit into an object so can be used later on for display, refresh or any other actions. Following is an example considering ad unit configuration one with **Approach 1 :** using `apiKey` (Placement ID) only. Can be fetched from AdsNative dashboard as shown here : https://dev.adsnative.com/docs/publisher-faqs#4-how-to-get-placement-id- **Approach 2 :** `networkKey` and `widgetId` combination (Used by publisher networks, to dynamically create a placement with an existing template) [block:code] { "codes": [ { "code": "<!DOCTYPE html>\n<html>\n <head>\n <script> \n var adsnativetag = adsnativetag || {};\n adsnativetag.cmdQ = adsnativetag.cmdQ || [];\n \tadsnativetag.cmdQ.push(function(){\n adsnativetag.updateConfig({\n keyValues: {\n pageTags: ['sports']\n }\n });\n });\n </script>\n \t<script async='async' type='text/javascript' src='//static.adsnative.com/static/js/render.v2.js'></script>\n <script>\n adsnativetag.cmdQ.push(function(){\n // Approach 1\n\t\t\t\twindow.demoAdUnit1 = adsnativetag.defineAdUnit({\n\t\t \tapiKey: '[REPLACE_WITH_YOUR_API_KEY]'\n\t\t });\n\n // Approach 2\n\t\t window.demoAdUnit2 = adsnativetag.defineAdUnit({\n\t\t \t\tnetworkKey: '[REPLACE_WITH_YOUR_NETWORK_KEY]',\n\t widgetId: '[REPLACE_WITH_YOUR_WIDGET_ID]',\n \tcategories: ['IAB1', 'IAB2']\n\t\t });\n \t\t\n \t\tadsnativetag.requestAds();\n \t});\n </script>\n </head>\n <body>\n </body>\n</html>", "language": "html" } ] } [/block] Following options you can set it up at placement level through `defineAdUnit` function, ``` { apiKey: "", // Placement API Key provided by Polymorph networkKey: "", // Account Network Key provided by Polymorph widgetId: "", // A Unique key generated by the publisher for the placement categories: "", // IAB based category code numAds: 1, // Number of ads to be shown together. Default 1 keywords: [""], // Array of keywords keyValues: {}, // Dict of key-value pairs templateKey: "", // Template key to be forced for the placement } ``` [block:api-header] { "type": "basic", "title": "Display Ad Units" } [/block] Once all the configurations are in place, you can call `adsnativetag.displayAdUnit` with the ID of the element to display the ad. Following shows the complete example code, [block:code] { "codes": [ { "code": "<!DOCTYPE html>\n<html>\n <head>\n <script> \n var adsnativetag = adsnativetag || {};\n adsnativetag.cmdQ = adsnativetag.cmdQ || [];\n \tadsnativetag.cmdQ.push(function(){\n adsnativetag.updateConfig({\n keyValues: {\n pageTags: ['sports']\n }\n });\n });\n </script>\n \t<script async='async' type='text/javascript' src='//static.adsnative.com/static/js/render.v2.js'></script>\n <script>\n adsnativetag.cmdQ.push(function(){\n\t\t\t\twindow.demoAdUnit1 = adsnativetag.defineAdUnit({\n\t\t \tapiKey: '[REPLACE_WITH_YOUR_API_KEY]'\n\t\t });\n\n\t\t window.demoAdUnit2 = adsnativetag.defineAdUnit({\n\t\t \t\tnetworkKey: '[REPLACE_WITH_YOUR_NETWORK_KEY]',\n\t widgetId: '[REPLACE_WITH_YOUR_WIDGET_ID]',\n \tcategories: ['IAB1', 'IAB2']\n\t\t });\n \t\t\n \t\tadsnativetag.requestAds();\n \t});\n </script>\n </head>\n <body>\n \n <!-- ANY CONTENT -->\n \n <h2>AdsNative Demo Ad 1</h2>\n <div id='div-an-ad-1'>\n <script type='text/javascript'>\n adsnativetag.cmdQ.push(function() { var display_status = adsnativetag.displayAdUnit(demoAdUnit1, 'div-an-ad-1'); });\n </script>\n </div>\n\t\t\n <!-- ANY CONTENT -->\n \n <h2>AdsNative Demo Ad 2</h2>\n <div id='div-an-ad-2'>\n <script type='text/javascript'>\n adsnativetag.cmdQ.push(function() { var display_status = adsnativetag.displayAdUnit(demoAdUnit2, 'div-an-ad-2'); });\n </script>\n </div>\n \n <!-- ANY CONTENT -->\n \n </body>\n</html>", "language": "html" } ] } [/block]