{"__v":1,"_id":"580d05164495060f008add68","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":"57ab158c54fa780e006c538b","version":{"__v":20,"_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"],"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":"2016-10-23T18:44:38.069Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":true,"order":2,"body":"[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Method 1: Standard Web Integration\"\n}\n[/block]\nStandard web integration can be used for both desktop and mobile web traffic. The first step to achieve this is to place the script to execute the render js javascript file. Given below is the script:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<!-- Begin ADSNATIVE Code -->\\n<script type=\\\"text/javascript\\\" src=\\\"//static.adsnative.com/static/js/render.v1.js\\\"></script>\\n<!-- End ADSNATIVE Code -->\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nIt is recommended to place this script just before the closing of the body tag </body> so that it does not interfere with the rendering of the other elements on the page, however it can be customized according to your needs.\n\nTo display the creatives on the page, you’d need to add the anchor div at the location where you'd like the ad creatives to be shown. The anchor div tag is as given below:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<div class=\\\"an-container\\\" id=\\\"KqgUiJVW_pLdIsNXNj1o_ERykmeLs6doLEtXezY8\\\"></div>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nHere, the id represents the Placement Id/API key/Zone ID of the placement. To locate the Placement Id/API key/Zone ID of a specific placement you'd need to navigate to Integration tab on the placement page as shown below:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/66e0e71-Screen_Shot_2016-10-24_at_2.56.59_AM.png\",\n        \"Screen Shot 2016-10-24 at 2.56.59 AM.png\",\n        1968,\n        1098,\n        \"#f8fafa\"\n      ]\n    }\n  ]\n}\n[/block]\nThe placement should be whitelisted for the page where this script is being placed; failure to do so will prevent the ad from rendering. You can find both these scripts and the instructions when you click on \"wizard\" icon in the placement page in AdsNative UI.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/5d4dcbc-Screen_Shot_2016-10-24_at_1.45.12_AM.png\",\n        \"Screen Shot 2016-10-24 at 1.45.12 AM.png\",\n        1908,\n        626,\n        \"#757575\"\n      ]\n    }\n  ]\n}\n[/block]\nWhen the user navigates to the page where these scripts have been placed the following actions will take place:\n\n1. An ad request is sent to AdsNative to fetch the creative to be displayed. This request includes the user data, cookie data and the domain of the originating page.\n2. Adsnative picks up the Placement Id/API key/Zone ID and selects all the campaigns that are targeted to this placement.\n3. There is an ad selection process amongst all the targeted campaigns to the selected placement. This selection takes place based on factors such as the priority, targeting, frequency cap etc. For detailed information regarding the ad selection process refer to this [***AdsNative dev doc***](https://dev.adsnative.com/docs/ad-selection-and-optimization).\n4. The selected creative is sent back to the browser for rendering and is displayed at the exact location that the anchor div tag was placed.\n5. The rendering and the styling of the creative can be handled by adjusting the HTML template and Custom CSS parameters in the placement settings page. You do not need to make any changes to the page source to achieve this.\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Method 2: Standard Web Integration using CSS path.\"\n}\n[/block]\nCSS path can be used to define the place the ad is rendered from the Adsnative UI rather than hardcoding it on the page source. You can change the place where the ad loads by just changing the CSS path. You need not make any changes to the page source for this. The CSS path can be mentioned in the Placement settings path. Refer to this ***[AdsNative dev doc](http://dev.adsnative.com/v1.0/docs/css-path-guide)*** for CSS path guidelines.\n\nIt is recommended to specify the shortest CSS path. Which basically means - try to use the nearest element with an ID, and then work downwards. Element name search takes the longest, then element with class name, and element with div id is the fastest. Specifying the shortest CSS path will make sure there is minimum latency on the page.\n\nTo use render JS with CSS path on the page, you’d need to place the render JS script before the end of body. Here’s the tag again:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<!-- Begin ADSNATIVE Code -->\\n<script type=\\\"text/javascript\\\" src=\\\"//static.adsnative.com/static/js/render.v1.js\\\"></script>\\n<!-- End ADSNATIVE Code -->\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nIf the placement ID is not passed from the page, AdsNative selects all the eligible placements based on the domain information passed along with the ad request. Passing the placement ID is recommended as this results in less ad load time and better user experience. \n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Method 3: Standard web integration with Placement ID and CSS path\"\n}\n[/block]\nAnother option is to place the same code as above before the end of the body and add the autoPosition: true attribute when passing the API key. This will make use of the CSS path to render the ad at the position that you desire. The code to be placed before the end of body will be:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<!-- Begin ADSNATIVE Code -->\\n  <script type=\\\"text/javascript\\\">\\n    var _AdsNativeOpts = {\\n      apiKey: '<PLACEMENT_ID>',\\nautoPosition: 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\": \"html\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Method 4: Standard web integration with Placement ID without CSS path\"\n}\n[/block]\nTo reduce latency even further, you can pass the placement ID and invoke the Render JS at the same place. To do this, place the following code at the exact location where you want the ad to render:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<!-- Begin ADSNATIVE Code -->\\n  <script type=\\\"text/javascript\\\">\\n    var _AdsNativeOpts = {\\n      apiKey: '<PLACEMENT_ID>',\\n      autoPosition: false\\n    };\\n  </script>\\n  <script type=\\\"text/javascript\\\" src=\\\"//static.adsnative.com/static/js/render.v1.js\\\"></script>\\n<!-- End ADSNATIVE Code -->\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]","excerpt":"This page describes the different ways you can use render js script on your page.","slug":"render-js-usage","type":"basic","title":"Render JS Usage"}

Render JS Usage

This page describes the different ways you can use render js script on your page.

[block:api-header] { "type": "basic", "title": "Method 1: Standard Web Integration" } [/block] Standard web integration can be used for both desktop and mobile web traffic. The first step to achieve this is to place the script to execute the render js javascript file. Given below is the script: [block:code] { "codes": [ { "code": "<!-- Begin ADSNATIVE Code -->\n<script type=\"text/javascript\" src=\"//static.adsnative.com/static/js/render.v1.js\"></script>\n<!-- End ADSNATIVE Code -->", "language": "html" } ] } [/block] It is recommended to place this script just before the closing of the body tag </body> so that it does not interfere with the rendering of the other elements on the page, however it can be customized according to your needs. To display the creatives on the page, you’d need to add the anchor div at the location where you'd like the ad creatives to be shown. The anchor div tag is as given below: [block:code] { "codes": [ { "code": "<div class=\"an-container\" id=\"KqgUiJVW_pLdIsNXNj1o_ERykmeLs6doLEtXezY8\"></div>", "language": "html" } ] } [/block] Here, the id represents the Placement Id/API key/Zone ID of the placement. To locate the Placement Id/API key/Zone ID of a specific placement you'd need to navigate to Integration tab on the placement page as shown below: [block:image] { "images": [ { "image": [ "https://files.readme.io/66e0e71-Screen_Shot_2016-10-24_at_2.56.59_AM.png", "Screen Shot 2016-10-24 at 2.56.59 AM.png", 1968, 1098, "#f8fafa" ] } ] } [/block] The placement should be whitelisted for the page where this script is being placed; failure to do so will prevent the ad from rendering. You can find both these scripts and the instructions when you click on "wizard" icon in the placement page in AdsNative UI. [block:image] { "images": [ { "image": [ "https://files.readme.io/5d4dcbc-Screen_Shot_2016-10-24_at_1.45.12_AM.png", "Screen Shot 2016-10-24 at 1.45.12 AM.png", 1908, 626, "#757575" ] } ] } [/block] When the user navigates to the page where these scripts have been placed the following actions will take place: 1. An ad request is sent to AdsNative to fetch the creative to be displayed. This request includes the user data, cookie data and the domain of the originating page. 2. Adsnative picks up the Placement Id/API key/Zone ID and selects all the campaigns that are targeted to this placement. 3. There is an ad selection process amongst all the targeted campaigns to the selected placement. This selection takes place based on factors such as the priority, targeting, frequency cap etc. For detailed information regarding the ad selection process refer to this [***AdsNative dev doc***](https://dev.adsnative.com/docs/ad-selection-and-optimization). 4. The selected creative is sent back to the browser for rendering and is displayed at the exact location that the anchor div tag was placed. 5. The rendering and the styling of the creative can be handled by adjusting the HTML template and Custom CSS parameters in the placement settings page. You do not need to make any changes to the page source to achieve this. [block:api-header] { "type": "basic", "title": "Method 2: Standard Web Integration using CSS path." } [/block] CSS path can be used to define the place the ad is rendered from the Adsnative UI rather than hardcoding it on the page source. You can change the place where the ad loads by just changing the CSS path. You need not make any changes to the page source for this. The CSS path can be mentioned in the Placement settings path. Refer to this ***[AdsNative dev doc](http://dev.adsnative.com/v1.0/docs/css-path-guide)*** for CSS path guidelines. It is recommended to specify the shortest CSS path. Which basically means - try to use the nearest element with an ID, and then work downwards. Element name search takes the longest, then element with class name, and element with div id is the fastest. Specifying the shortest CSS path will make sure there is minimum latency on the page. To use render JS with CSS path on the page, you’d need to place the render JS script before the end of body. Here’s the tag again: [block:code] { "codes": [ { "code": "<!-- Begin ADSNATIVE Code -->\n<script type=\"text/javascript\" src=\"//static.adsnative.com/static/js/render.v1.js\"></script>\n<!-- End ADSNATIVE Code -->", "language": "html" } ] } [/block] If the placement ID is not passed from the page, AdsNative selects all the eligible placements based on the domain information passed along with the ad request. Passing the placement ID is recommended as this results in less ad load time and better user experience. [block:api-header] { "type": "basic", "title": "Method 3: Standard web integration with Placement ID and CSS path" } [/block] Another option is to place the same code as above before the end of the body and add the autoPosition: true attribute when passing the API key. This will make use of the CSS path to render the ad at the position that you desire. The code to be placed before the end of body will be: [block:code] { "codes": [ { "code": "<!-- Begin ADSNATIVE Code -->\n <script type=\"text/javascript\">\n var _AdsNativeOpts = {\n apiKey: '<PLACEMENT_ID>',\nautoPosition: true\n };\n </script>\n <script type=\"text/javascript\" src=\"//static.adsnative.com/static/js/render.v1.js\"></script>\n<!-- End ADSNATIVE Code -->", "language": "html" } ] } [/block] [block:api-header] { "type": "basic", "title": "Method 4: Standard web integration with Placement ID without CSS path" } [/block] To reduce latency even further, you can pass the placement ID and invoke the Render JS at the same place. To do this, place the following code at the exact location where you want the ad to render: [block:code] { "codes": [ { "code": "<!-- Begin ADSNATIVE Code -->\n <script type=\"text/javascript\">\n var _AdsNativeOpts = {\n apiKey: '<PLACEMENT_ID>',\n autoPosition: false\n };\n </script>\n <script type=\"text/javascript\" src=\"//static.adsnative.com/static/js/render.v1.js\"></script>\n<!-- End ADSNATIVE Code -->", "language": "html" } ] } [/block]