{"_id":"59a3dc081017b800231049b8","project":"574ff4bd3fa1870e00889ba6","version":{"_id":"574ff4bd3fa1870e00889ba9","project":"574ff4bd3fa1870e00889ba6","__v":24,"createdAt":"2016-06-02T08:56:29.492Z","releaseDate":"2016-06-02T08:56:29.492Z","categories":["574ff4bd3fa1870e00889baa","577278ecdceb570e003a9001","577279865617b117009e643f","577279985617b117009e6440","577279bc8c48e00e00503504","5774fe18605b770e0037be8a","577ce3ad87acf617003c4187","577f8476a77c700e006a6c52","57b486ae0d2b640e00e9d3f5","57b722133d3e620e004ec74b","57bd95f00fe3a00e003e2cc5","57c8349359cd4b0e00b888ef","57c8349b5754fa1700b12242","57cedb0bad483e0e00890239","57cedbe807d7ea0e00e438cc","57d82967156ef72b007ffcd8","58ee353ad1ee2f0f0034a13d","596623221738df00298622a5","59a51730192dba000fc9ca38","59a8129f1e7b26000fa0fb1a","5a0322bf044b6f001c236e36","5a79897c5b6e430030746df6","5a79898c2b2d5f0012cbab63","5ab3b5e3d2d1e2006252a8f2"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"3.0.0","version":"3.0"},"category":{"_id":"57b722133d3e620e004ec74b","__v":0,"version":"574ff4bd3fa1870e00889ba9","project":"574ff4bd3fa1870e00889ba6","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-08-19T15:13:23.417Z","from_sync":false,"order":9,"slug":"ios-native-ads-mediation-layer","title":"iOS SDK"},"user":"5770fa1ce5a0000e0023c680","__v":0,"parentDoc":null,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2017-08-28T09:02:00.133Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":2,"body":"Small Layout Ad is mediation of standard units that can be configured from the PubNative dashboard. Small Layout Ad view contains a predefined set of icon, banner, title, description, CTA and disclosure view. You can choose an ad type from PubNative dashboard like banner only, description-banner-icon or, title-icon-description etc. \n\nPredefined fixed size for Small layout Ad view is **`320 x 80`**.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/72167ad-small_layout.png\",\n        \"small layout.png\",\n        153,\n        327,\n        \"#dfdfe2\"\n      ],\n      \"caption\": \"Small Layout Example\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"Getting Started\"\n}\n[/block]\n* Before integrating Small Layout Ads in your app, you’ll need to go through the steps in our Getting started guide, create an account on PubNative and integrate the SDK into your project.\n* Add a Small Layout Ad unit to your app in the PubNative dashboard.\n* Make sure you have added the ad network SDKs you wish to use in your app.\n\nFor Small Layout Ads, first, you need to create a layout, then integrate lifecycle callbacks and load the ad. After these steps, you can start using it.\n[block:api-header]\n{\n  \"title\": \"Integration Steps\"\n}\n[/block]\n* [Create Small Layout](http://developers.pubnative.net/v3.0/docs/small-ad-layouts#create-small-layout)\n* [Integrate Lifecycle Callbacks for Small Layout](http://developers.pubnative.net/v3.0/docs/small-ad-layouts#integrate-lifecycle-callbacks-for-small-layout)\n* [Load Small Layout Ad](http://developers.pubnative.net/v3.0/docs/small-ad-layouts#load-small-layout-ad)\n* [Use Small Layout Ad](http://developers.pubnative.net/v3.0/docs/small-ad-layouts#use-small-layout-ad)\n[block:api-header]\n{\n  \"title\": \"Create Small Layout\"\n}\n[/block]\nYou can create predefined Small Layout ad request using **PNSmallLayout**.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"let smallLayout = PNSmallLayout()\",\n      \"language\": \"swift\"\n    }\n  ]\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"PNSmallLayout *smallLayout = [[PNSmallLayout alloc] init];\",\n      \"language\": \"objectivec\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"Integrate Lifecycle Callbacks for Small Layout\"\n}\n[/block]\nYou can track the load process with callbacks using **PNLayoutLoadDelegate**.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"class YourClass: PNLayoutLoadDelegate \\n{\\n//...\\nfunc layoutDidFinishLoading(_ layout: PNLayout!)\\n{\\n    // Layout loaded\\n}\\n\\nfunc layout(_ layout: PNLayout!, didFailLoading error: Error!)\\n{\\n    // Layout load failed\\n}\\n//...\\n}\",\n      \"language\": \"swift\"\n    }\n  ]\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \":::at:::interface YourClass () <PNLayoutLoadDelegate>\\n//...\\n- (void)layoutDidFinishLoading:(PNLayout *)layout\\n{\\n    // Layout loaded\\n}\\n\\n- (void)layout:(PNLayout *)layout didFailLoading:(NSError *)error\\n{\\n    // Layout load failed\\n}\\n//...\",\n      \"language\": \"objectivec\"\n    }\n  ]\n}\n[/block]\nYou can track the tracking process, user interaction and ad behavior with callbacks using **PNLayoutTrackDelegate**. **_But you should set delegate only when Layout has been already loaded._**\nYou need to set the delegate as;\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"class YourClass: PNLayoutTrackDelegate \\n{\\n//...\\nsmallLayout.trackDelegate = self\\n//...\\nfunc layoutTrackClick(_ layout: PNLayout!) \\n{\\n    // Layout click tracked\\n}\\n    \\nfunc layoutTrackImpression(_ layout: PNLayout!) \\n{\\n    // Layout impression tracked\\n}\\n//...\\n}\",\n      \"language\": \"swift\"\n    }\n  ]\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"@interface YourClass () <PNLayoutTrackDelegate>\\n//...\\nsmallLayout.trackDelegate = self;\\n//...\\n- (void)layoutTrackImpression:(PNLayout *)layout\\n{\\n    // Layout impression tracked\\n}\\n\\n- (void)layoutTrackClick:(PNLayout *)layout\\n{\\n    // Layout click tracked\\n}\\n//...\",\n      \"language\": \"objectivec\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"Load Small Layout Ad\"\n}\n[/block]\nTo load Small Layout Ad;\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"smallLayout.load(withAppToken: \\\"<YOUR_APP_TOKEN>\\\", placement: \\\"<YOUR_PLACEMENT>\\\", delegate: self)\",\n      \"language\": \"swift\"\n    }\n  ]\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"[smallLayout loadWithAppToken:@\\\"<YOUR_APP_TOKEN>\\\" placement:@\\\"<YOUR_PLACEMENT>\\\" delegate:self];\",\n      \"language\": \"objectivec\"\n    }\n  ]\n}\n[/block]\nIn order to get callbacks from **PNLayout**, you should implement **PNLayoutLoadDelegate** for your class. Once an ad is loaded, you will get a fully created view that can be placed in any view.\n[block:api-header]\n{\n  \"title\": \"Use Small Layout Ad\"\n}\n[/block]\nOnce the load callback is over, this layout returns, as a result, an initialized view that can be used inside your own ad container. Impressions and clicks are tracked directly from the SDK, but you need to call `startTrackingView()` method so the layout starts listening for clicks and checking the ad on the screen. You can extract the view from `smallLayout.viewController.view`.\n\nAny interaction with this method without a previously loaded layout will do nothing.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"let layoutView = smallLayout.viewController.view\\n// Inject the view into your view container\\nsmallLayout.startTrackingView()\",\n      \"language\": \"swift\"\n    }\n  ]\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"UIView *layoutView = smallLayout.viewController.view;\\n// Inject the view into your view container\\n[smallLayout startTrackingView];\",\n      \"language\": \"objectivec\"\n    }\n  ]\n}\n[/block]\nIt is highly recommended that if you have a scrolling view and you want to stop tracking the ad view (which is recommended when the ad disappears from the screen), you can use the `stopTrackingView()` method.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"smallLayout.stopTrackingView()\",\n      \"language\": \"swift\"\n    }\n  ]\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"[smallLayout stopTrackingView];\",\n      \"language\": \"objectivec\"\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"small-ad-layouts","type":"basic","title":"Small Layout Ads"}
Small Layout Ad is mediation of standard units that can be configured from the PubNative dashboard. Small Layout Ad view contains a predefined set of icon, banner, title, description, CTA and disclosure view. You can choose an ad type from PubNative dashboard like banner only, description-banner-icon or, title-icon-description etc. Predefined fixed size for Small layout Ad view is **`320 x 80`**. [block:image] { "images": [ { "image": [ "https://files.readme.io/72167ad-small_layout.png", "small layout.png", 153, 327, "#dfdfe2" ], "caption": "Small Layout Example" } ] } [/block] [block:api-header] { "title": "Getting Started" } [/block] * Before integrating Small Layout Ads in your app, you’ll need to go through the steps in our Getting started guide, create an account on PubNative and integrate the SDK into your project. * Add a Small Layout Ad unit to your app in the PubNative dashboard. * Make sure you have added the ad network SDKs you wish to use in your app. For Small Layout Ads, first, you need to create a layout, then integrate lifecycle callbacks and load the ad. After these steps, you can start using it. [block:api-header] { "title": "Integration Steps" } [/block] * [Create Small Layout](http://developers.pubnative.net/v3.0/docs/small-ad-layouts#create-small-layout) * [Integrate Lifecycle Callbacks for Small Layout](http://developers.pubnative.net/v3.0/docs/small-ad-layouts#integrate-lifecycle-callbacks-for-small-layout) * [Load Small Layout Ad](http://developers.pubnative.net/v3.0/docs/small-ad-layouts#load-small-layout-ad) * [Use Small Layout Ad](http://developers.pubnative.net/v3.0/docs/small-ad-layouts#use-small-layout-ad) [block:api-header] { "title": "Create Small Layout" } [/block] You can create predefined Small Layout ad request using **PNSmallLayout**. [block:code] { "codes": [ { "code": "let smallLayout = PNSmallLayout()", "language": "swift" } ] } [/block] [block:code] { "codes": [ { "code": "PNSmallLayout *smallLayout = [[PNSmallLayout alloc] init];", "language": "objectivec" } ] } [/block] [block:api-header] { "title": "Integrate Lifecycle Callbacks for Small Layout" } [/block] You can track the load process with callbacks using **PNLayoutLoadDelegate**. [block:code] { "codes": [ { "code": "class YourClass: PNLayoutLoadDelegate \n{\n//...\nfunc layoutDidFinishLoading(_ layout: PNLayout!)\n{\n // Layout loaded\n}\n\nfunc layout(_ layout: PNLayout!, didFailLoading error: Error!)\n{\n // Layout load failed\n}\n//...\n}", "language": "swift" } ] } [/block] [block:code] { "codes": [ { "code": "@interface YourClass () <PNLayoutLoadDelegate>\n//...\n- (void)layoutDidFinishLoading:(PNLayout *)layout\n{\n // Layout loaded\n}\n\n- (void)layout:(PNLayout *)layout didFailLoading:(NSError *)error\n{\n // Layout load failed\n}\n//...", "language": "objectivec" } ] } [/block] You can track the tracking process, user interaction and ad behavior with callbacks using **PNLayoutTrackDelegate**. **_But you should set delegate only when Layout has been already loaded._** You need to set the delegate as; [block:code] { "codes": [ { "code": "class YourClass: PNLayoutTrackDelegate \n{\n//...\nsmallLayout.trackDelegate = self\n//...\nfunc layoutTrackClick(_ layout: PNLayout!) \n{\n // Layout click tracked\n}\n \nfunc layoutTrackImpression(_ layout: PNLayout!) \n{\n // Layout impression tracked\n}\n//...\n}", "language": "swift" } ] } [/block] [block:code] { "codes": [ { "code": "@interface YourClass () <PNLayoutTrackDelegate>\n//...\nsmallLayout.trackDelegate = self;\n//...\n- (void)layoutTrackImpression:(PNLayout *)layout\n{\n // Layout impression tracked\n}\n\n- (void)layoutTrackClick:(PNLayout *)layout\n{\n // Layout click tracked\n}\n//...", "language": "objectivec" } ] } [/block] [block:api-header] { "title": "Load Small Layout Ad" } [/block] To load Small Layout Ad; [block:code] { "codes": [ { "code": "smallLayout.load(withAppToken: \"<YOUR_APP_TOKEN>\", placement: \"<YOUR_PLACEMENT>\", delegate: self)", "language": "swift" } ] } [/block] [block:code] { "codes": [ { "code": "[smallLayout loadWithAppToken:@\"<YOUR_APP_TOKEN>\" placement:@\"<YOUR_PLACEMENT>\" delegate:self];", "language": "objectivec" } ] } [/block] In order to get callbacks from **PNLayout**, you should implement **PNLayoutLoadDelegate** for your class. Once an ad is loaded, you will get a fully created view that can be placed in any view. [block:api-header] { "title": "Use Small Layout Ad" } [/block] Once the load callback is over, this layout returns, as a result, an initialized view that can be used inside your own ad container. Impressions and clicks are tracked directly from the SDK, but you need to call `startTrackingView()` method so the layout starts listening for clicks and checking the ad on the screen. You can extract the view from `smallLayout.viewController.view`. Any interaction with this method without a previously loaded layout will do nothing. [block:code] { "codes": [ { "code": "let layoutView = smallLayout.viewController.view\n// Inject the view into your view container\nsmallLayout.startTrackingView()", "language": "swift" } ] } [/block] [block:code] { "codes": [ { "code": "UIView *layoutView = smallLayout.viewController.view;\n// Inject the view into your view container\n[smallLayout startTrackingView];", "language": "objectivec" } ] } [/block] It is highly recommended that if you have a scrolling view and you want to stop tracking the ad view (which is recommended when the ad disappears from the screen), you can use the `stopTrackingView()` method. [block:code] { "codes": [ { "code": "smallLayout.stopTrackingView()", "language": "swift" } ] } [/block] [block:code] { "codes": [ { "code": "[smallLayout stopTrackingView];", "language": "objectivec" } ] } [/block]